Integrating Tealium iQ with A Flash Video Player

[#1]

Notes on ActionScript

When it comes to integrating Tealium iQ (and just about any tag-based third party vendor) into Flash, we typically divide the world into two pieces. Flash applications that support ActionScript 3.0 and up and those that don't. In this post, we will look at the two different approaches to integrating Tealium iQ into a Flash video player based on the above division.

In the examples below, we will be using the data sources recommended in the "Tracking Video with Tealium iQ" post to build out our tracking calls.

ActionScript Versions 1.X-2.X

With pre-3.0 versions of ActionScript, there isn't a method for making tracking calls natively from within the Flash environment. Instead, the Flash application will need to make external calls to the web page's JavaScript in order to accomplish the goal of tracking events within the application.

As mentioned previously, with early versions of ActionScript we can't include a native library to handle our tracking calls. So instead, we will make JavaScript calls to the webpage that contains the video player.

Here is the generic structure of that type of call:

getURL(‘javascript’:utag.link
          (
               { variable_1:”variable_1_VALUE”, variable_2:”variable_2_VALUE”}
          )
     ’);

Note the following:

• Variables and variable values are separated by a colon ( : )
• Variables are separated by a comma ( , )
• ​Variable values are enclosed in double-quotes ( " )

​Now that we have the generic structure, let's look at how we would attach Tealium iQ (and therefore your analytics tags) to a play button in a video player:

In this example, we assume the simplest execution which is attaching our Tealium iQ call directly to an event on an object in the Flash player. If you have custom event handlers and event listeners built into your Flash player, you may end up building in the Tealium iQ calls as part of those.

playBtn_btn.onRelease = function() {
     getURL(‘javascript:utag.link
          (
               {
                    //recommended attributes
                    video_event:”video_play”,
                    video_name:”My Video Title”, //the name or title of the video
                    video_type:”standard”, //the type of video
                    video_position:”0”, //time position of the event in seconds (could also be in milliseconds and should match units used in video_length)
                    video_length:”60”, //the total length of the video in seconds (could also be in milliseconds and should match units used in video_position)
                    //optional attributes
                    video_player:”MyCo Proprietary Player”,
                    video_category:”My Video Category”,
                    video_subject:”My Video Subject”
               }
          )
     ‘); 
​

Note the following:

• We attached the Tealium iQ function "utag.link" to the object "playBtn_btn" and are triggering it "onRelease"
• Always make sure to separate your getURL for Tealium iQ onto an event handler different from other getURL calls that might be attached to that object

ActionScript Version 3.X+

Starting with ActionScript 3, Flash started supporting native libraries which enables us to import the Tealium iQ functions directly into the Flash application and make our tracking calls natively from within Flash. To do this we need to:

1. Import the Tealium iQ ActionScript library (utag.as)
2. Import the utag class from utag.as into our Flash player
3. Instantiate the tracking object
4. Define the data object
5. Define the appropriate tracking calls to objects and events within the Flash player

Import the Tealium iQ ActionScript Library

Our ActionScript library is very small and you could easily download and import it to your Flash player app locally, but in this example we will import the copy that Tealium keeps stored on our CDNs:

//import utag.as from the CDN
include “http://cdn.tealium.com/universal_tag/libs/com/tealium/utag.as”; 

Import the utag class​

//import the utag class from utag.as
import com.tealium.utag; 

Instantiate the Tracking Object

//create the tracking instance
var utagObj:utag = new utag(); 

Create the Tealium Data Object (utag_data)

 //create the data object
 var utag_data = new Object(); 

Populate the Data Object and Trigger the Tracking Event​

//populate the data object and trigger the view
     playBtn_btn.onRelease = function() {
          utag_data.video_event = “video_play”;
          utag_data.video_name = “My Video Title”;
          utag_data.video_type = “standard”;
          utag_data.video_postion = “0”;
          utag_data.video_length = “60”;
          utag_data.video_player = “MyCo Proprietary Player”;
          utag_data.video_category = “My Video Category”;
          utag_data.video_subject = “My Video Subject”;
          utagObj.handler.trigger(“view”, utag_data);
     }  

And that's all there is to it. If you have more specific questions about using Tealium iQ from within Flash, please contact your Account Manager to schedule a working session.