Core Web Vitals-Felddaten mit Anzeigenmesswerten erfassen

1. Hinweis

In diesem Codelab erfahren Sie, wie Sie Core Web Vitals mit einer vordefinierten Tag-Vorlage für Google Tag Manager (GTM) messen 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 an GA4 abrufen, um Felddaten und Messwerte zur Anzeigenleistung mit einem vordefinierten Looker Studio-Dashboard in Beziehung zu setzen.

Aufgaben

• Importieren Sie ein Tag und richten Sie es in den Google Tag Manager-Container ein.
• Core Web Vitals der Webseite in GA4 messen.
• Richten Sie in Google Tag Manager ein GA4-Ereignis-Tag ein.
• Sieh dir die Web Vitals-Daten in den dataLayer- und 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

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

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

Das Messen von Core Web Vitals über eine GTM-Tag-Vorlage basiert auf der web-vitals-Bibliothek. Laden Sie zuerst die GTM-Tag-Vorlage herunter.

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

Rufen Sie jetzt Ihr Google Tag Manager-Konto auf.

1. Öffnen Sie den Webcontainer.
2. Erstellen Sie einen neuen Arbeitsbereich und geben Sie einen Namen ein (z.B. „Core Web Vitals-Messung“).
3. Gehen Sie zu „Vorlagen“.
4. Klicken Sie im Bereich „Tag-Vorlagen“ klicken Sie auf den Tab "Neu" Schaltfläche.

5. Klicken Sie auf das Menü Weitere Aktionen und wählen Sie Importieren aus.

6. Wählen Sie die zuvor heruntergeladene TPL-Datei von 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. Klicken Sie im Google Tag Manager-Arbeitsbereich auf „Tags“.
2. Klicken Sie auf „Neu“ und dann auf „Tag-Konfiguration“, um das Web Vitals-Tag hinzuzufügen und wählen Sie „Web Vitals“ vom Typ „Benutzerdefiniert“ .
3. Konfigurieren Sie als Nächstes die verschiedenen Einstellungen. Alle Einstellungen werden im GitHub-Repository erläutert. Damit dieses Codelab und das endgültige Dashboard funktionieren, sind die folgenden Einstellungen ausreichend.

4. Wenden Sie einen der Seitenaufruftrigger an, z.B. „Alle Seiten“ auslösen.
5. Fügen Sie bei Bedarf auch Triggerausnahmen hinzu.
6. Geben Sie dem Tag den Namen „Core Web Vitals – Alle Seiten“ und speichern Sie sie.

4. Web Vitals-Daten in „dataLayer“ untersuchen

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 nach einer URL gefragt, über die Sie eine Vorschau der Einrichtung aufrufen und Fehler beheben können. Geben Sie eine URL zu einer Seite an, auf der der Google Tag Manager-Container implementiert ist, und klicken Sie auf „Verbinden“. Ein separater Tab mit der angegebenen URL wird geöffnet.

1. Interagieren Sie mit der Seite, indem Sie scrollen und auf Elemente oder Leerräume klicken.
2. Wechseln Sie dann zurück zum Tab mit dem Tag Assistant und dem Vorschaumodus von Google Tag Manager.
3. Links sehen Sie die verschiedenen Ereignisse, die an die dataLayer gesendet wurden.
4. Prüfen Sie zuerst, ob das Web Vitals-Tag bei Ihrem ausgewählten Seitenaufruftrigger ausgelöst wurde.

5. Außerdem sollten drei „web_vitals“- Dabei repräsentiert jedes Element einen Core Web Vital: LCP, INP und CLS.

6. Klicken Sie auf das erste und öffnen Sie rechts den „API Call“. Tab, in dem Sie die Daten sehen, die von der Tag-Vorlage an das dataLayer gesendet wurden.

7. Überprüfe auch die anderen Einträge der Datei „web_vitals“ Ereignisse. In der web-vitals.js-Dokumentation finden Sie Informationen zu den verschiedenen Datentypen.

5. Web Vitals-Daten an GA4 senden

Damit Sie die Core Web Vitals-Daten aus dem dataLayer abrufen und an GA4 senden können, müssen Sie Folgendes tun:

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

Trigger erstellen

1. Gehen Sie im Google Tag Manager-Arbeitsbereich zu „Trigger“.
2. Fügen Sie einen neuen Trigger hinzu, indem Sie auf „Neu“ und dann auf „Triggerkonfiguration“ klicken und wählen Sie „Benutzerdefiniertes Ereignis“ aus der Liste „Sonstige“ .
3. „web_vitals“ festlegen Geben Sie im Feld „Ereignisname“ einen Namen für den Trigger ein und speichern Sie ihn.

dataLayer-Variablen erstellen

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

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

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

6. Erstellen Sie „webVitalsData.rating“.

7. Erstellen Sie „webVitalsData.delta“.

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

GA4-Ereignis-Tag erstellen

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

1. Klicken Sie im Google Tag Manager-Arbeitsbereich auf „Tags“.
2. Klicken Sie auf „Neu“ und dann auf „Tag-Konfiguration“, um ein GA4-Ereignis-Tag hinzuzufügen. und wählen Sie „Google Analytics: GA4-Ereignis“ vom „Google Analytics“-Tag .
3. Geben Sie Ihre Mess-ID in das entsprechende Feld ein.

4. Für „Ereignisname“ Eingabefeld für die dataLayer-Variable „DLV – webVitalsData.name“ aus einem zuvor erstellten Schritt.

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

6. Registrieren Sie diese Ereignisparameter in der GA4-Benutzeroberfläche als benutzerdefinierte Dimensionen.
7. Wenden Sie zusätzliche Einstellungen basierend auf Ihren GA4-Einrichtungsanforderungen an.
8. „web_vitals“ festlegen benutzerdefiniertes Ereignis als Trigger für das GA4-Tag festlegen.
9. Fügen Sie bei Bedarf auch Triggerausnahmen hinzu.

6. Daten in GA4 prüfen

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

1. Interagieren Sie mit der Seite, indem Sie scrollen und auf Elemente oder Leerräume klicken.
2. Wechseln Sie dann zurück zum Tab mit dem Tag Assistant und dem Vorschaumodus von Google Tag Manager.
3. Klicke links auf die einzelnen „web_vitals“. und bestätigen Sie, dass das GA4 Core Web Vitals-Tag ausgelöst wird.

4. Öffnen Sie das GA4-Tag. Klicken Sie dazu auf die Karte, um zu prüfen, ob die Daten korrekt aus dataLayer abgerufen werden. Stellen Sie sicher, dass Variablen als Werte angezeigt werden.

5. Wechseln Sie jetzt zur GA4-Property und öffnen Sie den Echtzeitbericht.
6. Im Bereich „Ereignisanzahl nach Ereignisname“ Karte, mit der Sie prüfen können, ob Ihre Core Web Vitals-Ereignisse erfolgreich erfasst wurden.

7. Wenn im Echtzeitbericht eine große Datenmenge verarbeitet wird, kann es sein, dass die Ereignisse nicht so leicht identifiziert werden können. Verwenden Sie in diesem Fall den DebugView-Bericht, in dem Sie Daten für ein bestimmtes Gerät sehen können.

7. Einrichtung veröffentlichen

Nachdem Sie die Einrichtung erfolgreich getestet haben, können Sie den Arbeitsbereich veröffentlichen.

1. Öffnen Sie den Google Tag Manager-Arbeitsbereich.
2. Klicken Sie rechts oben auf der Benutzeroberfläche auf „Senden“.
3. Geben Sie einen Versionsnamen und eine Versionsbeschreibung an und klicken Sie auf „Veröffentlichen“, um Ihre Einrichtung zu veröffentlichen.

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

Nach der Erhebung von Core Web Vitals-Daten in GA4 müssen anzeigenbezogene Messwerte auch in GA4 verfügbar sein, damit das Dashboard funktioniert. Verbinden Sie entweder Google Ad Manager und Google AdSense mit GA4 oder nur eine dieser Werbelösungen. Sie benötigen für die Verknüpfung mindestens die Bearbeitungsberechtigung für GA4 und die Administratorberechtigung für Google Ad Manager und Google AdSense.

GA4 mit Google Ad Manager verknüpfen

1. Rufen Sie Ihr Google Ad Manager-Netzwerk auf.
2. Klicken Sie auf „Verwaltung“. -> „Globale Einstellungen“ -> "Einstellungen für Werbenetzwerke".
3. Im Bereich „Berichtseinstellungen“ aktivieren Sie „Berichte zu Google Analytics 4-Properties in Ad Manager-Berichten“.

4. Lesen Sie die Nutzungsbedingungen und klicken Sie auf „Bestätigen“.
5. Speichern Sie die Aktualisierung.
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. Wählen Sie die zu verknüpfende GA4-Property aus.
9. Klicken Sie abschließend auf Speichern.

GA4 mit Google AdSense verknüpfen

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

4. Wählen Sie die zu verknüpfende GA4-Property aus.
5. Klicken Sie auf „Link erstellen“.

9. Daten mit Looker Studio visualisieren

Damit Sie Core Web Vitals-Daten und Anzeigenmesswerte visuell darstellen können, müssen Sie in diesem Schritt ein Looker Studio-Dashboard einrichten. So können Sie Core Web Vitals und Werbeeinnahmen in Beziehung zueinander setzen.

1. Öffnen Sie diese Dashboard-Vorlage für Looker Studio.
2. Kopieren Sie das Dashboard.
3. Aktualisieren Sie die Datenquelle, indem Sie Ihre GA4-Property aus der Drop-down-Liste auswählen.
4. Fertig

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

Auf der ersten Seite des Dashboards finden Sie einen Überblick über Ihre Core Web Vitals-Leistung:

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

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

10. Fazit

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

Weitere Informationen

• Anzeigen effektiv laden, ohne die Seitengeschwindigkeit zu beeinträchtigen
• Largest Contentful Paint optimieren
• Cumulative Layout Shift optimieren
• Interaktion mit nächstem Paint optimieren