How to track video playback events

Each online video player should have a different events related to playback, like video playback started, playback ended, playback paused ... The video players should also allow you to connect a custom JavaScript to each event. This way you can track e.g. video to be watched till its end.

Lets works with a real example. YouTube video's got a useful API allowing all what we've described in the first paragraph. You can find the API here: https://developers.google.com/youtube/js_api_reference#Events

In our example, we will track a completely watched video (onStateChange event with response value zero). As you can see in the youtube API (the link above), there are 6 possible states - unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5). As the end of video is represented with zero, we will track for zero.

Step 1

The first step you have to take is to embed the desired video to your page, where tracking will happen. Here is an example code (found in the link above):

<script type="text/javascript" src="swfobject.js"></script>    
<div id="ytapiplayer">
  You need Flash player 8+ and JavaScript enabled to view this video.
</div>

<script type="text/javascript">
  var params = { allowScriptAccess: "always" };
  var atts = { id: "myytplayer" };
  swfobject.embedSWF("https://www.youtube.com/v/VIDEO_ID?enablejsapi=1&playerapiid=ytplayer&version=3",
                     "ytapiplayer", "425", "356", "8", null, null, params, atts);
</script>

- the URL of your video have to contain enablejsapi param with value 1 (true) which is required if you want to use API for SWF (for better communication with Flash Player settings and options).

- the allowScriptAccess parameter in the code is needed to allow the player SWF to call functions on the containing HTML page, since the player is hosted on a different domain from the HTML page.

- the only attribute we're passing in is the id of the embed object - in this case, myytplayer. This id is what we'll use to get a reference to the player using getElementById().

swfobject.embedSWF will load the player from YouTube and embed it onto your page.

swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj)

swfUrlStr - This is the URL of the SWF. Note that we have appended the enablejsapi and playerapiid parameters to the normal YouTube SWF URL to enable JavaScript API calls.
replaceElemIdStr - This is the HTML DIV id to replace with the embed content. In the example above, it is ytapiplayer.
widthStr - Width of the player.
heightStr - Height of the player.
swfVersionStr - The minimum required version for the user to see the content. In this case, version 8 or above is needed. If the user does not have 8 or above, they will see the default line of text in the HTML DIV.
xiSwfUrlStr - (Optional) Specifies the URL of your express install SWF. Not used in this example.
flashVarsObj - (Optional) Specifies your FlashVars in name:value pairs. Not used in this example.
parObj - (Optional) The parameters for the embed object. In this case, we've set allowScriptAccess.
AttObj - (Optional) The attributes for the embed object. In this case, we've set the id to myytplayer.

Step 2

The next step is to get reference of the player so you can then communicate with API. To do this, use the following JavaScript code:

<script type="text/javascript">
function onYouTubePlayerReady(playerId) {
  ytplayer = document.getElementById("myytplayer");
  ytplayer.addEventListener("onStateChange", "trackIt");
}
</script>

Step 3

The last step is to add action tracking code for the playback event. In the previous block of code, you can see that we've named the function to be called on a state change The code have to be adjusted to your PAP installation URL, so please change yoursite.com to your real installation domain name:

<script id="pap_x2s6df8d" src="https://www.yoursite.com/pap_4/scripts/salejs.php" type="text/javascript">
</script>

<script type="text/javascript">
function trackIt(newState) {
  if (newState == 0) {
    var sale = PostAffTracker.createSale();
    sale.setTotalCost('120.50');
    PostAffTracker.register();
  }
}
</script>

You can adjust the sale tracking code the way you need - you can change it to a specific action tracking code, you can add additional parameters like product ID (e.g. to specify which video it was) etc ...

How to track video playback events

Other Articles