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.
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):
- 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)
- 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.
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:
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 ...