- TLC Home Home
- Discussions & Ideas Discussions & Ideas
- Product Guides Product Guides
- Knowledge Base Knowledge Base
- Developer Docs Developer Docs
- Education Education
- Blog TLC Blog
- Support Desk Support Desk
This article shows how to set up video tracking in Tealium iQ for Wistia videos.
In this article:
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:
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.
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:
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.
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); }
Copyright All Rights Reserved © 2008-2021