Back

This code follows the best practice methods of implementing the Ooyala video solution. However, there are other ways including previous versions of the Ooyala player that may not work with this extension. 

 

Attached is a block of code that you can copy and paste into a JavaScript Code Extension. If you need help adding a JavaScript Code Extension see this post:

 

JavaScript Code Extension

 

Once pasted into the JavaScript code extension there are three configuration fields at the very top of the code that you can customize: video_eventsmilestone_percentages and player_object_name

 

  • 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 "mute" to track when a user mutes the volume. You can also see a list of available events here.
  • 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 removed the "onTime" event from the video_events list. 
  • player_object_name - When the Ooyala library loads on the page it should call a function called "OO.Player.create." This creates the video on the page and gets it ready for viewing. When this function is called it will create an object of data points and function specific to that video player. It would look something like: 
 window.player = OO.Player.create('playerwrapper','w3ZHc0Njr33Tdp-RRcwfZMjaOrmzOP82',{
    // More code here doing something.   
 });

The player_object_name variable should contain "player" in this case. You can see that "window.player" gets set to the object that is created from calling "OO.Player.create." This object (player) is getting set in the global scope (window) so it can be used by other libraries like Tealium. 

This extension code will wait until the Ooyala player 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

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. 
  • 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. 

 

Ooyala Extension Data Sources Upload

Attachments