Tutorial 1: basic implementation

This tutorial guides you through the implementation of the YouTube Playback extension in your AEP Tags property. It can be used with most YouTube videos in your website.

• The YouTube videos are embedded in the web page's HTML code, so that the browser loads them together with the web page.
• The YouTube videos are embedded using YouTube's default embedding code with an <iframe>.
• The YouTube videos' playback behaviour are not controlled by any script that was developed for your website.

At the end of this tutorial, you will have 2 Rules and 5 Data Elements to track the playback behaviour of your YouTube videos.

Setup

Before continuing, ensure that you have installed the YouTube Playback extension in your Tags property.

Don't worry about the version number. You should use the latest version available in AEP Tags. All of the steps below can still be followed for a successful implementation.

Data Elements

YouTube player state

This Data Element returns the player's state of the YouTube video that triggered the playback event.

1. Create a Data Element with the name: "YouTube player state".
   • Extension: YouTube Playback
   • Data Element Type: Player State
   • Enable Default Value: not selected
   • Force lowercase value: not selected
   • Clean text: selected
   • Storage Duration: None
2. Save the Data Element.

YouTube video current time

This Data Element returns the current playing time (in seconds) of the YouTube video that triggered the playback event.

1. Create a Data Element with the name: "YouTube video current time".
   • Extension: YouTube Playback
   • Data Element Type: Video Current Time
   • Enable Default Value: not selected
   • Force lowercase value: not selected
   • Clean text: not selected
   • Storage Duration: None
2. Save the Data Element.

YouTube video duration

This Data Element returns the duration (in seconds) of the YouTube video that triggered the playback event.

1. Create a Data Element with the name: "YouTube video duration".
   • Extension: YouTube Playback
   • Data Element Type: Video Duration
   • Enable Default Value: not selected
   • Force lowercase value: not selected
   • Clean text: not selected
   • Storage Duration: None
2. Save the Data Element.

YouTube video milestone

This Data Element returns the milestone that has just been played of the YouTube video that triggered the playback event.

1. Create a Data Element with the name: "YouTube video milestone".
   • Extension: YouTube Playback
   • Data Element Type: Video Milestone
   • Enable Default Value: not selected
   • Force lowercase value: not selected
   • Clean text: not selected
   • Storage Duration: None
2. Save the Data Element.

YouTube video URL

This Data Element returns the URL of the YouTube video that triggered the playback event.

1. Create a Data Element with the name: "YouTube video URL".
   • Extension: YouTube Playback
   • Data Element Type: Video URL
   • Enable Default Value: not selected
   • Force lowercase value: not selected
   • Clean text: selected
   • Storage Duration: None
2. Save the Data Element.

Rules

Enable video tracking

This Rule prepares your YouTube videos' playback behaviour to be tracked by the YouTube Playback extension properly. Without this Rule, no tracking would occur at all, because the extension would not be aware of your videos.

1. Create a Rule with the name "YouTube Playback: Enable video tracking".
2. Add an Event:
   • Extension: Core
   • Event Type: DOM Ready
3. Add an Action:
   • Extension: YouTube Playback
   • Action Type: Enable video playback tracking
   • Action Configuration settings:
     • Use this extension with: any player
     • Load YouTube IFrame API script if it hasn't been loaded yet: selected
4. Save the Rule.

Track playback events

This Rule is triggered when any of the following YouTube video playback events occur:

• Video started playing.
• Video playback was paused.
• Video resumed playing after being paused.
• Video finished playing.
• Video restarted playing.
• Video playback passed any of these milestones: 25%, 50%, 75% of the video's duration.

When these events occur, the YouTube video's URL, player state, current time and duration are logged to the browser's console.

1. Create a Rule with the name "YouTube Playback: Track playback events".
2. Add the first Event:
   • Extension: YouTube Playback
   • Event Type: Video Playing
   • Event Configuration settings:
     • If the video has not been started, track it as video started: selected
     • If the video was paused previously, track it as video resumed: selected
     • If the video has ended, track it as video replayed: selected
     • Do not track this event except for the above selected options: selected
3. Add the second Event:
   • Extension: YouTube Playback
   • Event Type: Video Paused
4. Add the third Event:
   • Extension: YouTube Playback
   • Event Type: Video Ended
5. Add the fourth Event:
   • Extension: YouTube Playback
   • Event Type: Video Milestone
   • Event Configuration settings:
     • At fixed thresholds of: 25, 50, 75 per cent
6. Add an Action:
   • Extension: Core
   • Action Type: Custom Code
   • Name: Log YouTube video playback
   • Action Configuration settings:
     • Language: JavaScript
     • Execute globally: not selected
     • Edit Code:

     console.group(`YouTube video playback event detected: ${_satellite.getVar('YouTube player state', event)}`);
     console.log(`Video URL: ${_satellite.getVar('YouTube video URL', event)}`);
     console.log(`Video current time: ${_satellite.getVar('YouTube video current time', event)} seconds`);
     console.log(`Video duration: ${_satellite.getVar('YouTube video duration', event)} seconds`);
     if (_satellite.getVar('YouTube player state', event) === 'video milestone') {
         console.log(`Video milestone: ${_satellite.getVar('YouTube video milestone', event)}`);
     }
     console.groupEnd();

7. Save the Rule.

How it works

When the user opens a web page that embeds your YouTube videos, then the "Enable YouTube video tracking" Rule runs and goes through all of the videos in that page. For every video that it finds, it enables tracking on that video. This is a required step to enable the extension to detect all of the YouTube videos that are embedded in the page.

Also, that Rule loads YouTube's IFrame API script. This IFrame API script causes the YouTube videos' playback behaviours to be made available to the extension. This is also a required step, so that the extension can detect the playback events from your YouTube videos.

Then, as the user plays, pauses or finishes watching a video, that video's playback events trigger the "Track playback events" Rule to track the video's URL, current time and duration via Data Elements. That Rule also tracks the 25%, 50% and 75% milestone when the user has watched past those milestones.

This tracking works even when there are more than one YouTube videos in the same web page. For example, let's say the user does the following in a web page:

• He plays video 1. Then, video 1's playback gets tracked.
• While video 1 is still playing, he plays video 2. Then, video 2's playback gets tracked.
• Meanwhile, video 1 passes its 25% milestone. So, video 1's 25% milestone gets tracked.
• The user pauses video 1 so that he can concentrate of video 2. Video 1's pause gets tracked.
• Finally, video 2 finishes playing. Now, video 2's completion gets tracked.

All of the above video playback tracking is accomplished with the 2 Rules and 5 Data Elements only. There is no need to have separate sets of Rules and Data Elements for each of YouTube video. This greatly simplifies your implementation to track YouTube videos. This benefits your developers too, allowing them to focus on adding YouTube videos to their web pages without needing to implement additional tracking code.

Try it out!

Add the 2 Rules and 5 Data Elements to a library in AEP Tags, then build that library for your Development environment.

Then, go to your development site.

1. Open a web page that contains at least one YouTube video.
2. Also, open your browser's console.

Now, play the YouTube video(s).

• Start playing the video.
• Pause the video.
• Resume playing the video.
• Let the video pass its 25%, 50% and 75% milestones.
• Let the video finish playing.
• Restart playing the video.

With each step, you should see the logging messages from the "Track playback events" Rule's Action being logged to your browser console.

Congratulations! You have successfully implemented YouTube video playback tracking with the YouTube Playback extension.