Geschrieben von

Core Web Vitals mit Google Tag Manager messen

Webtracking

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:

Web Vitals

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:

  1. Core Web Vitals Bibliothek importieren
  2. JavaScript-Funktion über ein benutzerdefiniertes HTML-Tag bereitstellen
  3. Trigger und Variablen erstellen
  4. 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:

GTM Core Web Vitals

Trigger und Variablen erstellen

Nun brauchen wir zunächst das benutzerdefinierte Event aus dem dataLayer-Push:

Trigger

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:

Variable

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:

GA-Tag

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.