Wistia Video Tracking

[#1]

This article shows how to set up video tracking in Tealium iQ for Wistia videos.

In this article:

• Setup
• Output Variables
• Source code

Setup

Attached is a block of code that you can copy and paste into a 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: 

1. 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, but you can simply add events to this like like "seek" to track when a user seeks within the video. You can also view a list of available events here. 
2. milestone_percentages
   This is a list of percentages that you would like to track as milestones. By default this is set to trigger an event when the video has reached 25, 50, 75 and 90 percent complete. However, this can be customized to your specific milestones. You can deactivate milestone tracking by removing the "secondchange" event from the video_events list. 
3. video_element_id
   Wistia requires the use of an element id to bind the video events to the video. You will receive a block of code from Wistia that will need to be added to your page code. Within this block of code will be the id that will be entered here.
   • If you are using the iframe embed method, which is recommended by Wistia, you will need to add an id to the block of code that Wistia gives you. 
4. wistia_embed_type
   The possible values here are "iframe" or "api." When you set up your video in the Wistia interface and you select "Embed and Share" from the Video Actions drop down, you are presented with three options of embeding: "iframe", "API" and "SEO." The API and SEO options use the same JavaScript Functions so we don't need to distinguish between those and for both of these options we can use "api" for the wistia_embed_type. But the iframe option requires a different method to "hook" into the video. This is why you will need to distinguish between "iframe" and "api." 

This extension code will wait until the Wistia Object has been defined then run through the necessary functions to attach the listeners. 

Though the code has logic to wait for the player to be defined, the JavaScript Code extension where you paste the code should be scoped to DOM Ready.

Output Variables

The extension 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:

1. event_type - This will always equal video for these events.
2. event_name - These are the default names that will be output
   "play", "pause", "resume", "complete", "milestone"
   If you have customized the video_events variable as mentioned above then you may see something like volumechange for when a user changes the volume. 
3. video_position - This will output the position, in seconds, of the video when one of the events took place. i.e. pause or milestone
4. video_duration - This tells the over length of the video
5. video_milestone - 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. Example: "M:1:25".

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

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.

Source code

var video_events = ["play","pause","end","secondchange"];
var milestone_percentages = ["25","50","75","90"];
var video_element_id = "wistia_k2nhndega2";
var wistia_embed_type = "inline";

var played = false;
var m1 = false;
var m2 = false;
var m3 = false;
var m4 = false;

// Call utag.link in Wistia event listeners
window._tealium_WST = {
  name : "Wistia",
  init_tries : 0,
  eventsAdded : false,
  events : video_events,
  milestone_percentages : milestone_percentages,
// Attaching Event Listeners for Begin, Play, Stop, and Video Completion
// Each Event Handler has a callback function attached to it (mediaEventHandler) which will be called when the event occurs  
  addEvents : function(){
        for(var i=0;i<video_events.length;i++){
          if(video_events[i]=="play" || video_events[i]=="pause" || video_events[i]=="secondchange" || video_events[i]=="end"){
            _tealium_WST.player_object.bind(video_events[i],_tealium_WST[video_events[i]]);
          }else {
            _tealium_WST.player_object.bind(video_events[i],_tealium_WST.extraEvents);
          }
        }
        utag.DB("******** Video Events Added*********");
  },
  play:function(e,pos,dur){
    pos = _tealium_WST.player_object.time();
    dur = _tealium_WST.player_object.duration();
    if (!played) {
      played = true;
      utag.DB("**** video started ****");
      utag.link({event_type:"video",event_name:"play"})
      ////s.Media.open(video_name, video_duration, video_player);
      ////s.Media.play(video_name, 0);
      //s.Media.track(video_name);
    } else{
      //s.Media.play(video_name, 0);
      //s.Media.track(video_name);
      utag.link({event_type:"video",event_name:"resume",video_position:pos,video_duration:dur})
      utag.DB("**** video resumed ****");
    }
  },
  pause:function(e,pos,dur){
    pos = _tealium_WST.player_object.time();
    dur = _tealium_WST.player_object.duration();
    //s.Media.stop(video_name, video_position);
    //s.Media.track(video_name);
    utag.link({event_type:"video",event_name:"pause",video_position:pos,video_duration:dur})
    utag.DB("**** video paused****");
    utag.DB("**** Position: " + pos);
    utag.DB("**** Total Duration: " + dur);
    
  },
  end : function(e,pos,dur){
    pos = _tealium_WST.player_object.time();
    dur = _tealium_WST.player_object.duration();
    //s.Media.complete(video_name, video_position);
    //s.Media.stop(video_name, video_position);
    //s.Media.track(video_name);
    played = false;
    _tealium_WST.resetMilestones();
    utag.link({event_type:"video",event_name:"complete",video_position:pos,video_duration:dur})
    utag.DB("**** video complete****");
  },
  secondchange: function(data,pos,dur){
    pos = _tealium_WST.player_object.time();
    dur = _tealium_WST.player_object.duration();
    var pct = parseFloat(pos / dur) * 100;
    if (pct > _tealium_WST.milestone_percentages[0] && !m1) {
      m1 = true;
      utag.link({event_type:"video",event_name:"milestone",video_milestone:"M:1:"+_tealium_WST.milestone_percentages[0],video_position:pos,video_duration:dur})
      utag.DB("**** 25% viwed****");
    } else if (pct > _tealium_WST.milestone_percentages[1] && !m2) {
      m2 = true;
      utag.link({event_type:"video",event_name:"milestone",video_milestone:"M:2:"+_tealium_WST.milestone_percentages[1],video_position:pos,video_duration:dur})
      utag.DB("**** 50% viewed****");
    } else if (pct > _tealium_WST.milestone_percentages[2] && !m3) {
      m3 = true;
      utag.link({event_type:"video",event_name:"milestone",video_milestone:"M:3:"+_tealium_WST.milestone_percentages[2],video_position:pos,video_duration:dur})
      utag.DB("**** 75% viewed****");
    } else if (pct > _tealium_WST.milestone_percentages[3] && !m4) {
      m4 = true;
      utag.link({event_type:"video",event_name:"milestone",video_milestone:"M:4:"+_tealium_WST.milestone_percentages[3],video_position:pos,video_duration:dur})
      utag.DB("**** 90% viewed****");
    }
  },
  extraEvents : function(pEvent,pos,dur){
    pos = _tealium_WST.player_object.time();
    dur = _tealium_WST.player_object.duration();
    utag.link({event_type:"video",event_name:pEvent.type,video_position:pos,video_duration:dur})
    utag.DB(pEvent);
  },
  resetMilestones : function(e){
    m25 = false;
    m50 = false;
    m75 = false;
    m90 = false;
  },
  init : function(){
    if(wistia_embed_type=='iframe'){
      _tealium_WST.player_object = document.getElementById(video_element_id).wistiaApi;
    }else{
      _tealium_WST.player_object = Wistia.embed(video_element_id.substring(7));
    }
    //utag.DB("Connecting Tealium with Wistia object");
    if(typeof _tealium_WST.player_object!="undefined"){
        utag.DB("TEALIUM: Connecting Tealium with Oyala Player - SUCCESS");
        _tealium_WST.addEvents()
        _tealium_WST.eventsAdded = true;
        return;
    }else{
      // If Wistia object is not defined we will increment the number of tries by 1
      _tealium_WST.init_tries += 1;
      //Stop trying to connect to the Video Player if tried 100 times
      if(_tealium_WST.init_tries>100){
        utag.DB("TEALIUM: Cannot connect to Wistia Video");
        return;
      }
      // Calls init function repeatedly either 100 times or Wistia Object is defined
      setTimeout(function(){_tealium_WST.init()}, 100);
    }
  }
}

if(typeof _tealium_WST.videoPlayer == "undefined"){
  setTimeout(function(){_tealium_WST.init()}, 300);
}