Implementing Video Analytics in Adobe Launch

Description

This article provides steps to implement YouTube video tracking in Adobe Launch using Media Heartbeat SDK.

Pre-requisites

Resolution

STEP 1: Create New Rule

Create a new rule in you Adobe Launch property by clicking “Add Rule” button under “Rules” tab. This rule will contain the event condition to load YouTube video and the Video Analytics and YouTube iFrame API scripts.

• Specify the rule name in the Name text box.

STEP 2: Add Events and/or Conditions

Click on + button under Event and Conditions to create conditions to launch YouTube video. In my example, I have added a condition “Element Exists” to look for a specific div “player” to launch the YouTube video.

STEP 3: Add Actions - Configuration Variables

Click on + button under actions to create a new action item. This will act as a single point of configuration for setting up Video Analytics variables. I have used some hard-coded values. However, you may use data elements to populate these variables.

1. Select “Core” from Extension drop down.
2. Select “Custom Code” from Action Type drop down.
3. Add Action name in Name text box.
4. Select “Javascript” under Language.
5. Check “Execute globally”.
6. Click “Open Editor”.
7. Add the code and click save. Make sure you update the values as per your company and report suite.

(function() {    ‘use strict’;
    // Export symbols.
    window.Configuration = {
        PLAYER: {
            NAME: ‘sample player name’
            //VIDEO_ID: ‘sample video id’,
           //VIDEO_NAME: sample video name’
        },
        VISITOR: {
            MARKETING_CLOUD_ORG_ID: ‘experience cloud ID’,
            TRACKING_SERVER: ‘tracking server’,
            DPID: ‘’,
            DPUUID: ‘’
        },
        APP_MEASUREMENT: {
            RSID: ‘report suite id’,
            TRACKING_SERVER: ‘tracking server’,
            PAGE_NAME: ‘page name’,
            CHAR_SET: ‘UTF-8’
        },
        HEARTBEAT: {
            TRACKING_SERVER: ‘heartbeat tracking server’,
            PUBLISHER: ‘publisher id’,
            CHANNEL: ‘channel’,
            OVP: ‘ovp name’,
            SDK: ‘sgk version’,
       SSL: ‘false’,
       DEBUG: ‘true’
        }
    };
})();

STEP 4: Add Actions Visitor ID Service

Media Analytics needs an instance of Visitor ID Service. You would need to download Visitor ID Service code from Code Manager in Adobe Analytics UI.

Once, you have downloaded Visitor ID Service code, click on + button under actions to create a new action item, then

1. Select “Core” from Extension drop down.
2. Select “Custom Code” from Action Type drop down.
3. Add Action name in Name text box.
4. Select “Javascript” under Language.
5. Check “Execute globally”.
6. Click “Open Editor”.
7. At the bottom, add the following code and click save.
8. At the bottom, add the following code and click save.

var visitor = Visitor.getInstance(“Experience Cloud ID”, {
trackingServer: “tracking server”, // same as s.trackingServer
trackingServerSecure: " tracking server " // same as s.trackingServerSecure
});

STEP 5: Add Actions – Appmeasurement code

Media Analytics needs an instance of Appmeasurement. You would need to download it from Code Manager in Adobe Analytics UI.

Once, you have downloaded the Appmeasurement code, click on + button under actions to create a new action item, then

1. Select “Core” from Extension drop down.
2. Select “Custom Code” from Action Type drop down.
3. Add Action name in Name text box.
4. Select “Javascript” under Language.
5. Check “Execute globally”.
6. Click “Open Editor”.
7. Add Visitor ID Service code.
8. At the top, add the following code and click save.

// Initialize AppMeasurement

var s_account=“report suite id”

var s=s_gi(s_account)

/******** VISITOR ID SERVICE CONFIG - REQUIRES VisitorAPI.js ********/

s.visitor=Visitor.getInstance(“Experience Cloud ID”)



STEP 6: Add Actions – Heartbeat code

Download Heartbeat SDK from https://github.com/Adobe-Marketing-Cloud/media-sdks/tree/master/sdks/js/libs.

Once, you have downloaded the Heartbeat code, click on + button under actions to create a new action item, then

1. Select “Core” from Extension drop down.
2. Select “Custom Code” from Action Type drop down.
3. Add Action name in Name text box.
4. Select “Javascript” under Language.
5. Check “Execute globally”.
6. Click “Open Editor”.
7. Add Visitor ID Service code.
8. At the bottom, add the following code and click save.

//Create a local reference to the MediaHeartbeat classes

var MediaHeartbeat = ADB.va.MediaHeartbeat;
var MediaHeartbeatConfig = ADB.va.MediaHeartbeatConfig;
var MediaHeartbeatDelegate = ADB.va.MediaHeartbeatDelegate;

//Media Heartbeat initialization

var mediaConfig = new MediaHeartbeatConfig();
mediaConfig.trackingServer = Configuration.HEARTBEAT.TRACKING_SERVER;
mediaConfig.playerName = Configuration.PLAYER.NAME;
mediaConfig.channel = Configuration.HEARTBEAT.CHANNEL;
mediaConfig.debugLogging = Configuration.HEARTBEAT.DEBUG;

mediaConfig.appVersion = Configuration.HEARTBEAT.SDK;
mediaConfig.ssl = Configuration.HEARTBEAT.SDK;
mediaConfig.ovp = Configuration.HEARTBEAT.OVP;

// Implement the MediaHeartbeatDelegate protocol.
var mediaDelegate = new MediaHeartbeatDelegate();

// Initialize

var appMeasurement = new AppMeasurement();
appMeasurement.visitor = visitor;
appMeasurement.trackingServer = Configuration.APP_MEASUREMENT.TRACKING_SERVER;
appMeasurement.account = Configuration.APP_MEASUREMENT.RSID;
appMeasurement.pageName = Configuration.APP_MEASUREMENT.PAGE_NAME;
appMeasurement.charSet = Configuration.APP_MEASUREMENT.CHAR_SET;
var contextData = {
        pageURL: document.URL,
        isUserLoggedIn: “false”,
        tvStation: “Sample TV station”,
        programmer: “Khurshid Alam”
        };
var mediaInfo;
var videostarted = false;
var metaDataLoaded = false;

STEP 7: Add Actions – YouTube IFrame API code

1. Select “Core” from Extension drop down.
2. Select “Custom Code” from Action Type drop down.
3. Add Action name in Name text box.
4. Select “Javascript” under Language.
5. Check “Execute globally”.
6. Click “Open Editor”.
7. Add the following code and click save.

// 2. This code loads the IFrame Player API code asynchronously.

var tag = document.createElement(‘script’);
tag.src = “https://www.youtube.com/iframe_api”;
var firstScriptTag = document.getElementsByTagName(‘script’)0;
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an iframe (and YouTube player)
//    after the API code downloads.

var player;
function onYouTubeIframeAPIReady() {
       console.log(“onYouTubeIframeAPIReady called…”);
       player = new YT.Player(‘player’, {
              height: ‘390’,
              width: ‘640’,
              videoId: ‘xWYHvIjvMnY’,
              events: {
                     ‘onReady’: onPlayerReady,
                     ‘onStateChange’: onPlayerStateChange,
                     ‘onPlaybackQualityChange’: onPlayerPlaybackQualityChange,
                     ‘onPlaybackRateChange’: onPlayerPlaybackRateChange,
                     ‘onError’: onPlayerError
              }
       });
}

// 4. The API will call this function when the video player is ready.

function onPlayerReady(event) {
       metaDataLoaded = true;
       player.playVideo();
}

// 5. The API calls this function when the player’s state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.

function onPlayerStateChange(event) {
       switch (event.data){
              case YT.PlayerState.PLAYING:  console.log(“***HB Playing”);
                     if(metaDataLoaded){
                            if (Math.floor(event.target.getCurrentTime()) == 0) {
                                   console.log(“***HB Start”);
                                   MediaHeartbeat = ADB.va.MediaHeartbeat;
                                   mediaInfo = MediaHeartbeat.createMediaObject(
                                          event.target.getVideoData().title,
                                          event.target.getVideoData().video_id,
                                          Math.floor(event.target.getDuration()),
                                         MediaHeartbeat.StreamType.VOD
                                   );
                                   MediaHeartbeat = new MediaHeartbeat(mediaDelegate, mediaConfig, appMeasurement);
                                   mediaDelegate.getCurrentPlaybackTime = function() {
                                   return Math.floor(event.target.getCurrentTime());
                           };
                                   MediaHeartbeat.trackSessionStart(mediaInfo, contextData);
                                   MediaHeartbeat.trackPlay();
                                   videostarted = true;
                     } else {
                           console.log(“***HB Play”);
                           MediaHeartbeat.trackPlay();
                     }}
                     break;
              case YT.PlayerState.PAUSED:
                     console.log(“***HB Pause”);
                     MediaHeartbeat.trackPause();
                     break;
              case YT.PlayerState.ENDED:
                     console.log(“***HB Ended”);
                     MediaHeartbeat.trackComplete();
                     MediaHeartbeat.trackSessionEnd();
                     break;
              case -1:
                     console.log(“***HB Unloaded”);
                     MediaHeartbeat.trackComplete();
                     MediaHeartbeat.trackSessionEnd();
                     break;
       }

}

function onPlayerPlaybackQualityChange(event) {
       console.log("onPlayerPlaybackQualityChange: event.data: "+ event.data);
}

function onPlayerPlaybackRateChange(event) {
       console.log("onPlayerPlaybackRateChange: event.data: "+ event.data);
}

function onPlayerError(event) {
       console.log("onPlayerError: event.data: "+ event.data);
}

STEP 8: Add HTML

Add the following code in your HTML code.

!-- 1. The iframe (and video player) will replace this div tag. –
div id=“player”/divbr

STEP 8: Publish

Publish your property and test.

Business.Adobe.com resources