Tracking Content Engagement & Partner Teaser Elements

To make the best use of the Customer Insights Dashboards, you have to implement two plugins.

Tracking Content Engagement

To collect content engagement data, you have two options. You can either use the Content Engagement Plugin or create a Custom Plugin in Tag Integration.

Option 1 - Content Engagement Plugin

Capturing the reading behavior of your website visitors is an essential performance indicator – especially for content pages: For publishers it is crucial to know how readers interact with their articles. The Content Engagement Plugin measures the percentage of an article read by the end consumer. The plugin not only considers the scrolling behavior but also the time span. It records how long a specific part was in the visible area of the browser window. This time can be adapted for different browser resolutions, because on small screens usually less text is shown than on large screens.

To measure the complete page, add the following code on all content pages

window.wt_rt = window.wt_rt || [];
window.wt_rt.push(
{
selector: 'body' 
}
);

In this case, the page name (ContentId) will be the name of the element.

Each element on your page must be flagged and named individually. Please add the following code:

window.wt_rt.push(
{
selector: '#content-engagement-1',
name: 'Element1'
}
);

window.wt_rt.push(
{
selector: '#content-engagement-2',
name: 'Element2' 
}
);
);

In the html-Code, the integration could look as follows

<div id="content-engagement-1">
...
</div>

<div id="content-engagement-2">
...
</div>

Learn more on the page Content Engagement: What percentage of an article has been read?

Option 2 - Custom Plugin

The easiest way to initialize content elements is to have all of them categorized in the same class or a variety of classes and mark them with a certain attribute that contains the required name value. Then you can use a simple loop to initialize them. If you do not have an attribute containing the information for name you can use a child or parent element in the code. The code below can be entered in a Custom Plugin in Tag Integration.

Example

window.wt_rt = window.wt_rt || [];
var allcontent = document.querySelectorAll("[enter class name or list of class names here]");
for (var i = 0; i < allcontent.length; i++) {
    try {
        var c_item = allcontent[i];
        var c_name = c_item.getAttribute("[enter attribute with teaser name here");
        window.wt_ttv2.push({
            selector: c_item,
            name: c_name,
        });
    } catch (e) {}
}

Tracking Partner Teaser Elements

Most likely your marketing partners display banners, affiliate links, or other kinds of teasers on your website. To track partner teasers, you have two options. You can either use the TTP or create a Custom Plugin in Tag Integration.

Option 1 - TTP

To initialize the partner teaser elements, you need the object "wt_ttv2". Mark the relevant teaser elements by adding configurations to the array "wt_ttv2" for all pages with teaser elements of your marketing partners. The configuration for a teaser element is divided into "selector", "exclude" and "data".

Example

window.wt_ttv2 = window.wt_ttv2 || [];
window.wt_ttv2.push(
    {
        selector: "li.item:nth-of-type(2)",
        exclude: [
          "li.item:nth-of-type(2) a:last-child"
        ],
        data: {
          name: "Marketingpartnerteaser1",
          rank: "Main Page Banner",
          content: "Mapp", 
        }
    }
);

Option 2 - Custom Plugin

The easiest way to initialize teaser elements is to have all of them categorized in the same class or a variety of classes and mark them with certain attributes that contain the required information. Then you can use a simple loop to initialize them. If you do not have attributes containing the information for name, placement, and or partner you can use child or parent elements in the code. The code below can be entered in a Custom Plugin in Tag Integration.

Example

window.wt_ttv2 = window.wt_ttv2 || [];
var allteasers = document.querySelectorAll("[enter class name or list of class names here]");
for (var i = 0; i < allteasers.length; i++) {
    try {
        var t_item = allteasers[i];
        var t_name = t_item.getAttribute("[enter attribute with teaser name here");
        var t_placement = t_item.getAttribute("[enter attribute with teaser placement here");
        var t_content = t_item.getAttribute("[enter attribute with teaser content here");
        window.wt_ttv2.push({
            selector: t_item,
            data: {
                name: t_name,
                rank: t_placement,
                content: t_content,
            },
        });
    } catch (e) {}
}

Implementing Tag Integration Loader

The basis of the tracking implementation is the integration of the Tag Integration loader on your website. To do this, add the following configuration for Tag Integration below the data layer of your website:

Example

window._tiConfig = window._tiConfig || {
    tiDomain: 'responder.wt-safetag.com', // The domain given to you in your account information
    tiId: '111111111111111', // The ID given to in your account information
    option: {}
};
 
/** start TagIntegration loader  */
(function(a,d,c,f){a.wts=a.wts||[];var g=function(b){var a="";b.customDomain&&b.customPath?a=b.customDomain+"/"+b.customPath:b.tiDomain&&b.tiId&&(a=b.tiDomain+"/resp/api/get/"+b.tiId+"?url="+encodeURIComponent("https://"+d.location.host+"/")+"&v=5");if(b.option)for(var c in b.option)a+="&"+c+"="+encodeURIComponent(b.option[c]);return a};if(-1===d.cookie.indexOf("wt_r=1")){var e=d.getElementsByTagName(c)[0];c=d.createElement(c);c.async=!0;c.onload=function(){if("undefined"!==typeof a.wt_r&&!isNaN(a.wt_r)){var b=
new Date,c=b.getTime()+1E3*parseInt(a.wt_r);b.setTime(c);d.cookie="wt_r=1;path=/;expires="+b.toUTCString()}};c.onerror=function(){"undefined"!==typeof a.wt_mcp_hide&&"function"===typeof a.wt_mcp_hide.show&&(a.wt_mcp_hide.show(),a.wt_mcp_hide.show=function(){})};c.src="//"+g(f);e.parentNode.insertBefore(c,e)}})(window,document,"script",_tiConfig);
 
/** end TagIntegration loader */

After having followed the steps provided above for the data layer implementation and the plugins, the tracking pixel starts collecting and sending data to your Intelligence account.