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
- Wieso braucht man echte User Daten?
- Schon Google Tag Manager mit Borlabs Cookie eingerichtet(?)
- Analytics Cookie-Konfiguration â Zur Erinnerung
- Datenschutzkonformes Event-Tracking â Zur Erinnerung
- Core Web Vitals Daten an Google Tag Manager senden
- Core Web Vitals an Universal Analytics senden
- Core Web Vitals an Google Analytics 4 senden
- Ănderungen senden
- Core Web Vitals im Google Analytics Dashboard
- 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.
2. Google Tag Manager schon mit Borlabs Cookie eingerichtet? (DSGVO-konform?)
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.
2.1. Zur Erinnerung: Cookie-Konfiguration fĂŒr Analytics
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.
2.2. Zur Erinnerung: Variable fĂŒrs datenschutzkonforme Event-Tracking
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.
- Klicke auf Variablen.
- Dann auf Neu.
- Es erscheint ein Fenster; klicke auf den groĂen Bereich Variable Konfigurieren.
- WĂ€hle Benutzerdefiniertes JavaScript aus (unter âSeitenvariablenâ).
- Kopiere den Code (unterhalb des Videos) in das Feld.
- Gib der Variable einen Namen.
- SchlieĂe mit Speichern ab.
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:
- Auf Vorlagen klicken.
- Unter Tag-Vorlagen In Galerie suchen auswÀhlen.
- Aus der Liste âCore Web Vitalsâ auswĂ€hlen.
- Dann zum Arbeitsbereich hinzufĂŒgen.
- Nochmals mit hinzufĂŒgen bestĂ€tigen.
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:
- Auf Tags klicken, dann Neu
- Unter Tag-Vorlagen auf In Galerie suchen auswÀhlen
- Auf Tag-Konfiguration klicken
- â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:
- Auf Trigger klicken.
- Suche dem Borlabs Cookie Trigger und fĂŒge diesen hinzu.
- Gib‘ dem Tag einen Namen und bestĂ€tige mit Speichern
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.
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ĂŒssel | Beispielwert | Beschreibung |
---|---|---|
event | âcoreWebVitalsâ | Name des Events â immer coreWebVitals . |
webVitalsMeasurement.name | âFIDâ | Entweder LCP , FID 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.value | 123.55 | Wert in Millisekunden (fĂŒr LCP und FID ) oder die Punktzahl fĂŒr CLS . |
webVitalsMeasurement.delta | 17.77 | Delta zur vorherigen Messung auf derselben Seite (relevant fĂŒr CLS). |
webVitalsMeasurement.valueRounded | 124 | Wert auf die nÀchste ganze Zahl gerundet. Der CLS-Score wird zuerst mit 1000 multipliziert, um eine aussagekrÀftige Zahl zu erhalten. |
webVitalsMeasurement.deltaRounded | 18 | Delta auf die nÀchste ganze Zahl gerundet. Der CLS-Score wird zuerst mit 1000 multipliziert, um eine aussagekrÀftige Zahl zu erhalten. |
Daten in eine sogenannte Datenschichtvariable packen
- Klicke auf Variablen
- Unter Benutzerdefinierte Variablen auf Neu
- Und folge dem Schema:
Ich habe folgendes Schema gewÀhlt:
Variablenname (frei wÀhlbar) | Datenschichtvariable |
---|---|
CWV – Measurement.name | webVitalsMeasurement.name |
CWV – Measurement.id | webVitalsMeasurement.id |
CWV – Measurement.value | webVitalsMeasurement.value |
CWV – Measurement.delta | webVitalsMeasurement.delta |
CWV – Measurement.valueRounded | webVitalsMeasurement.valueRounded |
CWV – Measurement.deltaRounded | webVitalsMeasurement.deltaRounded |
Wenn Du alle Variablen erstellt hast, sieht das in etwa so aus:

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
- Gehe zu Tags > Neu
- Klicke auf Tag-Konfiguration
- WĂ€hle Google Analytics: Universal Analytics
- 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
- WĂ€hle bei Trigger das benutzerdefinierte Ereignis aus, das wir im vorherigen Schritt angelegt haben.
- Setze einen Namen und schlieĂe mit Speichern ab
4.2. Test-Setup
Nun muss getestet werden, ob das Event auch versendet wird.
- Klicke auf In Vorschau ansehen und âŠ
- ⊠es öffnet sich der Tag Assistant in einem neuen Fenster.
- Nutze Connect um den Testvorgang zu starten.
- Ein zweites neues Fenster öffnet sich. Diesmal mit der Website, die getestet werden soll.
- Wenn alles geklappt hat, öffnet sich im Tag Assistant die Meldung Connected!.
- 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:

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:

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
- Gehe zu Tags > Neu
- Klicke auf Tag-Konfiguration
- WĂ€hle Google Analytics: GA4-Ereignis
- Konfigurations-Tag: WĂ€hle die richtige Analytics-Property.
- 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}}
- WĂ€hle bei Trigger das benutzerdefinierte Ereignis aus, das wir im vorherigen Schritt angelegt haben.
- Setze einen Namen und schlieĂe mit Speichern ab.
5.2. Test-Setup
Den Testvorgang startest Du wie bei Universal Analytics, Du hÀltst dann nur Ausschau nach einem GA4-Event:
- Klicke auf In Vorschau ansehen und âŠ
- ⊠es öffnet sich der Tag Assistant in einem neuen Fenster.
- Nutze Connect um den Testvorgang zu starten.
- Ein zweites neues Fenster öffnet sich. Diesmal mit der Website, die getestet werden soll.
- Wenn alles geklappt hat, öffnet sich im Tag Assistant die Meldung Connected!.
- 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:

Ohne Zustimmung fĂŒr Analytics:
Mit Zustimmung fĂŒr Analytics:
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:

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:

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â.

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.


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! đ
Links
- Web.dev Artikel âGetting started with measuring Web Vitalsâ
- Github-Repo: web-vitals
- Simo Ahavaâs Tutorial: Track Core Web Vitals In GA4 With Google Tag Manager
- Matteo Zambonâs Advanced Guide: how to track Core Web Vitals with Google Tag Manager
- Borlabs Cookie Anleitung: Google Tag Manager mit Borlabs Cookie einrichten