Core Web Vitals mit Google Tag Manager & Borlabs Cookie tracken

Um Core Web Vitals aller User zu messen ist derzeit etwas Aufwand notwendig. Man muss in „Eigenregie“ diese Daten messen und in einem Analyse-Tool verarbeiten. In diesem Beitrag erfĂ€hrst Du wie das mit Google Tag Manager funktioniert und diese Daten weiter an Google Analytics gesendet werden.

Um datenschutzkonform zu bleiben, nutzen wir das WordPress-Plugin Borlabs Cookie fĂŒr die Umsetzung.

Falls Dir „Core Web Vitals“ unbekannt sind, lies in unserem Blog nach: „Was sind Core Web Vitals?“.

Inhalt

  1. Wieso braucht man echte User Daten?
  2. Schon Google Tag Manager mit Borlabs Cookie eingerichtet(?)
    1. Analytics Cookie-Konfiguration – Zur Erinnerung
    2. Datenschutzkonformes Event-Tracking – Zur Erinnerung
  3. Core Web Vitals Daten an Google Tag Manager senden
    1. Vorlage fĂŒr Google Tag Manager nutzen
    2. Daten an den Tag Manager senden
    3. Daten im Google Tag Manager zum Senden aufbereiten
  4. Core Web Vitals an Universal Analytics senden
    1. Werte in ein Ereignis verpacken und senden
    2. Test-Setup
    3. Testen: Suche nach den richtigen Events & Tags
  5. Core Web Vitals an Google Analytics 4 senden
    1. Werte in ein Ereignis verpacken und senden
    2. Test-Setup
    3. Testen: Suche nach den richtigen Events & Tags
  6. Änderungen senden
  7. Core Web Vitals im Google Analytics Dashboard
  8. Fazit

Es gibt viele empfehlenswerte englische Artikel zu diesem Thema:

  • web.dev Artikel „Getting started with measuring Web Vitals“ [1]
  • Das GitHub-Repo von web-vitals, der JavaScript-Bibliothek vom Google Chrome Team. [2]
    Spoiler: Wir werden diese Bibliothek auch einsetzten.
  • Tutorial „Track Core Web Vitals In GA4 With Google Tag Manager“ [3]; mein Nachschlagewerk fĂŒr diesen Artikel (🙏).
  • Ebenso empfehle ich „Advanced Guide: how to track Core Web Vitals with Google Tag Manager“ [4]

1. Wieso braucht man echte User Daten?

Pagespeed Insights haben doch „Felddaten“, oder?
Google Search Console hat doch den CWV-Report?
Reicht das nicht?

Jein, diese Werte kommen aus Googles Bericht zur Nutzererfahrung in Chrome (kurz CrUX). Sie beinhalten daher nur Daten von Chrome-Usern.

Nutzen Besucher einen anderen Browser, findet man diese Daten nicht im CrUX.

Auch ist unklar, wie viel Traffic bzw. wie viele Daten der CWV-Report braucht, damit dieser in der Search Console angezeigt wird.

Um also ein authentisches Bild der Leistung einer Website zu bekommen, brauchen wir „echte Daten“.

In der IT wird das Real User Measurement (kurz RUM) genannt und dient hauptsÀchlich dazu die theoretische Leistung gegen die Leistung in der freien Wildbahn zu testen.

„Erst mit Sicherstellung der vom Endnutzer am Client erfahrenen Performanz ergibt die Kontrolle der Leistung einzelner Komponenten einen Sinn.“

Real User Measurement – Wikipedia

Soll heißen: Die gemessene Leistung unter Laborbedingungen ist weniger relevant als jene, die ein Besucher erfĂ€hrt.

Man kann weiter argumentieren: Labor-Tests haben keine Aussagekraft, wenn man diese nicht mit der realen Welt vergleicht.

FĂŒr die datenschutzkonforme Einrichtung von Google Analytics nutzen wir das Borlabs Cookie Plugin. Falls Du ein anderes Plugin dafĂŒr nutzt, kein Problem. Dieser Artikel erklĂ€rt das Prinzip wie man Core Web Vitals per Google Tag Manager nach Google Analytics bringt, wie es mit dem Datenschutz ist, bleibt dann Dir ĂŒberlassen.

Falls Du den Google Tag Manager mit Borlabs Cookie noch einrichten willst und musst, folge jetzt(!) der Anleitung des Plugin-Herstellers [5] und komme nachher wieder an diese Stelle zurĂŒck.

Wir haben das auch so gemacht.

Erledigt?

Super! 
 die Plugin-Konfiguration sollte jetzt jene sein:

  • Google Tag Manager (GTM) wird immer geladen. Das ist unsere Kommandozentrale und somit in der Cookie-Box als „erforderlich“ eingetragen.
  • Google Analytics (GA) wird nur nach Zustimmung des Besuchers geladen.
    • Mit der Zustimmung wird ein Ereignis im GTM ausgelöst und GA geladen.

Folgender Code steht in der Borlabs Cookie Konfiguration unter Borlabs Cookie > Cookies > Google Analytics. Dieser wird bei Zustimmung (GA) geladen und sendet ein Event an den Google Tag Manager:

<script>
window.borlabsCookieOptInGoogleAnalytics = true;
window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'borlabsCookieOptInGoogleAnalytics',
  });
</script>

In eine sogenannte Datenvariable verpackt erhÀlt GTM also ein Ereignis borlabsCookieOptIn­GoogleAnalytics, wenn ein Besucher der Verwendung von GA via Cookie Box zustimmt. Das löst wiederum einen sogenannten Trigger aus und Google Analytics wird geladen.

Wie man diesen Trigger einstellt, steht in der offiziellen Anleitung von Borland Cookie [5].

Was hat das nun mit Core Web Vitals zu tun?

Diese Konfiguration hilft in weiterer Folge Core Web Vitals nur dann zu messen, wenn ein Besucher Google Analytics erlaubt hat.

Vom der Grundidee ist die Konfiguration die gleiche wie bei Google Analytics. Die Erfassung von Daten darf nur nach Zustimmung passieren, das gilt sowohl fĂŒr Google Analytics als auch fĂŒr Core Web Vitals.

Bist Du der offiziellen Anleitung akribisch gefolgt?
Falls nicht, wirf noch einmal einen Blick auf Punkt 5 („Variable zum Sperren erstellen“) der offiziellen Anleitung [5].

Zusammengefasst:
Um nur Daten an Analytics senden, wenn der Besucher auch zugestimmt hat, verwenden wir eine Funktion, die mit dem Borlabs Cookie Plugin kommt. Mithilfe einer Variable „holt“ man den Status der Zustimmung in den GTM und sendet nur dann Events an GA, wenn diese wahr („zugestimmt“) ist.

Ich erstelle eine neue Variable im Google Tag Manager, auch wenn ich diese erst spĂ€ter verwende. Der Wert dieser Variable („Stimme zu“/„Stimme nicht zu“) wird mithilfe von JavaScript dynamisch gesetzt.

  1. Klicke auf Variablen.
  2. Dann auf Neu.
  3. Es erscheint ein Fenster; klicke auf den großen Bereich Variable Konfigurieren.
  4. WĂ€hle Benutzerdefiniertes JavaScript aus (unter „Seitenvariablen“).
  5. Kopiere den Code (unterhalb des Videos) in das Feld.
  6. Gib der Variable einen Namen.
  7. Schließe mit Speichern ab.
Eine neue Variable, die uns sagt, ob ein Besucher das Laden von Google Analytics akzeptiert hat.

Ich habe die Variable „Borlabs Cookie Checker – Analytics“ genannt, aber das bleibt natĂŒrlich Dir ĂŒberlassen. Gleich bleibt aber der verwendete JavaScript Code:

function(){
return window.BorlabsCookie.checkCookieConsent('google-analytics');
}

3. Core Web Vitals messen und Daten an GTM senden

Wir messen und verarbeiten Core Web Vitals per Google Tag Manager ĂŒber den empfohlenen Weg:

„The recommended way to measure Web Vitals metrics with Google Tag Manager is using the Core Web Vitals custom template tag created and maintained by Simo Ahava.“

Send the results to Google Tag Manager – GitHub: web-vitals

Also binde ich im ersten Schritt eine fertige Vorlage fĂŒr den Google Tag Manager ein.

Simo Ahava stellt nicht nur diese Vorlage zur VerfĂŒgung. Er hat auch ein hervorragendes, englisch-sprachiges Tutorial (Track Core Web Vitals In GA4 With Google Tag Manager) geschrieben, das mir sehr an verschiedenen Stellen geholfen hat.

3.1. Vorlage fĂŒr Google Tag Manager nutzen

So bindet man diese Vorlage ein:

  1. Auf Vorlagen klicken.
  2. Unter Tag-Vorlagen In Galerie suchen auswÀhlen.
  3. Aus der Liste „Core Web Vitals“ auswĂ€hlen.
  4. Dann zum Arbeitsbereich hinzufĂŒgen.
  5. Nochmals mit hinzufĂŒgen bestĂ€tigen.
„Core Web Vitals“ Vorlage in Google Tag Manager hinzufĂŒgen

3.2. Core Web Vitals an den Tag Manager senden

Diese Vorlage muss nun per Tag auf Deiner Website eingebunden werden. Dann können Core Web Vitals im Google Tag Manager verarbeiten werden.

Wie mache ich das nun DSGVO-konform?

Erinnerst Du Dich noch an das oben erwÀhnte Ereignis borlabsCookieOptIn­GoogleAnalytics?

ZusĂ€tzlich existiert ja noch eine Google Tag Manager (GTM) Variable, die wir „Borlabs Cookie Checker – Analytics“ genannt haben. Der Wert dieser Variable verrĂ€t uns folgendes: Hat ein Besucher zugestimmt ihre/seine Daten mit Google Analytics zu verarbeiten?

Wenn ja, dann senden wir die Core Web Vitals Messwerte zunĂ€chst an den Tag Manager, in weiterer Folge sendet GTM diese Daten weiter an Google Analytics. Falls die Zustimmung fehlt, werden keine Daten an den Tag Manager gesendet – und an Google Analytics schon gar nicht.

Folglich erstellen wir einen Tag, der nur geladen wird, wenn wir die Zustimmung dafĂŒr haben:

  1. Auf Tags klicken, dann Neu
  2. Unter Tag-Vorlagen auf In Galerie suchen auswÀhlen
  3. Auf Tag-Konfiguration klicken
  4. „Core Web Vitals“ suchen und anklicken

Wichtig: Wir setzen in unserer Konfiguration kein HĂ€kchen bei Namespace Objects.

Im Anschluss setzt Du die richtigen Trigger, d.h. unter welcher Bedingung der neue Tag geladen werden soll/darf:

  1. Auf Trigger klicken.
  2. Suche dem Borlabs Cookie Trigger und fĂŒge diesen hinzu.
  3. Gib‘ dem Tag einen Namen und bestĂ€tige mit Speichern
FĂŒge den Core Web Vitals Tag hinzu, wenn Google Analytics erlaubt wird

3.3. Daten im Google Tag Manager zum Senden aufbereiten

Bevor die Messwerte (Core Web Vitals) an Analytics gesendet werden, mĂŒssen diese in die richtige Form gebracht werden.

Trigger („Benutzerdefiniertes Ereignis“) erzeugen

Wir brauchen einen neuen Trigger, der auf coreWebVitals gesetzt wird.

Neues Ereignis: coreWebVitals

Egal ob Du Universal Analytics oder Google Analytics 4 verwendest, bereitest Du die Messwerte gleich auf: FĂŒr jeden Wert, den Du an Analytics senden willst, muss eine Variable (Datenschichtvariable) angelegt werden.

Wieso?
Weil die Daten, die wir aus der Vorlage bekommen, sehr umfangreich sind und fĂŒr jedes der 3 Core Web Vitals (LCP, FID und CLS) folgende Daten zur VerfĂŒgung stehen:

SchlĂŒsselBeispielwertBeschreibung
event„coreWebVitals“Name des Events – immer coreWebVitals.
webVitalsMeasurement.name„FID“Entweder LCPFID oder CLS.
webVitalsMeasurement.id„v1-123123123-234234234“Eine eindeutige ID pro Messung pro Seite. Kann verwendet werden, um mehrere CLS-Messungen einem einzelnen Seitenladen zuzuordnen.
webVitalsMeasurement.value123.55Wert in Millisekunden (fĂŒr LCP und FID) oder die Punktzahl fĂŒr CLS.
webVitalsMeasurement.delta17.77Delta zur vorherigen Messung auf derselben Seite (relevant fĂŒr CLS).
webVitalsMeasurement.valueRounded124Wert auf die nĂ€chste ganze Zahl gerundet. 
Der CLS-Score wird zuerst mit 1000 multipliziert, um eine aussagekrÀftige Zahl zu erhalten.
webVitalsMeasurement.deltaRounded18Delta auf die nĂ€chste ganze Zahl gerundet. 
Der CLS-Score wird zuerst mit 1000 multipliziert, um eine aussagekrÀftige Zahl zu erhalten.
Übersetzt: Tabelle des Autors

Daten in eine sogenannte Datenschichtvariable packen

  1. Klicke auf Variablen
  2. Unter Benutzerdefinierte Variablen auf Neu
  3. Und folge dem Schema:
Anlegen 1 Variable, um die CWV-Messwerte verarbeiten zu können.

Ich habe folgendes Schema gewÀhlt:

Variablenname (frei wÀhlbar)Datenschichtvariable
CWV – Measurement.namewebVitalsMeasurement.name
CWV – Measurement.idwebVitalsMeasurement.id
CWV – Measurement.valuewebVitalsMeasurement.value
CWV – Measurement.deltawebVitalsMeasurement.delta
CWV – Measurement.valueRoundedwebVitalsMeasurement.valueRounded
CWV – Measurement.deltaRoundedwebVitalsMeasurement.deltaRounded
Unser Setup der Datenschichtvariablen und deren Werte.

Wenn Du alle Variablen erstellt hast, sieht das in etwa so aus:

Alle neuen Datenschichtvariablen fĂŒr die Messwerte
Alle angelegten Datenschichtvariablen

Im nÀchsten Schritt verpacken wir diese Datenschichtvariablen in ein bzw. zwei Event(s) und senden diese an Universal Analytics und/oder Google Analytics 4. Je nachdem welche Version von Google Analytics Du verwendest, muss das Event anders aufbereitet werden.

4. Core Web Vitals an Universal Analytics senden

Wir wollen also nun die Core Web Vitals Daten in ein Event verpacken und an Google Analytics senden. Ein Universal Analytics Event braucht folgende Felder:

  • Kategorie – Nennen wir „Core Web Vitals“
  • Aktion – Setzen wir als webVitalsMeasurement.name (LCP, FID oder CLS)
  • Label – Wird als webVitalsMeasurement.id gesetzt
  • Wert – Werte aus webVitalsMeasurement.­valueRounded
    (muss eine Ganzzahl sein, daher nehmen wir den gerundeten Wert)

4.1. Werte in ein Ereignis verpacken und senden

  1. Gehe zu Tags > Neu
  2. Klicke auf Tag-Konfiguration
  3. WĂ€hle Google Analytics: Universal Analytics
  4. Unter Tag-Konfiguration:
    • Tracking-Typ: Ereignis
    • Kategorie: „Core Web Vitals“
    • Aktion: „CWV – Measurement.name“
    • Label: „CWV – Measurement.id“
    • Wert: „CWV – Measurement.­valueRounded“
    • Treffer ohne Interaktion: Wahr
    • Google Analytics-Einstellungen: WĂ€hle die richtige Analytics-Property
    • Setze ein Hakerl bei Einstellungen zum Überschreiben in diesem Tag aktivieren
    • Öffne Weitere Einstellungen und Festzulegende Felder:
      Feldname: transport. Wert: beacon
  5. WĂ€hle bei Trigger das benutzerdefinierte Ereignis aus, das wir im vorherigen Schritt angelegt haben.
  6. Setze einen Namen und schließe mit Speichern ab
Daten an Universal Analytics senden

4.2. Test-Setup

Nun muss getestet werden, ob das Event auch versendet wird.

  1. Klicke auf In Vorschau ansehen und 

  2. 
 es öffnet sich der Tag Assistant in einem neuen Fenster.
  3. Nutze Connect um den Testvorgang zu starten.
  4. Ein zweites neues Fenster öffnet sich. Diesmal mit der Website, die getestet werden soll.
  5. Wenn alles geklappt hat, öffnet sich im Tag Assistant die Meldung Connected!.
  6. Das Testen kann beginnen.

4.3. Testen: Suche nach den richtigen Events & Tags

Benutze nun die Website und suche nach dem Universal Analytics Tag, der gefeuert werden sollte:

Tag Assistant - Universal Analytics: Tags und Events

Universal Analytics Tag-Details

Du hast die Möglichkeit Inhalte von Tags anzusehen (einfach anklicken). So ĂŒberprĂŒfst Du, ob die richtigen Daten gesendet werden:

Details des Universal Analytics Tags
Core Web Vitals Daten, die in einem Ereignis an Universal Analytics gesendet werden.

5. Core Web Vitals an Google Analytics 4 senden

Wir wollen also nun die Core Web Vitals Daten in ein Event verpacken und an Google Analytics senden. Ein Google Analytics 4 Ereignis kann maßgeschneidert definiert werden.

Ich stelle unser Event aus den angelegten Datenschichtvarialben zusammen:

  • Ereignisname: {{CWV – Measurement.name}}
  • Ereignisparameter
    • cwv_measurement_name: {{CWV – Measurement.name}}
    • cwv_measurement_id: {{CWV – Measurement.id}}
    • cwv_measurement_value: {{CWV – Measurement.value}}
    • value: {{CWV – Measurement.delta}}

Nerd-Fact: Wie Simo Ahava [3] beschreibt, setzen wir den Default-Parameter value mit auf den delta Wert, da potentiell CLS Werte öfters gesendet werden. Diese werden dann summiert. Senden wir nun value (statt delta) können ĂŒberhöhte Werte bei Analytics ankommen.

5.1. Werte in ein Ereignis verpacken und senden

  1. Gehe zu Tags > Neu
  2. Klicke auf Tag-Konfiguration
  3. WĂ€hle Google Analytics: GA4-Ereignis
  4. Konfigurations-Tag: WĂ€hle die richtige Analytics-Property.
  5. Ereignisparameter (wie oben)
    • cwv_measurement_name: {{CWV – Measurement.name}}
    • cwv_measurement_id: {{CWV – Measurement.id}}
    • cwv_measurement_value: {{CWV – Measurement.value}}
    • value: {{CWV – Measurement.delta}}
  6. WĂ€hle bei Trigger das benutzerdefinierte Ereignis aus, das wir im vorherigen Schritt angelegt haben.
  7. Setze einen Namen und schließe mit Speichern ab.
Daten an Universal Analytics senden

5.2. Test-Setup

Den Testvorgang startest Du wie bei Universal Analytics, Du hÀltst dann nur Ausschau nach einem GA4-Event:

  1. Klicke auf In Vorschau ansehen und 

  2. 
 es öffnet sich der Tag Assistant in einem neuen Fenster.
  3. Nutze Connect um den Testvorgang zu starten.
  4. Ein zweites neues Fenster öffnet sich. Diesmal mit der Website, die getestet werden soll.
  5. Wenn alles geklappt hat, öffnet sich im Tag Assistant die Meldung Connected!.
  6. Das Testen kann beginnen.

5.3. Testen: Suche nach den richtigen Events & Tags

Benutze nun nochmal die Website. Suche nach dem Google Analytics 4 Tag, der gefeuert werden sollte:

Tag Assistant - Google Analytics 4: Tags und Events

Ohne Zustimmung fĂŒr Analytics:

Keine Zustimmung fĂŒr Google Analytics: keine Core Web Vitals Tags werden getriggert

Mit Zustimmung fĂŒr Analytics:

Zustimmung fĂŒr Google Analytics: Core Web Vitals Tags werden getriggert

Tag-Details ĂŒberprĂŒfen

Du hast die Möglichkeit von Tags zu anzusehen. So kannst Du ĂŒberprĂŒfen, ob die richtigen Daten gesendet werden. fĂŒr den Google Analytics 4 Tag sieht das ganze so aus:

Details des Analytics 4 Tags
Core Web Vitals Daten, die in einem Ereignis an Google Analytics 4 gesendet werden.

Google Analytics 4 – Ereignisse in Debug View ĂŒberprĂŒfen

NatĂŒrlich kannst Du auch in Analytics 4, die sogenannte Debug View nutzen, um zu testen, ob die richtigen Ereignisse ankommen.

Nerd-Fact: Das funktioniert nur wĂ€hrend aktiviertem Test-Modus („In Vorschau ansehen“) im Tag Manager.

  • Öffne Deine Google Analytics 4 Property.
  • Unter Konfigurieren findest Du den Punkt Ereignisse.

Das ganze sieht dann so aus:

Debug View mit Core Web Vitals in Google Analytics 4
Debug View mit Core Web Vitals in Google Analytics 4

6. Änderungen senden

Wenn alle Test erfolgreich waren, musst Du die Änderungen noch fĂŒr alle Besucher auf der Website ĂŒbernehmen.

Im Google Tag Manager heißt das „Senden“.

Tagmanager Anpassungen senden
Änderung mĂŒssen noch ĂŒbernommen werden.

7. Core Weg Vitals im Google Analytics Dashboard

Nachdem die Änderungen ĂŒbernommen werden, kannst Du in Deinem Google Analytics Dashboard die Daten auswerten. Nun hast Du „echte“ Besucherdaten.

Core Web Vitals Ereignisse in Universal Analytics
Core Web Vitals Ereignisse in Universal Analytics
Core Web Vitals Ereignisse in Google Analytics 4
Core Web Vitals Ereignisse in Google Analytics 4

8. Fazit

Nun hast Du eine Möglichkeit Core Web Vitals Deiner Besucher zu messen. So bekommst Du einen authentischen Eindruck davon, wie Deine Website „ankommt“ – nĂ€mlich in Form von objektiven Metriken.

Ich persönlich finde, die Möglichkeit der GTM-Vorlage super, das erleichtert die Arbeit sehr. Der erste Versuch war, die web-vitals Bibliothek [2] in Eigenregie einzubinden und die Daten an den Tag Manager zu senden.

Aber wieso das Rad neu erfinden? In diesem Sinne nochmals ein großes Danke an Simo.

Hat Dir dieser Beitrag geholfen?
Dann bitte teile ihn – das hilft uns besonders 👍.

Wenn Du weitere Fragen hast, haben sie andere womöglich auch – hinterlasse uns ein Kommentar! 😉

  1. Web.dev Artikel „Getting started with measuring Web Vitals“
  2. Github-Repo: web-vitals
  3. Simo Ahava’s Tutorial: Track Core Web Vitals In GA4 With Google Tag Manager
  4. Matteo Zambon’s Advanced Guide: how to track Core Web Vitals with Google Tag Manager
  5. Borlabs Cookie Anleitung: Google Tag Manager mit Borlabs Cookie einrichten

Das könnte Sie auch interessieren

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert