Track YouTube video playback with Adobe Launch | BCS

Track YouTube video playback with Adobe Launch

Adobe Launch Haran Huang 1 years ago (2019-12-09) 3559 Views 18 Comments

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:

Track YouTube video playback with Adobe Launch

Note that the function of the last sentence in the code is to issue events, which need to be tracked by Direct Call.

Track YouTube video playback with Adobe Launch

 

Configuration Rules

Create a Rules and name it video_pause:

Track YouTube video playback with Adobe Launch

 

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:

Track YouTube video playback with Adobe Launch

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.

Track YouTube video playback with Adobe Launch

Create the second ACTIONS. Note that we are using s.t () here, and the playback form is regarded as a Page View.

Track YouTube video playback with Adobe Launch

 

Save!!

Test and Publish

Publish a library, then open https://www.ichdata.com/youtube-test to test.

Track YouTube video playback with Adobe Launch

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:

Track YouTube video playback with Adobe Launch

Click Install.

Let’s open this Extensions and see if there is anything that needs to be configured:

Track YouTube video playback with Adobe Launch

No configuration necessary. So the main configuration is on Rules.

Create a Rule

Create a Rule named Youtube

Track YouTube video playback with Adobe Launch

 

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:

Track YouTube video playback with Adobe Launch

 

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.

Track YouTube video playback with Adobe Launch

Create the second ACTIONS. Note that we are using s.t () here, and the playback form is regarded as a Page View.

Track YouTube video playback with Adobe Launch

 

Save!!

Test and Publish

Publish a library, then open https://www.ichdata.com/youtube-test to test.

Track YouTube video playback with Adobe Launch

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:

Track YouTube video playback with Adobe Launch

 

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.

Track YouTube video playback with Adobe Launch

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:

Track YouTube video playback with Adobe Launch

 

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:

Track YouTube video playback with Adobe Launch

ACTIONS

Extensions choose YouTube Playback;

Action Type select Enable video playback tracking;

Track YouTube video playback with Adobe Launch

Select any player in Enable video tracking for.

If you want to choose specific videos, use specific players. Then save.

Final effect:

Track YouTube video playback with Adobe Launch

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:

Track YouTube video playback with Adobe Launch

 

EVENTS

Select Event, where Extensions select YouTube Playback, and Event Type select Video Paused:

Track YouTube video playback with Adobe Launch

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:

Track YouTube video playback with Adobe Launch

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:

Track YouTube video playback with Adobe Launch

 

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.

Track YouTube video playback with Adobe Launch

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:

Track YouTube video playback with Adobe Launch

 

Create  second ACTIONS, do the following settings:

Track YouTube video playback with Adobe Launch

Then Save.

Final effect:

Track YouTube video playback with Adobe Launch

 

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:

Track YouTube video playback with Adobe Launch

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


If you don't understand, You can leave a comment below or email me (haran.huang@ichdata.com).
Like (6)
Post my comment
Cancel comment
Expression Texture Bold Strikethrough Center Italic Sign in

Hi, you need to fill in your nickname and email!

  • Nickname (required)
  • Email (required)
  • Website
(18) friends in the comments
  1. the rule is not triggering and it is not working in any way
    Jayakumar2020-06-12 14:00 Reply
    • Haran Huang
      Sorry, because my colleague modified some configuration, it has been adjusted, BCS
      BCS2020-06-15 16:55 Reply
  2. Its not working
    nil2020-06-09 15:31 Reply
    • Haran Huang
      I have added it, use even40, you can try it
      BCS2020-06-11 16:27 Reply
      • Didn't understand
        nil2020-06-11 16:38 Reply
  3. How can we track the video name? I don't see the option from the extension. Please let me know.
    Jayakumar2020-05-26 21:43 Reply
  4. Tried this approach, it didn't work. :???:
    Winston2020-03-13 12:38 Reply
    • Haran Huang
      Any hint or error message?
      BCS2020-03-13 15:49 Reply
      • In staging in debug mode, we don't see the extension (youtube embed) loading or the rule created (video start) firing.
        Winston2020-03-16 10:16 Reply
        • Haran Huang
          The CDN may not be updated so quickly after Publish. You can open the embed code in your browser, refresh it, and then test it.
          BCS2020-03-16 20:42 Reply
          • It is not working for me and even the rule is not firing on https://www.bbccss.com/youtube-test
            Shamshul2020-05-30 00:08
          • Haran Huang
            The demo tracking on this page has been removed by me.
            BCS2020-05-30 11:29
          • It is not working at my end
            Shamshul2020-05-31 00:18
          • Haran Huang
            The setting was removed .
            BCS2020-05-31 13:17
          • Haran Huang
            I have added it, use even40, you can try it
            BCS2020-06-11 16:28
    • Hi, Were you able to find how to track video name or id Regards Karandeep Singh
      karan2020-06-12 21:02 Reply
      • Settled on using datalayer and custom link tracking to track video interactions.
        Winston2020-06-29 09:13 Reply