Simple event-tracking of YouTube Videos in 3 steps

Here you learn how you can use Webtrekk eventtracking to track an interaction with an embedded YouTube player on your page (not on youtube.com!).

In case you want to use our mediatracking for more detailed data, feel free to have a look at this guide on how to accomplish this:

https://support.webtrekk.com/hc/en-us/articles/360000115999

First you need to know that the default way of embedding videos doesn’t work when you want to track an interaction with the player.

Instead you have to use the YouTube embed API to implement the videos on your page – only then you have access to certain events, which are used to track the user behaviour.

Our goal with the simple event tracking implementation is, that there is one eventrequest whenever a user starts a video for the first time in the pageview.

1. Placing the dummy div

We need to tell the YouTube API where we want to place the videos. Therefore, we create empty dummy div containers at the spots where we would normally embed the videos.

We add id attributes containing of letters and numbers only to the div container:

<h2>First Video:</h2>
    <div id="player"></div>

<h2>Second Video:</h2>
    <div id="player1"></div>

2. Listing the videos

Now we create an array called playerInfoList, containing of objects with video data. The properties of the objects are:

• id: the value of the id attribute from step 1
• height: height of the video player
• width: width of the videoplayer
• videoId: the YouTube video Id – can be found in the original URL right after "watch?v="

var playerInfoList = [{
id: 'player',
height: '390',
width: '640',
videoId: 'EzjliP1JjCo'
}, {
id: 'player1',
height: '390',
width: '640',
videoId: 'GSwdzr70bUk'
}];

3. Implementing the YouTube API and the trackrequest

Now we need to add this code to the page:

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
    if (!playerInfoList)
    return;
    for (var i = 0; i < playerInfoList.length; i++) {
        var curplayer = createPlayer(playerInfoList[i]);
        }
    }function createPlayer(playerInfo) {
window["a" + playerInfo.id] = false;
return new YT.Player(playerInfo.id, {
    height: playerInfo.height,
    width: playerInfo.width,
    videoId: playerInfo.videoId,
    events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
        }});
    }// The API will call this function when the video player is ready.
function onPlayerReady(event) {
// console.log("onPlayerReady: ", event)
    }
// The API calls this function when the player's state changes.
    function onPlayerStateChange(event) {
        // sends the action request after first player interaction (just once):
        firstPlayEvent(event);
        }
function firstPlayEvent(eventData) {
    if (!window["a" + eventData.target.a.id]) {
       wt.sendinfo({
       linkId: eventData.target.j.videoData.title
         })
       window["a" + eventData.target.a.id] = true;
     }
};

Please have a look at the firstPlayEvent function declaration.

Inside you’ll find the trackrequest, and as the linkId (which will be the ct parameter in the trackrequest and the eventname in the frontend) we use the name of the video – dynamically taken from the event of the YouTube embed API.

Of course you can transmit more parameters at this point, like customClickParameter etc.

More information about the YouTube embed API you can find here:

https://developers.google.com/youtube/iframe_api_reference?hl=de

You can also just console.log(eventData) inside the function block, so you can examine the information that is available for you during the event.

Another important hint: in the example we use sendinfo() to fire the eventrequest.

When you use Tag Integration, you should use the wts.push method like this:

wts.push(["send","click",{linkId: eventData.target.j.videoData.title}])

In V3 and V4 the name of the Webtrekk object (wt in this example) might be different in your implementation.