Javascript API to data attributes

So it is both possible to do tracking based on the Javascript API and data attributes.

It is quite easy to go from one to the other.

Let’s start with the pageview example in the Javascript API.

harvest.trackEvent({
    "event":"pageview",
    "data": {
        "pageLanguage": "en"
    }
});

Basically, if we want to go from this Javascript API version to the data-attributes, we need to do two things:

1. Translate the event to a data attribute. That can be done by the following table.

event	data attribute
pageview	data-track-page
contentview	data-track-contentview
click	data-track-click
funnelstepview	data-track-funnelstepview
change	data-track-change
dataview	data-track-dataview

2. Copy the data object in to the data-attribute.

If we look at the example above. This leads to the following:

1. We need the data attribute: data-track-page, because the event is pageview.
2. We need the following data object:

{
    "pageLanguage": "en"
}

This leads to the following data attribute on a div.

<div data-track-page='{
    "pageLanguage": "en"
}'>
...
</div>