Track video playback to Adobe Analytics through Adobe Launch

When publishers have a lot of video (or audio) content in their websites, their key measurement requirements would be to know a) how many people are watching their videos, and b) which parts of the videos are people watching.

In this three-part series, I describe how to use Adobe Experience Platform Launch (or Adobe Launch, as it's more commonly known) to track video playback events to Adobe Analytics or Adobe Media Analytics:

1. Part one (this part): tracking video playback events using Adobe Analytics' Custom Links
2. Part two: tracking video playback events to Adobe Media Analytics, Adobe's media tracking and reporting solution.
3. Part three: tracking Brightcove video playback events to Adobe Media Analytics, instead of Brightcove's own analytics integration.

(Each part if written as a standalone guide, so you don't need to read them one-by-one.)

There are a few things to note:

• These instructions work with HTML5 audio and video only, because they depend on the native events that modern web browsers provide when working with these assets. These instructions will not work for any other kinds of video, particularly those that depend on specific browser plug-ins or extensions.
• These instructions will not work with YouTube video embeds. That is because the embeds use an <IFRAME> instead of a regular <VIDEO> HTML element.
• Although I use video in these instructions, the same method will work for audio as well. This is because the HTML5 media specification works with both kinds of formats, and I am not tracking anything that is video-specific, like picture frame size.

Adobe Experience Platform Launch, more commonly known as Adobe Launch, is Adobe's tag management solution. To find out more about Adobe Launch, you can read it from Adobe's documentation.

In Adobe Launch, you setup "Rules" to control the tags that you want to fire. Each Rule can have one or more "Conditions" that determine. When the Rule is triggered by a Condition, it will run the "Actions" defined inside the Rule.

Recipe to track video playback events to Adobe Analytics through Adobe Launch

1. A Rule to associate with video playback.
2. Events in the Rule to detect the different kinds of playback events, like "Play", "Pause", etc.
3. Actions in the Rule to send the tracking data to Adobe Analytics.

In these instructions, I show how to track the "play", "pause", and "ended" video playback events.

1. Create the Rule to associate with video playback.

Only one Rule is really needed to work with all of the video playback events. This will be explained in the next step when creating the Events.

2. Create the Events in the Rule, one for each kind of video playback event.

Adobe Launch's Core extension can detect all of the common media-related event types, and the names of the event types are quite self-explanatory. This saves us the trouble of having to write custom code to detect these events from the web browser.

Reminder: These media-related event types work with HTML5 audio and video only! They will not work with any other kinds of audio/video, particularly those that depend on specific browser plug-ins or extensions, nor with YouTube video embeds.

Adobe Launch's Core extension's "Media" Event types

To start, choose the "Media Play" Event type. Then, setup the rest of the Event Configuration as needed. This is where the CSS selecor of the <VIDEO> element in the web page needs to be specified.

Adobe Launch's Core extension's "Media" Event configuration

This is what my "Media Play" Event's configuration looks like:

"Media Play" Event configuration

I have also updated the configuration's name to reflect the setup. In that way, when I look at my Rule's setup, I can instantly see how I have configured my "Media Play" Event without needing to open up the Event later on.

Rule with "Media Play" Event

The beauty of an Adobe Launch's Rule is that you can add more than one Event to it. Then, when any of the Events are met while the user browses your website, the Rule will be triggered immediately.

For our purpose, that means that instead of creating separate Rules for each type of video playback event, all of the playback events can be included under one Rule, like so:

Rule with three "Media" events

But when it comes to the actual tracking, how will Adobe Launch know which event to track? For example, I wouldn't want to track a "pause" as a "play" incorrectly. That will be solved in the next section, when setting the Actions for this Rule.

3. Create the Actions to send the tracking data to Adobe Analytics

At this point, the Adobe Analytics extension should be installed in the Adobe Launch property already. Otherwise, the rest of these instructions are moot.

I'll assume that the following variables have been setup to track the video playback data:

• eVar 10: video URL.
• eVar 11: video segment associated with the playback event, e.g. "10 sec of 30 sec", where "10 sec" refers to the video's current time, and "30 sec" refers to the video's duration.
• event10: started playing the video.
• event11: paused the video.
• event12: finished playing the video.
• Custom Link name: a string with the format "video [action]", e.g. "video play".

The first Action is to set the Adobe Analytics variables, and the second Action is to send the beacon to Adobe Analytics.

Set the Adobe Analytics variables

In the Variables section, add eVar 10 and set it to %this.currentSrc%.

Setting eVar 10

• this refers to the <VIDEO> element, the element that was indicated by the CSS selector in the Events.
• currentSrc refers to the URL of the video that is being played at the moment that the Rule was triggered.

So eVar 10 gets set with the currently playing video's URL.

Next, in the Custom Code section, click "Open Editor" and add the following code:

s.eVar11 = Math.ceil(this.currentTime) + " sec of " + Math.ceil(this.duration) + " sec";

var eventType = event.nativeEvent.type;
switch (eventType) {
  case "play":
    s.events = "event10";
    break;
  case "pause":
    // a "pause" event is sent with the "ended" event, so don't track the pause in that case
    if (Math.ceil(this.currentTime) < Math.ceil(this.duration)) {
      s.events = "event11";
    }
    break;
  case "ended":
    s.events = "event12";
    break;
}

s.linkTrackVars = s.apl(s.linkTrackVars, "eVar11,events");
s.linkTrackEvents = s.events;

Here's what each part does:

s.eVar11 = Math.ceil(this.currentTime) + " sec of " + Math.ceil(this.duration) + " sec";

This sets the eVar 11 variable with the video segment as per my specification. The use of Math.ceil() is to ensure that the reported times are in integers / whole numbers. Most browsers report the current time and duration in floating point numbers / decimals, which is all well and good, but impractical in our reporting use-case. So Math.ceil() conveniently rounds them up for easier readability.

var eventType = event.nativeEvent.type;

This gets the HTML5 media event type from Adobe Launch's event object. The returned event type corresponds to Adobe Launch's "Media" Event types.

switch (eventType) {
  case "play":
    s.events = "event10";
    break;
  case "pause":
    // a "pause" event is sent with the "ended" event, so don't track the pause in that case
    if (Math.ceil(this.currentTime) < Math.ceil(this.duration)) {
      s.events = "event11";
    }
    break;
  case "ended":
    s.events = "event12";
    break;
}

For each "Media" Event type, I set the appropriate s.events success event.

The only tricky part is with the "pause" event. Most web browsers report a "pause" when the video has finished playing. If this were left alone, then that would always cause an extra "pause" to be tracked. But we don't want that, because the user hadn't really pressed "Pause" at the end of the video.

So I check if the current time is equal to the video's duration. If so, I assume that the user has really finished watching the video, and so I ignore the extra "pause" event emitted by the web browser.

s.linkTrackVars = s.apl(s.linkTrackVars, "eVar11,events");
s.linkTrackEvents = s.events;

These two lines are required because eVar 11 and the success events will be tracked with a Custom Link later on. I use Adobe Analytics' apl plugin to update the s.linkTrackVars appropriately. This also ensures that the eVar 10 that was set earlier in the Variables section still gets tracked.

(You can get the apl plugin by installing Adobe's Common Analytics Plugins extension in your Adobe Launch property.)

Setting the custom code

So at the end of this, I have set my eVars 10 and 11 and success events. I am now ready to send my Custom Link beacon to Adobe Analytics.

Send Custom Link beacon to Adobe Analytics

In the Tracking section, choose s.tl(), because a Custom Link is tracked. A Page view should not be tracked, because a video playback event doesn't cause a new page to be loaded in the web browser.

Set the Link Name to video %event.nativeEvent.type%. Notice that the fixed string "video" is concatenated with the data element event.nativeEvent.type (wrapped in the required %..% symbols).

Setting the Custom Link Name

Recall from the Custom Code earlier that event.nativeEvent.type will return one of three values: "play", "pause" or "ended".

So with this concatenation, I am able to obtain the final Custom Link Name according to my specification.


Putting all of the above together, the Rule should look like this, with three Events and two Actions:

Complete Rule configuration

No Conditions need to be configured in the Rule for the purpose of tracking video playback events.

Testing the Rule

After you save the Rule, add it to a library, and build that library in Adobe Launch, you can see this Rule in action when you play, pause or finish watching an HTML5 video in your website. In the Adobe Experience Platform Debugger's Analytics section, you should see eVar 10, eVar 11, Events, Link Name and Link Type set like so:

Adobe Experience Platform Debugger's Analytics output

And that is how video playback events can be tracked to Adobe Analytics through Adobe Launch.

This setup works if you want to track the events with Adobe Analytics' Custom Links. But if you have a licence for Adobe Media Analytics, Adobe's media tracking and reporting solution, then you would want to take advantage of the media "hearbeat" reports that it provides. Tracking video playback to Adobe Media Analytics will be covered in the next post.