Tracking Embedded YouTube Videos with Adobe Analytics

Do you have embedded youtube videos using the iFrame player API and you wish to track this within Adobe Analytics using the media module? The solution I will provide is based on JavaScript for tracking video information.

 

What You Will Need:

1) Variables to be allocated for video tracking purposes:

Variables Analytics Variable Source
Prop70 – Video Name – YouTube API
eVar70 – Video Name – YouTube API
eVar71 – Video Segment Name – Media Module
eVar72 – Video Content Type – Media Module
Event100 – Video Start – Media Module
Event101 – Video 25% – Media Module
Event102 – Video 50% – Media Module
Event103 – Video 75% – Media Module
Event104 – Video Complete – Media Module
Event105 – Video Time Viewed – Media Module
Event106 – Video Segment View – Media Module

2) Processing Rules

To capture the video player name in an eVar, create a processing rule:
• Log into Reports & Analytics, navigate to Admin > Report Suites
• Select the report suite required, navigate to Edit Settings > General > Processing Rules
• Add Rule with the following logic:
o If a.media.playerName is set, then overwrite the value of eVar70 with a.media.playerName.

3) Classification Rule Builder of Video Name
To parse the video name value into its components within the eVar or prop:
• a.media.name returns a delimited value structure: [Video Player Name]|[Video ID]|[Video Name]
• The Video Name eVar/prop can be classified with: Video Player Name, Video ID, and Video Name.
• Using the Classification Rule Builder tool, create a regular expression-based rule set, such as ^(.+)\|(.+)\|(.+)$ to parse the delimited values into the respective reports.

How To Implement:

1) Place following code in HTML of Web page:

• Add id="player" to iframe tag
• Append &rel=0 to suppress related video end slate to YouTube embed URL
• Append &enablejsapi=1 to YouTube embed URL

2) Update your s_code or appMeasurement code by either doing one of the following:
– Place the player mapping below the s declaration (var s=s_gi(s_account)) within the analytics library.
– Place the player mapping code below right after

/* YouTube Player Mapping (https://developers.google.com/youtube/iframe_api_reference) */
window.onYouTubeIframeAPIReady = function() {
var player = new YT.Player('player', {
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
var videoPlayer = "YouTube Player";
var videoTitle = event.target.getVideoData().title;
var videoId = event.target.getVideoData().video_id;
var mediaName = videoPlayer+'|'+videoId+'|'+videoTitle;
var mediaLength = Math.floor(event.target.getDuration());
var mediaOffset = Math.floor(event.target.getCurrentTime());
if (mediaOffset == 0) {
//console.log('mediaName on Start: ' + mediaName);
//console.log('mediaLength on Start: ' + Math.floor(event.target.getDuration()));
//console.log('mediaOffset on Start: ' + Math.floor(event.target.getCurrentTime()));
mediaOffset = Math.floor(event.target.getCurrentTime());
s.Media.open(mediaName,mediaLength,videoPlayer);
s.Media.play(mediaName,mediaOffset);
} else {
//console.log('mediaName on Play: ' + mediaName);
//console.log('mediaOffset on Play: ' + Math.floor(event.target.getCurrentTime()));
mediaOffset = Math.floor(event.target.getCurrentTime());
s.Media.play(mediaName,mediaOffset);
};
}
if (event.data == YT.PlayerState.PAUSED) {
var videoPlayer = "YouTube Player";
var videoTitle = event.target.getVideoData().title;
var videoId = event.target.getVideoData().video_id;
var mediaName = videoPlayer+'|'+videoId+'|'+videoTitle;
//console.log('mediaName on Pause: ' + mediaName);
//console.log('mediaOffset on Pause: ' + Math.floor(event.target.getCurrentTime()));
mediaOffset = Math.floor(event.target.getCurrentTime());
s.Media.stop(mediaName,mediaOffset);
}
if (event.data == YT.PlayerState.BUFFERING) {
var videoPlayer = "YouTube Player";
var videoTitle = event.target.getVideoData().title;
var videoId = event.target.getVideoData().video_id;
var mediaName = videoPlayer+'|'+videoId+'|'+videoTitle;
//console.log('mediaName on Buffering: ' + mediaName);
//console.log('mediaOffset on Buffering: ' + Math.floor(event.target.getCurrentTime()));
mediaOffset = Math.floor(event.target.getCurrentTime());
s.Media.stop(mediaName,mediaOffset);
}
if (event.data == YT.PlayerState.ENDED) {
var videoPlayer = "YouTube Player";
var videoTitle = event.target.getVideoData().title;
var videoId = event.target.getVideoData().video_id;
var mediaName = videoPlayer+'|'+videoId+'|'+videoTitle;
//console.log('mediaName on Ended: ' + mediaName);
//console.log('mediaOffset on Ended: ' + 0);
mediaOffset = 0;
s.Media.stop(mediaName,mediaOffset);
s.Media.close(mediaName);
}
}

3) Place the iFrame API code directly after the YouTube code above

/* Loads 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);

4) Place the Media module configuration code below the iFrame API logic

/* Media Module Config */
s.enableVideoTracking=true
if(s.enableVideoTracking){
s.loadModule('Media');
s.Media.autoTrack=false;
s.Media.playerName='YouTube';
s.Media.segmentByMilestones=true;
s.Media.trackMilestones='25,50,75';
s.Media.trackUsingContextData=true;
s.Media.contextDataMapping = {
'a.contentType':'eVar13',
'a.media.name':'eVar11,prop11', //Returns following delimited value structure: "YouTube|[Video ID]|[Video Title]"
'a.media.segment':'eVar12',
'a.media.view':'event11',
'a.media.complete':'event15',
'a.media.segmentView':'event17',
'a.media.timePlayed':'event16',
'a.media.milestones':{
25:'event12',
50:'event13',
75:'event14'
}
}
s.Media.trackVars='events,eVar11,eVar12,eVar13,prop11';
s.Media.trackEvents='event11,event12,event13,event14,event15,event16,event17';
}

This will declare the variables to use for media tracking. Please update to reflect your SDR’s variables.

5) Place the media module library before the activity map code (module section). The media module code can be grabbed from the code manager. Please note: This solution doesn’t leverage the video heartbeat measurement that Adobe released so you will need to use the older module vs. the newer one.

That’s it. Once you have this in place you can go about testing to make sure that the data is being recorded by Adobe. From a QA perspective, you will need to:

a) Go to a video page and start the video
b) Use a debugger or packet sniffer to see if eVar11/prop11 are capturing the YouTube|Video ID|Video Title info (as that is what the example above maps this info to)
c) Make sure s.events is capturing event11 for video start (as thats listed in a.media.view example above)

Posted in Adobe Analytics, Web Analytics