Here you learn how you can use Mapp Intelligence 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 you just need to copy the implementation from these pages, depending on which pixel you use:
V4, V5: https://zdext.webtrekk.com/examples/youtube-tracking.html
Smartpixel: https://zdext.webtrekk.com/examples/smartpixel-youtube-tracking.html