Act-On Hack #3: Video tracking in Act-On

Tracking of video interaction is a missed functionality in Act-On. With this hack you can add video tracking to Act-On for YouTube and Vimeo videos. All you have to do is replace the original video code.

Starting a video and watching it to the end is stored as behavior in Act-On. It can be used in lead scoring, segmentation and in workflows and campaigns.

How does it work?

The functionality is based on website event tracking. Video interaction is stored in Act-On as Web Page Visit (see below images).

Below I will explain how to implement video tracking for YouTube and Vimeo videos.

Video tracking for YouTube

• Find the YouTube videoID for the video you want to track. Easiest is to search for the video on YouTube and copy the videoID from the YouTube URL (the yellow part of the URL)

https://www.youtube.com/watch?v=QhyIKJaR3yA

• Write down the pixel height and width of the video.
• Write down the name for the video to appear in Act-On. Use the following naming convention:
  • User starts the video: video-VIDEONAME_playing
  • User watches the video to end: video-VIDEONAME_finished
• Copy the below code and place this on the page to replace the current video code.

<! - 1. The <iframe> (and video player) will replace the <div> tag. ->
<div id = "player"> </div>

<script>
// 2. This code loads the iframe Player API code asynchronously.
var tag = document.createElement ('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName ('script') [0];
firstScriptTag.parentNode.insertBefore (tag, firstScriptTag);

// 3. This function creates an <iframe width = "640" height = "390"> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady () {
player = new YT.Player ('player', {
height: '390',
width: '640',
videoId: 'QhyIKJaR3yA',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady (event) {}

// 5. The API calls this function when the player's state changes.
function onPlayerStateChange (event) {
if (event.data == YT.PlayerState.PLAYING) {
ActOn.Beacon.track ('videohospitality_playing', 'page', new Date (). getTime ())
console.log ( "video playing");
}
if (event.data == YT.PlayerState.ENDED) {
ActOn.Beacon.track ('videohospitality_finished', 'page', new Date (). getTime ())
console.log ("video ended") ;
}
}
</script>

• Replace the yellow code elements with your own data.
• Save the page and check if the video works.
• Start the video and watch the video till the end (you can also skip and watch the last 5 seconds).
• Check Act-On to see if you see the video interaction under Inbound> Website prospector> Pages Visited.
• No video tracking in Act-On? Check if the page can be found in Act-On.

Video tracking for Vimeo

• Find the Vimeo videoID for the video you want to track. Easiest is to search for the video on Vimeo and copy the videoID from the Vimeo URL (the yellow part of the URL)

https://vimeo.com/76979871

• Write down the pixel height and width of the video.
• Write down the name for the video to appear in Act-On. Use the following naming convention:
  • User starts the video: video-VIDEONAME_playing
  • User watches the video to end: video-VIDEONAME_finished
• With Vimeo you can also track when a user has watched a certain percentage of the video. Replace the x with a number like 50 or 70: video-VIDEONAME_watched-xperc.
• Copy the below code and place this on the page to replace the current video code.

<iframe src="https://player.vimeo.com/video/369696354" width="640" height="360" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"></iframe>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);

player.on('play', function() {
console.log('play video');
ActOn.Beacon.track('video_NAME_playing','page',new Date().getTime());
});

player.on('ended', function() {
console.log('finished video');
ActOn.Beacon.track('video_NAME_finished','page',new Date().getTime());
});

player.on('timeupdate', function(data) {
console.log('Percentage watched: '+data.percent);
if (data.percent == 0.7) {
console.log('70% of video watched');
ActOn.Beacon.track('video_NAME_watched-70perc','page',new Date().getTime());
}
});
</script>

• Replace the yellow code elements with your own data.
• For the video watched tracking you set the percentage in the if statement: 70% is 0.7; 20% is 0.2. The console log and Act-On tracking are activated when this percentage is reached. The watched tracking will only work the first time. When the user watches the video for the second time, the watched video tracking will not trigger again.
• Save the page and check if the video works.
• Start the video and watch the video till the end.
• Check Act-On to see if you see the video interaction under Inbound> Website prospector> Pages Visited.
• No video tracking in Act-On? Check if the page can be found in Act-On.

Like this post?

If you like this post then also check the other Act-On hacks about website event tracking and source tracking in Act-On. If you have any question or remarks you can post them below. I will try to answer them as good as possible.