Die Alternative zu den “Ereignissen für optimierte Analysen” in GA4
GA4 ermöglicht die automatische Messung von Interaktionen mit auf der Webseite eingebundenen Videos, sofern ein Player mit JS API-Unterstützung verwendet wird. Bei der Verwendung anderer Video Player benötigt man einen Workaround mit EventListeners. Für den Google Tag Manager hat Julius Fedorovicius eine Anleitung auf AnalyticsMania veröffentlicht. Der nachfolgende Implementierungsvorschlag dient für Google Tags, die ohne Tag Manager eingebunden wurden.
Voraussetzung und Empfehlung
Auf der Webseite ist der Google Tag bereits implementiert. Eine Anleitung dazu findet sich in der Google Analytics-Hilfe. Wir empfehlen zudem die Verwendung eines Consent Management Tools.
Video auswählen und Variablen vorbereiten
Das Video-Element auf der jeweiligen Seite wird mit einem Selektor ausgewählt. Zur späteren Verwendung können z.B. die URL und der Titel des Videos in Variablen gespeichert werden.
const video = document.querySelector(“video”);
var videoUrl = video.currentSrc;
var videoTitle = video.title;
Zur Begrenzung des Trackings auf jeweils ein Event je Seitenaufruf werden zusätzliche Statusvariablen definiert. Bei erfolgtem Tracking wird die zugehörige Variable später auf “true” gesetzt.
var started = false;
var played10 = false;
var played25 = false;
var played50 = false;
var played75 = false;
var played90 = false;
var ended = false;
Innerhalb der Event Handler wird der Status dieser Statusvariablen abgefragt. Sofern das Event noch nicht getrackt wurde, wird ein Tracking-Aufruf an den Google Tag gesendet.
Der “Video Start” Event Handler und Standard Parameter
Für den Start eines Videos mit Übergabe des Titels und der URL sieht der Event Handler wie folgt aus:
video.addEventListener(“play”, (event) => {
if (started === false) {
gtag(‘event’, ‘video_start’, {
‘video_url’: videoUrl,
‘video_title’: videoTitle,
‘video_percent’: 0
});
started = true;
}
});
Dabei können die zuvor definierten Variablen als zusätzliche Parameter angehängt werden. In GA4 werden folgende Bezeichnungen für die vordefinierten Dimensionen und Metriken verwendet:
- video_current_time
- video_duration
- video_percent
- video_provider
- video_title
- video_url
- visible (boolesch)
Der “Video Progress” Event Handler
Das Event für den Fortschritt der Videowiedergabe wird vom Browser regelmäßig während der Wiedergabe gefeuert. Durch Abfrage der aktuellen Wiedergabezeit kann auf Basis der Gesamtlänge des Videos die prozentuale Wiedergabedauer berechnet werden. Das Tracking der gewünschten Einzelschritte kann in einem Event Handler zusammengefasst werden. In diesem Beispiel werden Tracking Events jeweils bei 10, 25, 50, 75 und 90 erreichten Prozent der Gesamtdauer an den Google Tag gesendet. Die Aktualisierung der korrespondierenden Statusvariablen verhindert ein mehrfaches Tracking der Fortschritte.
video.addEventListener(“progress”, (event) => {
if (played10 === false & video.currentTime / video.duration >= 0.1) {
gtag(‘event’, ‘video_progress’, {
‘video_url’: videoUrl,
‘video_title’: videoTitle,
‘video_percent’: 10
});
played10 = true;
}
if (played25 === false & video.currentTime / video.duration >= 0.25) {
gtag(‘event’, ‘video_progress’, {
‘video_url’: videoUrl,
‘video_title’: videoTitle,
‘video_percent’: 25
});
played25 = true;
}
if (played50 === false & video.currentTime / video.duration >= 0.5) {
gtag(‘event’, ‘video_progress’, {
‘video_url’: videoUrl,
‘video_title’: videoTitle,
‘video_percent’: 50
});
played50 = true;
}
if (played75 === false & video.currentTime / video.duration >= 0.75) {
gtag(‘event’, ‘video_progress’, {
‘video_url’: videoUrl,
‘video_title’: videoTitle,
‘video_percent’: 75
});
played75 = true;
}
if (played90 === false & video.currentTime / video.duration >= 0.9) {
gtag(‘event’, ‘video_progress’, {
‘video_url’: videoUrl,
‘video_title’: videoTitle,
‘video_percent’: 90
});
played90 = true;
}
});
Der kombinierte Video Tracking Code
| const video = document.querySelector(“video”); var videoUrl = video.currentSrc; var videoTitle = video.title; var started = false; var played10 = false; var played25 = false; var played50 = false; var played75 = false; var played90 = false; var ended = false; video.addEventListener(“play”, (event) => { if (started === false) { gtag(‘event’, ‘video_start’, { ‘video_url’: videoUrl, ‘video_title’: videoTitle, ‘video_percent’: 0 }); started = true; } }); video.addEventListener(“progress”, (event) => { if (played10 === false & video.currentTime / video.duration >= 0.1) { gtag(‘event’, ‘video_progress’, { ‘video_url’: videoUrl, ‘video_title’: videoTitle, ‘video_percent’: 10 }); played10 = true; } if (played25 === false & video.currentTime / video.duration >= 0.25) { gtag(‘event’, ‘video_progress’, { ‘video_url’: videoUrl, ‘video_title’: videoTitle, ‘video_percent’: 25 }); played25 = true; } if (played50 === false & video.currentTime / video.duration >= 0.5) { gtag(‘event’, ‘video_progress’, { ‘video_url’: videoUrl, ‘video_title’: videoTitle, ‘video_percent’: 50 }); played50 = true; } if (played75 === false & video.currentTime / video.duration >= 0.75) { gtag(‘event’, ‘video_progress’, { ‘video_url’: videoUrl, ‘video_title’: videoTitle, ‘video_percent’: 75 }); played75 = true; } if (played90 === false & video.currentTime / video.duration >= 0.9) { gtag(‘event’, ‘video_progress’, { ‘video_url’: videoUrl, ‘video_title’: videoTitle, ‘video_percent’: 90 }); played90 = true; } }); video.addEventListener(“ended”, (event) => { if (ended === false) { gtag(‘event’, ‘video_complete’, { ‘video_url’: videoUrl, ‘video_title’: videoTitle, ‘video_percent’: 100 }); ended = true; } }); |
Dieser Code sollte analog zum Google Tag nur nach Zustimmung des Nutzers ausgeführt werden, um unnötige und fehlerhafte Aufrufe zu vermeiden.
