Implementing Video Analytics in Adobe Launch
This article provides steps to implement YouTube video tracking in Adobe Launch using Media Heartbeat SDK.
Description description
Environment
Analytics
Issue/Symptoms
Implementing video analytics in Adobe Launch
Pre-requisites
- You have an active Adobe Launch implementation.
- The report suite is enabled for Media Collection.
- The report suite is mapped to correct Analytics login company in Adobe Experience Cloud.
- You have publishing rights in Adobe Launch.
- You are familiar with Adobe Launch UI and how it works.
Resolution 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. For example, You 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. You have used some hard-coded values. However, you may use data elements to populate these variables.
- Select Core from Extension drop down.
- Select Custom Code from Action Type drop down.
- Add Action name in Name text box.
- Select Javascript under Language.
- Check Execute globally.
- Click “Open Editor”.
- 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'
}
};
})();
(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 Analytic
Once, you have downloaded Visitor ID Service code, click on + button under actions to create a new action item, then
- Select Core from Extension drop down.
- Select Custom Code from Action Type drop down.
- Add Action name in Name text box.
- Select Javascript under Language.
- Check Execute globally.
- Click “Open Editor”.
- 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
- Select Core from Extension drop down.
- Select Custom Code from Action Type drop down.
- Add Action name in Name text box.
- Select Javascript under Language.
- Check Execute globally.
- Click "Open Editor".
- Add Visitor ID Service code.
- At the top, add the following code and click save.
// Initialize AppMeasurement
var s_account="report suite id"
var s=s_gi(s_account)
/<b></b><b></b> VISITOR ID SERVICE CONFIG - REQUIRES VisitorAPI.js <b></b><b></b>/
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/blob/master/sdks/js/2.x/libs/MediaSDK.min.js.
Once, you have downloaded the Heartbeat code, click on + button under actions to create a new action item, then
- Select Core from Extension drop down.
- Select Custom Code from Action Type drop down.
- Add Action name in Name text box.
- Select Javascript under Language.
- Check “Execute globally.
- Click "Open Editor".
- Add Visitor ID Service code.
- 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
- Select Core from Extension drop down.
- Select Custom Code from Action Type drop down.
- Add Action name in Name text box.
- Select Javascript under Language.
- Check Execute globally.
- Click "Open Editor".
- Add the following code and click save.
- 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);
- 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
}
});
}
- The API will call this function when the video player is ready.
function onPlayerReady(event) {
metaDataLoaded = true;
player.playVideo();
- 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 HTMLM
Add the following code in your HTML code.
!-- 1. The iframe (and video player) will replace this div tag. --
div id="player"/divbr
STEP 9: Publish
Publish your property and test.