Einfaches Aktionstracking von YouTube Videos in 3 Schritten

Hier erfahren Sie, wie Sie mit Webtrekk einfaches Aktionstracking aufsetzen um zu erfassen, ob YouTube Videos auf Ihrer Seite (NICHT auf der YouTube.com selbst!) eine Interaktion erfahren haben.

Eine Anleitung, wie Sie statt einfacher Aktionsrequests das Webtrekk Mediatracking für Ihre YouTube Videos nutzen können, finden Sie hier: https://support.webtrekk.com/hc/de/articles/360000115999

Zunächst einmal müssen Sie wissen, dass das normale Einbetten eines YouTube Videos nicht zum Tracking geeignet ist. Stattdessen muss das Video mit der YouTube API auf Ihrer Seite eingefügt werden – nur dann stehen Webtrekk die Events zur Verfügung, in die wir uns einklinken um unsere Aktionsrequests zu versenden wenn ein Besucher ein YouTube Video auf Ihrer Seite angeklickt hat.

Unser Ziel ist es also, dass einmalig ein Aktionsrequest versendet wird, wenn eine Interaktion mit einem YouTube Player stattfindet, und als ct Parameter (also Aktionsname) soll dabei der Name des Videos übermittelt werden.

Die komplette Lösung hierzu, die wir jetzt hier in drei Schritten erarbeiten, finden Sie auf dieser Seite:

http://167.114.255.50/examples/youtube-event.html 

1. Platzieren der Platzhalter

Wir müssen der YouTube API mitteilen wo die Videos ausgespielt werden sollen. Dazu erstellen wir div Container an genau jenen Stellen, an denen wir die Videos normalerweise per iframe einbetten würden. Den div Containern geben wir außerdem eindeutige id Attibute, die nur aus einer Buchstaben- und Zahlenkombination ohne Sonderzeichen bestehen.

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

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

2. Auflistung der Videos

Als nächstes erstellen wir im JavaScript Array aus Objekten, die jeweils 4 Keys haben:

• id : die id der div Container aus Schritt 1
• height: die Höhe mit der das Video erscheinen soll in Pixel
• width: die Breite in Pixel
• videoId: die YouTube VideoId – diese steht in der Youtube URL hinter „watch?v=“

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

3. Einbindung der YouTube API mit Trackrequest

Jetzt müssen wir nur noch diesen Code in unsere Seite einbauen:

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;
     }
};

Besonderes Augenmerk sollten wir einmal auf die Deklaration von firstPlayEvent legen.

Hier steht der Trackrequest drin, und als linkId, also Aktionsname / ct Parameter wird der Videotitel aus dem Event genommen. In diesen Event stehen noch viele weitere Informationen zur Verfügung, und es spricht nichts dagegen an dieser Stelle noch zusätzliche ck Parameter zu übergeben.

Weitere Informationen zur YouTube API finden Sie hier:

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

Sie können sich auch einfach das event Argument per console.log ausgeben lassen um sich eine Übersicht aller Informationen zu verschaffen.

Ein weiterer Hinweis: im Beispiel wird sendinfo aus dem wt Objekt gefeuert – wenn Sie Tag Integration nutzen können Sie stattdessen auch wts.push nutzen:

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

Bei einer 3er oder 4er Implementierung ist wt der Standardname für das Webtrekkobjekt, kann aber von Ihnen auch anders benannt worden sein.

Wenn Sie sich sicher sind dass zum Zeitpunkt der Interaktion eine Pixelinstanz besteht und Sie nicht wissen, wie diese heißt (oder sie nur temporär in einer IIFE vorhanden war) dann können Sie auch webtrekkUnloadObject[0].sendinfo() nutzen – das ist zwar keine ideale Lösung, sollte an dieser Stelle aber funktionieren sofern eine Pixelinstanz besteht.