Examples: Using tags

Examples: Using tags

1. Video playback events (play, pause, end)

HTML:

<video id="demo" width=720 height=300 controls>
<source src="video.mp4" type="video/mp4">
Video not supported by your browser.
</video>

JavaScript:

var v = document.querySelector('#hero-video');
// PAUSE
v.addEventListener('pause', function() {
UST.addTag('video_paused');
// You can also add another tag with the exact time at which the video was paused
UST.addTag('video_paused_at_' + Math.round(v.currentTime));
});
// PLAY
v.addEventListener('play', function() {
UST.addTag('video_play');
});
// ENDED
v.addEventListener('ended', function() {
UST.addTag('video_end');
});

Result:

Recorded users will then have tags similar to those:

2. Track if user scrolled on homepage

JavaScript:

// Add a tag for users who scroll at least once on the homepage
window.addEventListener('scroll', function didScroll() {
UST.addTag('scrolled_on_home');
window.removeEventListener('scroll', didScroll); // Sending it once is enough, remove listener
});

Result:

Recorded users will then have tags similar to this:

3. Record all clicked elements

By default, in order to reduce storage size, userTrack only stores click positions for both heatmaps and recordings. If you want to also store the clicked elements selectors you could add something like this after the tracker file:

<script>
UST.onLoaded = function () {
addDynamicEventListener(document.body, 'click', '*', function (e) {
if (!e.delegatedTarget) return;
var tag = UST.DOM.getUniquePath(e.delegatedTarget);
UST.addTag('click_' + tag);
});
}
</script>

This will add a tag like click_element-path for every element clicked, for example click_#pricing-button(1).

The element-path is a CSS selector that has the nth-child: part remove to save space, you can get the original selector by using this function:

function uncompressSelector(selector) {
return selector.replace(/\((\d+)\)/g, ' > *:nth-child($1)');
}
// Example
var cssSelector = uncompressSelector('#pricing-button(1)');
console.log(cssSelector );
// Outputs: #pricing-button > *:nth-child(1)