Was sind die Core Web Vitals?
Die Core Web Vitals sind Teil der Page Experience von Google. Unter den Core Web Vitals werden 3 Pagespeed-Kennzahlen zusammengefasst:
- Largest Contentful Paint (LCP): Mit dieser Kennzahl wird die Geschwindigkeit gemessen, wann das größte Element der Seite zur Verfügung steht (sozusagen der Hauptinhalt).
- First Input Delay (FID): Mit dieser Kennzahl wird die Interaktivität gemessen und ist der Zeitpunkt, wo die Seite auf Nutzereingaben reagieren kann.
- Cumulative Layout Shift (CLS): Mit dieser Kennzahl wird visuelle Stabilität und der Umfang der unerwarteten Änderungen des Layouts gemessen.
Visuell lässt sich das folgendermaßen abbilden:
Wenn du mehr über die Web Vitals erfahren möchtest, dann geht es hier zu meinen Beitrag zu den Web Vitals.
Web Vitals mit Google Tag Manager erfassen
Für die Messung sind folgende Schritte notwendig:
- Core Web Vitals Bibliothek importieren
- JavaScript-Funktion über ein benutzerdefiniertes HTML-Tag bereitstellen
- Trigger und Variablen erstellen
- Google Analytics-Tag erstellen
Core Web Vitals Bibliothek importieren
Zunächst muss die Core Web Vitals Modul-Bibliothek mit den Funktionen getCLS, getFID und getLCP importiert werden. Das geschieht mit dem import-Statement:
<script src="https://unpkg.com/web-vitals@1.0.1/dist/web-vitals.umd.js"></script>
Wichtig: Hier wird die Version 1.0.1 der Bibliothek geladen. In Zukunft wird es sicherlich neue Version geben. Daher solltest du sicherstellen, dass immer die neueste Version von UNPKG geladen wird.
Dieser Code muss nun um eine JavaScript-Funktion erweitert werden.
JavaScript-Funktion über ein benutzerdefiniertes HTML-Tag bereitstellen
Die JavaScript-Funktion nimmt 3 Parameter entgegen und pusht die entsprechenden Werte in den dataLayer:
<script src="https://unpkg.com/web-vitals@1.0.1/dist/web-vitals.umd.js"></script>
<script>
function sendCoreWebVitals(name, delta, id) {
dataLayer.push({
event: 'web-vitals',
event_category: 'web-vitals',
event_action: name.name,
event_value: Math.round(name.name === 'CLS' ? name.delta * 1000 : name.delta),
event_label: name.id,
});
}
webVitals.getCLS(sendCoreWebVitals);
webVitals.getFID(sendCoreWebVitals);
webVitals.getLCP(sendCoreWebVitals);
</script>
Dieser Code kommt in ein benutzerdefiniertes HTML:
Trigger und Variablen erstellen
Nun brauchen wir zunächst das benutzerdefinierte Event aus dem dataLayer-Push:
Und wir brauchen die dataLayer-Variablen “event_category”, “event_action”, “event_value” und “event_label”. Hier am Beispiel von “event_category” wie das im GTM aussieht:
Nun müssen auch die anderen 3 erstellt werden.
Google Analytics-Tag erstellen
Der letzte Schritt im Setup besteht nun darin das entsprechende Google Analytics-Tag zu erstellen:
Es handelt sich um ein Event-Tag. Die Werte für die Kategorie, Aktion, Label und Ereignis-Wert sind die dataLayer-Variablen. “Treffer ohne Interaktion” ist auf “Wahr” gesetzt, damit es die Bounce Rate nicht beeinflusst. Achte darauf, dass du deine Tracking-ID integrierst und den Trigger an dein Consent Tool anpasst.