Web Vitals: Feld-Daten mit Google Tag Manager messen

Die Core Web Vitals werden ab Mai 2021 ein Rankingfaktor. Erfüllt Deine Seite die Anforderungen oder besteht noch Optimierungsbedarf? Um das herauszufinden, zeige ich Dir heute, wie Du mit dem Google Tag Manager die Vitals-Daten Deiner Nutzer richtig misst und auswertest.

Recap: Labor-Daten vs. Feld-Daten

Web-Vitals-Daten werden in zwei Kategorien unterteilt: Labor-Daten und Feld-Daten.

Labor-Daten werden in einer kontrollierten Umgebung mit vordefinierten Geräte- und Netzwerkeinstellungen gesammelt. Dies bietet reproduzierbare Ergebnisse und Debugging-Möglichkeiten, um Leistungsprobleme zu identifizieren und beheben.

Mit diesen Tools kannst Du Labor-Daten messen:

Abbildung 1: Web Vitals in Ryte überprüfen.

Feld-Daten sind Leistungsdaten, die durch echte Page-Loads erzeugt werden. Sie zeigen die tatsächliche Performance Experience Deiner Nutzer. Die Messung der Feld-Daten erfolgt von Google mit Hilfe des Chrome User Experience Reports.

Hier bekommst Du die Chrome-UX-Report-Daten:

Limitierungen des Chrome UX Reports

Beim Chrome User Experience Report handelt es sich um einen Datensatz, der Nutzerdaten zu Millionen von Domains enthält. Die Sammlung der Daten erfolgt durch den Google Chrome Browser und unterliegt einigen Limitierungen.

Nutzer müssen Deine Seite über den Chrome Browser besuchen.
Browserverlauf synchronisieren und Nutzerstatistiken teilen müssen aktiviert sein.
Es müssen sich ausreichend Nutzer auf Deiner Seite bewegen.

Diese Limitierungen haben häufig zur Folge, dass nicht für alle URLs Nutzerdaten vorliegen.

Abbildung 2: Fehlende Feld-Daten im PageSpeed Insights Tool

Die Auswertung der Daten unterliegt ebenfalls einigen Einschränkungen. In BigQuery werden die Daten des Chrome UX Reports nur monatlich aktualisiert. In PageSpeed Insights findet die Aktualisierung zwar täglich statt, der Export der Daten gestaltet sich allerdings als schwierig.

Die Lösung: Implementiere Dein eigenes Web Vitals Tracking.

Dein eigenes Web Vitals Tracking

Um die Web Vitals Deiner Nutzer selber messen zu können, benötigst Du eine JavaScript Library, die Google freundlicherweise auf GitHub zur Verfügung stellt (GitHub Repository).

Die JavaScript Library wird gemeinsam mit einem kleinen Script via Google Tag Manager auf Deiner Seite eingebunden. Die Vitals-Daten sendest Du als Events in das dazugehörige Google-Analytics-Konto. Von da aus können die Daten z. B. in einem Data-Studio-Report weiterverarbeitet werden.

Hinweis: Die Web Vitals Library lässt sich auch ohne Google Tag Manager oder Google Analytics verwenden, weitere Informationen hierzu findest Du in der Dokumentation auf GitHub.

Google Tag Manager konfigurieren – Step-by-Step-Anleitung

Abhängig von Deiner Infrastruktur gibt es verschiedene Möglichkeiten, wie Du die Web Vitals Library verwenden kannst. Für die folgende Anleitung nutze ich die „Standard“-Version der Library und lade sie über ein CDN (Content Delivery Network). Alternativ kannst die Library auch mittels NPM auf deinem Server installieren und diese z. B. um eine Polyfill-Version erweitern.

Die in der Anleitung verwendete „Standard“-Version sollte in den meisten Fällen „out of the box“ funktionieren und für aussagekräftige Daten sorgen.

Sowohl das Skript als auch die folgende Anleitung basieren auf einem Blogbeitrag von Matteo Zambon, der auf TagManagerItalia veröffentlicht wurde.

Step 1: Benutzerdefiniertes HTML-Tag für Web Vitals Library anlegen

Im ersten Schritt erstellst Du ein benutzerdefiniertes HTML-Tag, das die JavaScript Library über einen CDN auf Deiner Seite ausspielt und das Event-Tracking für die Web Vitals vorbereitet.

HTML-Tag anlegen: Tags > Neu > Tag-Konfiguration > Benutzerdefiniertes HTML

Name: Script – Web Vitals
HTML: Siehe Code Block
Trigger: „All Pages (Seitenaufruf)“

Abbildung 3: Benutzerdefiniertes HTML-Tag für Web Vitals Tracking

Hinweis: Die Werte für den Cumulative Layout Shift werden per Default-Einstellung mit der Zahl 1000 multipliziert, um die Genauigkeit der Werte zu erhöhen. Das solltest Du in Deiner späteren Auswertung beachten. Der Wert kann bei Bedarf im HTML Skript angepasst werden.

<!– Load ‚web-vitals‘ using a classic script that sets the global ‚webVitals‘ object. –>
<script defer src=“https://unpkg.com/web-vitals“></script>
<script>
function sendToGTM(name, delta, id) {
// Assumes the global `dataLayer` array exists, see:
// https://developers.google.com/tag-manager/devguide
dataLayer.push({
event: ‚web-vitals‘,
event_category: ‚Web Vitals‘,
event_action: name.name,
// Google Analytics metrics must be integers, so the value is rounded.
// For CLS the value is first multiplied by 1000 for greater precision
// (note: increase the multiplier for greater precision if needed).
event_value: Math.round(name.name === ‚CLS‘ ? name.delta * 1000 : name.delta),
// The ‚id‘ value will be unique to the current page load. When sending
// multiple values from the same page (e.g. for CLS), Google Analytics can
// compute a total by grouping on this ID (note: requires `eventLabel` to
// be a dimension in your report).
event_label: name.id,
});
}
webVitals.getCLS(sendToGTM);
webVitals.getFID(sendToGTM);
webVitals.getLCP(sendToGTM);
webVitals.getFCP(sendToGTM);
webVitals.getTTFB(sendToGTM);
</script>

Step 2: Datenschichtvariablen anlegen

Damit die Web Vitals mittels Event-Tracking an Google Analytics gesendet werden können, müssen zunächst vier Datenschichtvariablen angelegt werden.

dlv – event_action
dlv – event_category
dlv – event_label
dlv – event_value

Abbildung 4: Datenschichtvariablen anlegen

Variable anlegen: Variablen > Neu > Variable konfigurieren > Datenschichtvariable

Name: dlv – event_action
Name der Datenschichtvariable: event_action
Datenschichtversion: 2

Abbildung 5: Datenschichtvariablen „dlv – event_action“ anlegen

Wiederhole diesen Vorgang für die restlichen Variablen.

Variable anlegen: Variablen > Neu > Variable konfigurieren > Datenschichtvariable

Name: dlv – event_category
Name der Datenschichtvariable: event_category
Datenschichtversion: 2

Variable anlegen: Variablen > Neu > Variable konfigurieren > Datenschichtvariable

Name: dlv – event_label
Name der Datenschichtvariable: event_label
Datenschichtversion: 2

Variable anlegen: Variablen > Neu > Variable konfigurieren > Datenschichtvariable

Name: dlv – event_value
Name der Datenschichtvariable: event_value
Datenschichtversion: 2

Step 3: Trigger für Web Vitals Custom Event erstellen

Für das Auslösen des Event-Trackings wird ein entsprechender Trigger benötigt.

Trigger anlegen: Trigger > Neu > Triggerkonfiguration

Name: Web Vitals
Trigger-Typ: Benutzerdefiniertes Ereignis
Ereignisname: web-vitals

Abbildung 6: Trigger für Event-Tracking anlegen

Step 4: GA-Tag für Event-Tracking erstellen

Als nächstes erstellst Du ein GA-Tag für das Event Tracking und verknüpfst dieses mit dem zuvor erstellten Trigger und den Datenschichtvariablen.

Tag anlegen: Tags > Neu > Tag-Konfiguration > Google Analytics: Universal Analytics

Name: GA – Event – Web Vitals
Tracking-Typ: Ereignis
Kategorie: {{dlv – event_category}}
Aktion: {{dlv – event_action}}
Label: {{dlv – event_label}}
Wert: {{dlv – event_value}}
Treffer ohne Interaktion: Wahr
Trigger: Web Vitals

Abbildung 7: GA-Tag für Event-Tracking anlegen

Step 5: Web-Vitals-Tracking testen

In der Vorschau des Tag Managers kannst Du überprüfen, ob Deine Tags gefeuert und die Web Vitals als Events an Google Analytics gesendet werden.

Abbildung 8: Web-Vitals-Tracking in der Tag-Manager-Vorschau testen

Hinweis: Es werden nicht alle Web-Vitals-Events gleich zu Beginn ausgelöst. Das Event für den First Input Delay (FID) wird erst durch einen Input wie z. B. den Klick auf einen Link ausgelöst. Der Wert für den Cumulative Layout Shift kann sich während einer Session mehrmals ändern und wird aus diesem Grund erst beim Verlassen der Seite übermittelt.

Ob die Web Vitals erfolgreich an Google Analytics gesendet werden, kann z. B. im Echtzeit-Bericht für Ereignisse eingesehen werden.

Abbildung 9: Web Vitals an Google Analytics senden

Web-Vitals-Daten auswerten

Befinden sich die Web-Vitals-Daten Deiner Nutzer in Analytics, gibt es verschiedene Möglichkeiten sie auszuwerten.

Wenn in Deiner Analytics-Datenansicht weniger als 100.000 Web-Vitals-Events pro Tag einlaufen, bietet der Web Vitals Report von Google eine einfache und schnelle Möglichkeit, Deine Daten auszuwerten. Den Report stellt Google auf GitHub zur Verfügung (GitHub Repository).

Du kannst die Anwendung entweder selber hosten oder Dich mit Deinem Google-Konto in der von Google bereitgestellten Webanwendung anmelden.

Abbildung 10: Verteilung der LCP-Messwerte für Mobile- und Desktop-Geräte

Abbildung 11: LCP-Messwerte im zeitlichen Verlauf für Mobile- und Desktop-Geräte

Bei mehr als 100.000 Web-Vitals-Events pro Tag ist die Webanwendung aufgrund von hohen Ladezeiten nur bedingt zu empfehlen. Spätestens bei mehr als 1.000.000 Events greift das Query-Limit der Analytics API. Du möchtest die Anwendung trotzdem nutzen? Dann ist der Einsatz von Data-Sampling eine mögliche Option.

Wenn Du Deinen eigenen Report bauen möchtest, bietet sich das Google Data Studio an. Wer mit großen Datenmengen zu kämpfen hat, sollte ggf. über den Einsatz von BigQuery nachdenken. R-Studio oder Tableau bieten ebenfalls tolle Möglichkeiten, Deine Vitals Daten zu analysieren.

Hinweis: Google verwendet für die Performance-Daten des Chrome UX Reports das 75. Perzentil (Empirisches Quantil). Ein Beispiel: Im PageSpeed Insights Tool wird der LCP einer Seite mit 1,8 Sekunden angegeben (Feld-Daten). Das bedeutet: Bei 75 % der Nutzer lag der gemessene LCP unter 1,8 Sekunden. Insbesondere bei Datenmengen mit extremen Ausreißern sorgt die Berechnung eines empirischen Quantils, im Vergleich zum Mittelwert, für aussagekräftigere Ergebnisse.

Web Vitals auf Verzeichnisebene analysieren

Sehr hilfreich finde ich die Analyse der Web Vitals auf Verzeichnisebene, so lässt sich schnell herausfinden, für welche Verzeichnisse oder Seitentypen Optimierungsbedarf besteht.

Abbildung 12: Largest Contentful Paint auf Verzeichnisebene

Eigene Daten mit Chrome UX Report vergleichen

Es empfiehlt sich, Deine eigenen Daten regelmäßig mit denen des Chrome User Experience Reports abzugleichen, da Google diese für die Berechnung des Rankings verwendet. Prüfe, welche Deiner Seiten oder Segmente signifikante Abweichungen aufweisen und wie diese zustande kommen.

Fazit

Bei der Web Vitals Library von Google handelt es sich um ein nützliches Tool, das es ermöglicht, die Web Vitals Daten selbst zu messen. Die JavaScript Library ist schnell implementiert und kann an die vorliegende Infrastruktur angepasst werden. Die Messung der Daten geschieht unabhängig von Browsertyp und -konfiguration. Die Auswertung der Feld-Daten kann je nach Nutzerzahlen wöchentlich oder sogar täglich erfolgen. Performance-Probleme können dadurch schneller entdeckt und lokalisiert werden.

Viel Spaß beim Ausprobieren!

Optimiere Deine Website mit Ryte!

Kostenloses Trial starten

Veröffentlicht am Mar 19, 2021 von Jannik Dahle

Jannik Dahle

Ryte-Nutzer erzielen +93% Klicks nach 1 Jahr. Erfahre wie!

Demo buchen