data-track-contentview

The contentview is related to the content web component as can be read in the web components documentation.

A contentview can be related to products, promotions or contents. This would require a viewType. For more information about the possible viewTypes, read the content related interactions documentation.

It is also possible to trigger a content interaction based on a contentview. For more information read about content interaction.

Mechanics

So how do the mechanics work? Well, the moment an element with a data-track-contentview attribute is in the viewport for at least 50%, we wait for 1 second. If the element is still for 50% in view after that second we will track the contentview. Which means that we tell analytics that the user saw the element.

It is possible to change this view duration or at multiple duration. For more information read our data-track-viewdurations documentation.

Code examples

<div data-track-contentview='{
    "viewType": "promotionView",
    "promotions": [{
        "name": "Homepage header",
        "creative": "Baseball jacket 50% off"
    }]
}'>
...
</div>

The example above shows us how to track the contentview of a promotion on the homepage.

<div data-track-contentview='{
    "viewType": "productListView",
    "products": [{
        "id": "123sdfsfd123",
        "name": "Baseball Jacket Grain",
        "price": 99.95,
        "list": "Featured items",
        "position" : 1
    },{
        "id": "531234123",
        "name": "Baseball Cap Grain",
        "price": 49.95,
        "list": "Featured items",
        "position" : 2
    }]
}'>
...
</div>

The above code is an example of tracking two products in the “Featured items” list that were in the viewport.

<div data-track-contentview='{
    "contentInteractionName": "bottomOfPageViewed"
}'>
...
</div>

The code above shows a way to trigger the “bottomOfPageViewed” content interaction.

Note

The tracking is only triggered when the elements with the data-attributes are in view.

data-track-direct

Sometimes it is handy to trigger the tracking based on the fact that the element is somewhere on the page. Regardless of whether it is in view. If that is your goal, you could use the data-track-direct attribute.

When you want to have more control about tracking elements. It is also possible to use our Javascript API.

Combine contentview and click

It can happen that you want to track a contentview and click on exactly the same element. This way it would be redundant to both use a data-track-contentview as well as a data-track-click. If this is the case, you could use the data-track-contentviewclick attribute.