Core Web Vitals-Felddaten mit Anzeigenmesswerten erfassen

1. Hinweis

In diesem Codelab erfahren Sie, wie Sie Core Web Vitals mit einer vorgefertigten Google Tag Manager (GTM)-Tag-Vorlage erfassen und die Daten an eine Google Analytics 4 (GA4)-Property senden. Außerdem erfahren Sie, wie Sie Daten aus Google Ad Manager und Google AdSense in GA4 abrufen, um Core Web Vitals-Felddaten und Anzeigenleistungsmesswerte mit einem vorgefertigten Looker Studio-Dashboard in Beziehung zu setzen.

Aufgaben

• Importieren Sie ein Tag in Ihren Google Tag Manager-Container und richten Sie es ein.
• Messen Sie die Core Web Vitals der Webseite in GA4.
• Richten Sie ein GA4-Ereignis-Tag in Google Tag Manager ein.
• Sehen Sie sich die Web Vitals-Daten in dataLayer und in GA4-Berichten an.
• Verknüpfen Sie Ihre GA4-Property mit Google Ad Manager und Google AdSense.
• Core Web Vitals und Werbeeinnahmen über ein Looker Studio-Dashboard in Beziehung setzen

Voraussetzungen

• Sie haben ein Google Analytics-Konto und eine GA4-Web-Property mit Bearbeiterzugriff.
• Ein Google Tag Manager-Konto und ein Webcontainer mit Veröffentlichungsrechten.
• Ein Google Ad Manager-Netzwerk und/oder ein Google AdSense-Konto mit Administratorzugriff.
• Ein Looker Studio-Konto.

2. Tag-Vorlage aus GitHub in GTM einfügen

Die Messung von Core Web Vitals über eine GTM-Tag-Vorlage basiert auf der web-vitals-Bibliothek. Zuerst laden wir die GTM-Tag-Vorlage herunter.

1. Öffnen Sie die Datei template.tpl.
2. Datei auf Ihren Computer herunterladen

Rufen Sie nun Ihr Google Tag Manager-Konto auf.

1. Öffnen Sie Ihren Webcontainer.
2. Erstellen Sie einen neuen Arbeitsbereich und geben Sie einen Namen ein, z.B. „Core Web Vitals-Messung“.
3. Rufen Sie „Vorlagen“ auf.
4. Klicken Sie im Bereich „Tag-Vorlagen“ auf die Schaltfläche „Neu“.

5. Klicken Sie auf das Dreipunkt-Menü und wählen Sie „Importieren“ aus.

6. Wählen Sie die zuvor heruntergeladene TPL-Datei auf Ihrem Computer aus.
7. Klicken Sie auf die Schaltfläche "Speichern".

Sie haben die Tag-Vorlage Ihrem Google Tag Manager-Container hinzugefügt.

3. Web-Vitals-Tag einrichten

1. Rufen Sie in Ihrem Google Tag Manager-Arbeitsbereich „Tags“ auf.
2. Fügen Sie das Web Vitals-Tag hinzu, indem Sie auf „Neu“ und dann auf „Tag-Konfiguration“ klicken und das Tag „Web Vitals“ im Bereich „Benutzerdefiniert“ auswählen.
3. Im nächsten Schritt konfigurieren Sie die verschiedenen Einstellungen. Alle Einstellungen werden im GitHub-Repository erläutert. Für dieses Codelab und das endgültige Dashboard reichen die folgenden Einstellungen aus.

4. Wenden Sie einen der Trigger für Seitenaufrufe an, z.B. den Trigger „Alle Seiten“.
5. Fügen Sie bei Bedarf auch Trigger-Ausnahmen hinzu.
6. Geben Sie dem Tag den Namen „Core Web Vitals – Alle Seiten“ und speichern Sie es.

4. Web-Vitals-Daten im dataLayer ansehen

Wenn Sie das Tag in Aktion sehen möchten, wechseln Sie in den Vorschaumodus von Google Tag Manager. Der Tag Assistant wird geöffnet und Sie werden aufgefordert, eine URL für die Vorschau und das Debugging Ihrer Einrichtung einzugeben. Geben Sie eine URL zu einer Seite mit dem implementierten Google Tag Manager-Container an und klicken Sie auf „Verbinden“. Ein separater Tab mit der angegebenen URL wird geöffnet.

1. Sie können mit der Seite interagieren, indem Sie scrollen und auf Elemente oder Leerräume klicken.
2. Wechseln Sie dann zurück zum Tab mit Tag Assistant und dem Vorschaumodus von Google Tag Manager.
3. Auf der linken Seite sehen Sie die verschiedenen Ereignisse, die in dataLayer übertragen wurden.
4. Prüfen Sie zuerst, ob das Web Vitals-Tag für den von Ihnen ausgewählten Seitenaufruf-Trigger ausgelöst wurde.

5. Außerdem sollten drei „web_vitals“-Ereignisse angezeigt werden, die jeweils einen Core Web Vitals-Messwert darstellen: LCP, INP und CLS.

6. Klicken Sie auf das erste Ereignis und öffnen Sie rechts den Tab „API-Aufruf“. Dort sehen Sie die Daten, die aus der Tag-Vorlage in dataLayer übertragen wurden.

7. Sehen Sie sich auch die anderen Einträge der „web_vitals“-Ereignisse an. Die web-vitals.js-Dokumentation enthält Informationen zu den verschiedenen Datentypen.

5. Web Vitals-Daten an GA4 senden

Wenn Sie die Core Web Vitals-Daten aus dataLayer abrufen und an GA4 senden möchten, müssen Sie Folgendes tun:

• Trigger für das GA4-Tag erstellen
• Variablen erstellen, um Daten aus der dataLayer abzurufen
• GA4-Ereignis-Tag erstellen

Trigger erstellen

1. Rufen Sie in Ihrem Google Tag Manager-Arbeitsbereich „Trigger“ auf.
2. Fügen Sie einen neuen Trigger hinzu, indem Sie auf „Neu“ und dann auf „Triggerkonfiguration“ klicken und im Bereich „Sonstige“ die Option „Benutzerdefiniertes Ereignis“ auswählen.
3. Geben Sie „web_vitals“ in das Feld „Ereignisname“ ein, benennen Sie den Trigger und speichern Sie ihn.

dataLayer-Variablen erstellen

1. Klicken Sie in Ihrem Google Tag Manager-Arbeitsbereich auf „Variablen“.
2. Erstellen Sie eine neue benutzerdefinierte Variable vom Typ „Datenschichtvariable“.
3. Legen Sie „webVitalsData.name“ im Feld „Name der Datenschichtvariablen“ fest, benennen Sie die Variable (z.B. „DLV – webVitalsData.name“) und speichern Sie sie.

4. Wiederholen Sie diese Schritte für die anderen vier erforderlichen Datenschichtvariablen. „webVitalsData.value“ erstellen.

5. Erstellen Sie eine weitere Variable mit dem Namensfeld „webVitalsData.id“.

6. Erstellen Sie „webVitalsData.rating“.

7. „webVitalsData.delta“ erstellen.

8. Sie sollten die folgenden benutzerdefinierten dataLayer-Variablen haben:

GA4-Ereignis-Tag erstellen

Bevor Sie ein GA4-Ereignis-Tag erstellen, muss Ihr Google-Tag bereits eingerichtet sein.

1. Rufen Sie in Ihrem Google Tag Manager-Arbeitsbereich „Tags“ auf.
2. Fügen Sie ein GA4-Ereignis-Tag hinzu, indem Sie auf „Neu“ und dann auf „Tag-Konfiguration“ klicken und im Bereich „Google Analytics“ das Tag „Google Analytics: GA4-Ereignis“ auswählen.
3. Geben Sie Ihre Mess-ID in das entsprechende Feld ein.

4. Wählen Sie für das Eingabefeld „Ereignisname“ die Variable dataLayer „DLV – webVitalsData.name“ aus dem zuvor erstellten Schritt aus.

5. Fügen Sie die anderen dataLayer-Variablen als Ereignisparameter hinzu, wie im Screenshot gezeigt. Fügen Sie außerdem den Parameter „event_category“ mit einem Wert wie „Web Vitals“ hinzu, um die Core Web Vitals-Ereignisse zu gruppieren.

6. Registrieren Sie diese Ereignisparameter als benutzerdefinierte Dimensionen in der GA4-Benutzeroberfläche.
7. Nehmen Sie weitere Einstellungen entsprechend Ihren Anforderungen an die GA4-Einrichtung vor.
8. Legen Sie das benutzerdefinierte Ereignis „web_vitals“ als Trigger für das GA4-Tag fest.
9. Fügen Sie bei Bedarf auch Trigger-Ausnahmen hinzu.

6. Daten in GA4 prüfen

Wenn Sie den Datenfluss zu GA4 validieren möchten, wechseln Sie noch einmal in den Vorschaumodus von Google Tag Manager. Geben Sie eine URL für den Tag Assistant an und klicken Sie auf „Verbinden“.

1. Sie können mit der Seite interagieren, indem Sie scrollen und auf Elemente oder Leerräume klicken.
2. Wechseln Sie dann zurück zum Tab mit Tag Assistant und dem Vorschaumodus von Google Tag Manager.
3. Klicken Sie links auf die einzelnen Einträge für „web_vitals“ und prüfen Sie, ob das GA4-Tag für Core Web Vitals ausgelöst wird.

4. Öffnen Sie das GA4-Tag, indem Sie auf die zu validierende Karte klicken, um zu prüfen, ob die Daten korrekt aus dataLayer abgerufen werden. Achten Sie darauf, Variablen als Werte darzustellen.

5. Wechseln Sie nun zu Ihrer GA4-Property und öffnen Sie den Echtzeitbericht.
6. Auf der Karte „Ereignisanzahl nach Ereignisname“ können Sie prüfen, ob Ihre Core Web Vitals-Ereignisse erfolgreich erfasst werden.

7. Wenn im Echtzeitbericht eine große Menge an Daten verarbeitet wird, sind die Ereignisse möglicherweise nicht so leicht zu erkennen. Verwenden Sie in diesem Fall den DebugView-Bericht, in dem Sie Daten für ein bestimmtes Gerät aufrufen können.

7. Einrichtung veröffentlichen

Nachdem Sie Ihre Einrichtung erfolgreich getestet haben, können Sie Ihren Arbeitsbereich veröffentlichen.

1. Öffnen Sie Ihren Google Tag Manager-Arbeitsbereich.
2. Klicken Sie rechts oben in der Benutzeroberfläche auf „Senden“.
3. Geben Sie einen Versionsnamen und eine Versionsbeschreibung ein und stellen Sie die Einrichtung live, indem Sie auf „Veröffentlichen“ klicken.

8. GA4 mit Google Ad Manager oder Google AdSense verknüpfen

Nachdem Core Web Vitals-Daten in GA4 erfasst wurden, müssen auch anzeigenbezogene Messwerte in GA4 verfügbar sein, damit das Dashboard funktioniert. Sie können entweder Google Ad Manager und Google AdSense mit GA4 verknüpfen oder nur eine dieser Anzeigenlösungen. Sie benötigen die Rolle „Bearbeiter“ (oder höher) in GA4 und die Rolle „Administrator“ in Google Ad Manager und Google AdSense, um die Verknüpfung vorzunehmen.

GA4 mit Google Ad Manager verknüpfen

1. Rufen Sie Ihr Google Ad Manager-Netzwerk auf.
2. Klicken Sie auf „Admin“ > „Globale Einstellungen“ > „Werbenetzwerkeinstellungen“.
3. Aktivieren Sie im Bereich „Berichtseinstellungen“ die Option „Berichte zu Google Analytics 4-Properties im Abfragetool von Ad Manager“.

4. Lesen Sie die Nutzungsbedingungen und klicken Sie auf „Bestätigen“.
5. Speichern Sie die Änderung.
6. Klicken Sie auf „Verwaltung“ –> „Verknüpfte Konten“ –> „Google Analytics 4“.
7. Klicken Sie auf „Neue Verknüpfung mit einer Google Analytics 4-Property“.
8. Suchen Sie nach der GA4-Property, die Sie verknüpfen möchten, und wählen Sie sie aus.
9. Klicken Sie auf „Speichern“.

GA4 mit Google AdSense verknüpfen

1. Rufen Sie Ihr Google AdSense-Konto auf.
2. Klicken Sie auf „Konto“ –> „Zugriff und Autorisierung“ –> „Google Analytics-Integration“.
3. Klicken Sie auf „+ Neuer Link“.

4. Suchen Sie nach der GA4-Property, die Sie verknüpfen möchten, und wählen Sie sie aus.
5. Klicken Sie auf „Link erstellen“.

9. Daten mit Looker Studio visualisieren

Für eine visuelle Darstellung der Core Web Vitals-Daten zusammen mit Anzeigenmesswerten müssen Sie in diesem Schritt ein Looker Studio-Dashboard einrichten. So können Sie Core Web Vitals und Werbeeinnahmen in Beziehung setzen:

1. Öffnen Sie diese Looker Studio-Dashboardvorlage.
2. Dashboard kopieren
3. Aktualisieren Sie die Datenquelle, indem Sie Ihre GA4-Property aus der Drop-down-Liste auswählen.
4. Fertig

Damit das Dashboard funktioniert und Daten richtig angezeigt werden, müssen die Daten auf der Syntax und Namenskonvention aus diesem Codelab basieren.

Auf der ersten Seite des Dashboards sehen Sie einen historischen Überblick über die Leistung Ihrer Core Web Vitals:

Auf der zweiten Seite können Sie Core Web Vitals mit dem Anzeigenumsatz aus Google Ad Manager und/oder Google AdSense in Beziehung setzen:

Auf der dritten Seite können Sie die Core Web Vitals-Leistung auf Seitebene zusammen mit anzeigenbezogenen Messwerten analysieren:

10. Fazit

Glückwunsch! Sie haben gelernt, wie Sie Core Web Vitals mit GA4 und Messwerte zur Anzeigenleistung aus Google Ad Manager und Google AdSense messen und Berichte dazu erstellen.

Weitere Informationen

• Core Web Vitals und Werbeeinnahmen mit Google-Tools in Beziehung setzen
• Anzeigen effektiv laden, ohne die Seitengeschwindigkeit zu beeinträchtigen
• Largest Contentful Paint optimieren
• Cumulative Layout Shift optimieren
• Interaction to Next Paint optimieren