Tutorial 3: enabling a dynamically loaded YouTube player

You can enable playback tracking for a YouTube video that is dynamically loaded, for example, when a user clicks a button to show the video. This provides you with the ability to track the playback of videos that are shown after the web page has been loaded.

Example

In this example, the web developers already have a script to show the YouTube video when a user clicks a button.

var youtubeButton = document.getElementById('youtube-button');
youtubeButton.addEventListener('click', function (event) {
  // the user has clicked the button, so show the video
  var youtubeVideo = document.createElement('iframe');
  youtubeVideo.src = "https://www.youtube.com/embed/..."; // the YouTube embed URL
  var youtubeContainer = document.querySelector('div#youtube-container');
  youtubeContainer.appendChild(youtubeVideo);
});

Implementation

Append a Direct Call _satellite.track() after the code for adding the video, like so:

var youtubeButton = document.getElementById('youtube-button');
youtubeButton.addEventListener('click', function (event) {
  // the user has clicked the button, so show the video
  var youtubeVideo = document.createElement('iframe');
  youtubeVideo.src = "https://www.youtube.com/embed/..."; // the YouTube embed URL
  var youtubeContainer = document.querySelector('div#youtube-container');
  youtubeContainer.appendChild(youtubeVideo);

  /**
   * Add a Direct Call _satellite.track().
   * This will enable the YouTube Playback extension to enable video tracking on the added video.
   */
  _satellite.track('enable YouTube video tracking'); // take note of the Direct Call identifier being used here
});

Important!

The Direct Call _satellite.track() must be added after the code that shows the YouTube video. If _satellite.track() is added before this code, then the YouTube video will not be tracked, because at the moment when the Direct Call is triggered, there is still no video to enable tracking on.

Setup

Follow the steps described in Tutorial 1: basic implementation to setup the Rules and Data Elements.

However, you will need to change the "Enable video tracking" Rule to be triggered with the "Direct Call" Event instead of "DOM Ready".

Rules

Enable video tracking

In this Rule, use this Event:

• Extension: Core
• Event Type: Direct Call
• Event Configuration settings:
  • Identifier: enable YouTube video tracking

Take note that the Direct Call's identifier, enable YouTube video tracking, is the same one that has been used in our above implementation's _satellite.track() call.

Continue with the rest of Tutorial 1 to finish setting up the video playback tracking.

How it works

When the user clicks the button to show your YouTube video, then the "Enable YouTube video tracking" Rule runs because the _satellite.track() in the implementation (with the enable YouTube video tracking identifier) caused this Rule's "Direct Call" Event to be triggered. So the Rule runs and goes through all of the videos in that page and enable tracking for each of them. Since the YouTube video would be shown by now, so that newly added video gets enabled for tracking.