Updated: October 23, 2024
In this section, we will talk about how to track Youtube video playback through Adobe Launch.
Test page: https://www.ichdata.com/youtube-test, I have put a Youtube video on this page, now I need to do some tracking on it.
For example, pause playback tracking.
If you use Google Tag Manager, you can take a look at Google Tag Manager Practical Guide：Youtube Video Tracking.
There are many ways to track, here are three methods:
Method 1: Customize The Code
This method is to monitor the YouTube API by adding custom JavaScript on the page, so as to realize the tracking of YouTube video playback.
Deployment Code
Deploy the following code to the CONFIGURE TRACKER USING CUSTOM CODE in Adobe Analytics Extensions:
/*Video Code : Add to CONFIGURE TRACKER USING CUSTOM CODE.*/
var n=0;
jQuery('iframe').each(function() {
var src = jQuery(this).attr('src');
if(src){
if (src.indexOf('youtube.com') > -1) {
if (src.indexOf('?') > -1) {
if (src.indexOf('enablejsapi') == -1) {
src = src + '&enablejsapi=1';
}
} else {
src = src + '?enablejsapi=1';
}
jQuery(this).attr('src',src);
jQuery(this).attr('id','player' +n);
n++
}
}
});
try {var addYoutubeEventListener = (function() {
var callbacks = [];
var iframeId = 0;
return function (iframe, callback) {
// init message listener that will receive messages from youtube iframes
if(iframeId === 0) {
window.addEventListener("message", function (e) {
if(e.origin !== "https://www.youtube.com" || e.data === undefined) return;
try {
var data = JSON.parse(e.data);
if(data.event !== 'onStateChange') return;
var callback = callbacks[data.id];
callback(data);
}
catch(e) {}
});
}
// store callback
iframeId++;
callbacks[iframeId] = callback;
var currentFrameId = iframeId;
// sendMessage to frame to start receiving messages
iframe.addEventListener("load", function () {
var message = JSON.stringify({
event: 'listening',
id: currentFrameId,
channel: 'channelnameofyourchoice'
});
iframe.contentWindow.postMessage(message, 'https://www.youtube.com');
message = JSON.stringify({
event: "command",
func: "addEventListener",
args: ["onStateChange"],
id: currentFrameId,
channel: "channelnameofyourchoice"
});
iframe.contentWindow.postMessage(message, 'https://www.youtube.com');
});
}
})();
addYoutubeEventListener(document.getElementById("player0"), function(e) {
console.log(e)
switch(e.info) {
case 1:
_satellite.track("video_start");
break;
case 0:
_satellite.track("video_end");
break;
case 2:
_satellite.track("video_pause");
}
});}
catch(err) {console.log("Video Tracking Not Present");}
At this place:
Note that the function of the last sentence in the code is to issue events, which need to be tracked by Direct Call.
Configuration Rules
Create a Rules and name it video_pause:
EVENTS
Click EVENTS, select Direct Call for Event Type, and fill video_pause for Identifier. What can be filled here depends on what is in _satellite.track in the code. The specific configuration is as follows:
ACTIONS
Create the first ACTIONS, here is to set what this data is sent through, such as eVars, Props or Event. Here we use Event and use Event12.
Create the second ACTIONS. Note that we are using s.t () here, and the playback form is regarded as a Page View.
Save！！
Test and Publish
Publish a library, then open https://www.ichdata.com/youtube-test to test.
Look, the paused Event12 has been recorded.
Method 2: YouTube Player Embed
The second method is to use YouTube Player Embed Extensions. Which develop by 33sticks.
Install YouTube Player Embed Extensions
Click Extensions> Catalog in Adobe Launch, then search Youtube:
Click Install.
Let’s open this Extensions and see if there is anything that needs to be configured:
No configuration necessary. So the main configuration is on Rules.
Create a Rule
Create a Rule named Youtube：
EVENTS
Create an EVENTS, and select YouTube Player Embed for Extensions.
There are four types of Event Type: Time Played, Video End, Video Pause, and Video Play. Select Video Play here. We choose Video Pause here.
The any player on the right means tracking all videos, and specific player means tracking the specified video. The specific player is located by the paleer ID, which is the string of characters after the youtube playback address. For example, the youtube playback address is: https://www .youtube.com/embed/3fZmtnp2T5U, then the player ID is 3fZmtnp2T5U.
We choose any player here. The specific configuration is as follows:
ACTIONS
Create the first ACTIONS, here is to set what this data is sent through, such as eVars, Props or Event. Here we use Event and use Event4.
Create the second ACTIONS. Note that we are using s.t () here, and the playback form is regarded as a Page View.
Save！！
Test and Publish
Publish a library, then open https://www.ichdata.com/youtube-test to test.
Look, the paused Event4 has been recorded.
In addition
After creating ACTIONS, Extensions can choose YouTube Player Embed. Here you can control the video that is played: if it is a playlist, here you can control which video starts to play; or control where to start playing; and some control buttons for playback. Many settings:
If you use this, you need to start it to the first of ACTIONS, and then execute it before you can send data to Adobe Analytics.
Method 3: YouTube Playback
This method is to track through YouTube Playback Extensions, this extension can track more information than YouTube Player Embed.
I am currently using v1.2.0 version. Let’s take a look at how to do the settings:
Install YouTube Playback Extensions
Search for YouTube Playback in the catalog, then install it without any configuration.
Configure the first rules
Create the first Rules, the function of the first Rules is to enable the Youtube video monitoring function. Named Start Youtube Tracking:
EVENT
Select Window Loaded for Event type and set Order to 80，enable video playback tracking with your YouTube players. The specific configuration is as follows:
ACTIONS
Extensions choose YouTube Playback;
Action Type select Enable video playback tracking;
Select any player in Enable video tracking for.
If you want to choose specific videos, use specific players. Then save.
Final effect:
Configure The Second Rules
Create a second rule, the role of the second rule is to track the video playback event. Create a Rule, named Youtube Pause:
EVENTS
Select Event, where Extensions select YouTube Playback, and Event Type select Video Paused:
On the right is more information you can get, such as event.status, You can directly use it as a data element, such as directly using %event.status% to get this, and set it to Event or eVar.
As mentioned earlier, YouTube Playback Extensions tracks more information than YouTube Player Embed Extensions.
The first is Event Type. There are only 4 YouTube Player Embed Extensions, while YouTube Playback Extensions have 11 types:
The second is that YouTube Playback Extensions will also transmit other information when the event is triggered. These information are on the right side and can be used directly:
ACTIONS
Create the first ACTIONS, Select Adobe Analytics for Extensions and set Variable for Action Type.
Set Event on the right, event11 is used here (you need to go to Adobe Analytics to add it. The event value is set to Pause11.
If the information setting on the right side of the Event Type is to be passed to Adobe Analytics, we can set it like this. Assuming that we want to set event.youtube.videoUrl now, we can know which video is playing. We can set %event.youtube.videoUrl% like this:
Create second ACTIONS, do the following settings:
Then Save.
Final effect:
Test and release
Publish to the test environment, then open the test page, browser developer tools, open Launch and DTM Switch, simulate user behavior, and then watch the console output:
You can see that event11 is recorded.
Summary
- Method 1: Customize The Code, you need to understand the code to make custom adjustments to the code, which is more demanding for general users.
- Method 2: YouTube Player Embed, easy to set up, but there are fewer types and information that can be tracked. Only 4 types can be tracked, Time Played, Video End, Video Pause, and Video Play.
- Method 3: YouTube Playback: Simple to set up, and there are many types and information that can be tracked. Recommended Use.
Referral
- https://annealytics.com/2020/05/17/tracking-youtube-videos-in-iframes-with-adobe-launch-a-simpler-approach/
- https://exchange.adobe.com/experiencecloud.details.104160.youtube-playback-tracking.html
- https://yuhuisdatascienceblog.blogspot.com/2020/07/adobe-launch-extension-youtube-playback.html
