Track YouTube Video Playback with Adobe Launch

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.