Back

There are currently two ways of implementing the Vzaar Video Player:

  • iFrame embed : this is where the video player is embedded into the page with a simple iFrame embedding script. The script looks like.
<iframe allowFullScreen allowTransparency="true" class="vzaar-video-player" frameborder="0" height="240" id="vzvd-1556961" mozallowfullscreen name="vzvd-1556961" src="http://view.vzaar.com/1556961/player?apiOn=true" title="vzaar video player" type="text/html" webkitAllowFullScreen width="448"></iframe>
  • HTML Embed : This is also done with a simple embed script but instead of using an iFrame  this is a block of JavaScript code that gets placed on the page. This block of code will look something like:
<div id='video-container'>
    <div class='vzaar_media_player'>
        <object data='http://view.vzaar.com/1080935/flashplayer' height='324' id='video' type='application/x-shockwave-flash' width='576'>
        <param name='allowFullScreen' value='true' />
        <param name='allowScriptAccess' value='always' />
        <param name='wmode' value='transparent' />
        <param name='movie' value='http://view.vzaar.com/1080935/flashplayer' />
        <param name='flashvars' value='apiOn=true&amp;colourSet=grey&amp;colourBg=#ffffff&amp;border=none&amp;socialSharing=0,0,0' />
        <video controls='' height='324' id='vzvid' onclick='this.play();' poster='http://view.vzaar.com/1080935/image' preload='none' src='http://view.vzaar.com/1080935/video' width='576'></video>
    </object>
</div>
    <div id='vid-info' style="font-family: Courier, monospace; font-size: 13px;">
        <a href='#' id='addBookmark'>Add Bookmark</a>
        <a href='#' id='resetBookmark'>Reset Bookmark</a>
    </div>
</div>

Both methods require the JavaScript API to be loaded. This is the script for the client.js file from Vzaar: 

<script src="http://player.vzaar.net/libs/flashtakt/client.js" type="text/javascript"></script>

This needs to load before the event listener code is added. The best practice method for loading this file would be to have the client add the script block directly on the page before the utag.js file. Otherwise it can be added via JS Code Extension scoped to PreLoader or in a Tealium Custom Container Tag. 

 

Setting Up Tracking

Attached is a block of code that you can copy and paste into a JavaScript Code Extension. This extension should be scoped to PreLoader. *** If you need help adding a JavaScript Code Extension see this post:

 

JavaScript Code Extension

 

Once pasted into the JavaScript code extension there are four configuration fields at the very top of the code that you can customize: video_events, milestone_percentages, player_element_id, and player_type. 

  • video_events - This is a list of events that you would like to track with the code. By default this is set up to track play, pause, complete and milestones. Vzaar currently only has three events that are tracked: playState, progress, and interaction. All three are enabled by default.
  • milestone_percentages - This is a list of percentages that you would like to track as milestones. For the Vzaar Player the milestones must be rounded to an even "10" value. By default this is set to trigger an event when the video has reached 20, 50, 70, 90 percent complete. However, this can be customized to your specific milestones. You can deactivate milestone tracking by removed the "progess" event from the video_events list.
  • player_element_id - This value needs to match the id of the element that is embedding the video player. If using the iframe method this is the id of the iframe. If using the HTML method this should be id of the video object element.
    • If your iframe embed code is the above code example, then this value would be:  "vzvd-1556961"
    • If using the HTML method and you were using the above code example, this value would be: "video" 
  • player_type - This is the method you are using to embed your video. Because the two embed methods use different functions to add the listeners, this variable is used to determine which function will be used. The possible options are: "iframe" or "html". 

The attached script will work for both the html and iframe embed methods. This code needs to load as soon as possible so that the PlayerReady function is defined before the video is loaded. Once the video is loaded it will call the PlayerReady function, and the extension is not loaded before the video the tracking WILL NOT work. 

*** Because this extension needs to run as soon as possible, the JavaScript Code extension that holds the code needs to be scoped to PreLoader. ***

This may introduce a race condition between the time the video is loaded and the time the PlayerReady function is defined. If the Tealium utag.js file is at the top of the body, as recommended, this shouldn't be a problem. However, if Tealium is coded at the bottom of the page there is more risk that you'll run into this issue. 

 

iFrame Embed

If using the iframe embed code there is one nuance specific to this method. 

Notice in the above sample iframe embed script that the "src" of the iframe has a parameter at the end of it that enables the tracking API for the event listeners:

src="http://view.vzaar.com/1556961/player?apiOn=true"

This has to be appended to the end of the "src" or the tracking WILL NOT work. 

 

Output Variables

This code will output a set of data sources that you can add in the UI and then use to send data to your tag vendors. 

The variables are as follows:

  • event_type - "video" This will always equal video for these events
  • event_name - "play", "pause", "resume", "complete", "milestone" These are the default names that will be output. If you have customized the video_events variable as mentioned above then you may see something like: jwplayerMute for the onMute event. 
  • video_position - "11" This will output the position, in seconds, of the video when one of the events took place. i.e. pause or milestone
  • video_duration - "119" This tells the over length of the video
  • video_milestone - "M:1:25" This outputs the milestone number "1" and the milestone percentage "25." This allows you to see where your users are dropping out of the videos

Attached is a csv file with these variables and descriptions for easy uploading into the Data Sources tab of the Tealium UI. 

NOTE: This code will call utag.link, but there are lines that are commented out that will support the Media Module for SiteCatalyst. The thought behind calling utag.link is then you'll have another extension that will determine when to call the Media Module functions so this extension is more "plug and play" with less customizations. 

*** Because this extension needs to run as soon as possible, the JavaScript Code extension that holds the code needs to be scoped to PreLoader. ***

Vzaar Video Tracking Extension

Attachments