Diese Seite wurde von der Cloud Translation API übersetzt.

Leistung mit web-vitals.js, Google Analytics und BigQuery messen

1. Hinweis

Aufgabe

Aufgaben in diesem Codelab:

Google Analytics 4-Property mit BigQuery verknüpfen
Füge die web-vitals-Bibliothek einer Webseite hinzu.
Daten vom Typ „web-vitals“ vorbereiten und an Google Analytics senden.
Core Web Vitals-Daten in BigQuery abfragen.
Erstellen Sie ein Dashboard in Google Data Studio, um Ihre Core Web Vitals-Daten zu visualisieren.

Voraussetzungen

Ein Google Analytics-Konto mit einer GA4-Property.
Ein Google Cloud-Konto.
Ein Chromium-basierter Webbrowser wie Google Chrome oder Microsoft Edge. Weitere Informationen dazu, warum Sie einen Chromium-basierten Webbrowser benötigen, finden Sie unter Browserunterstützung.
Einen Texteditor Ihrer Wahl, z. B. Sublime Text oder Visual Studio Code.
Hosten Sie Ihre Testseiten, um zu sehen, wie die web-vitals-Bibliothek funktioniert. Sie können einen lokalen Server verwenden, um statische Webseiten bereitzustellen, oder Ihre Testseiten auf GitHub hosten.
Eine öffentliche Website, auf der Sie Ihren Analysecode bereitstellen können. Durch das Einführen Ihres Codes in die Produktion werden die BigQuery- und Data Studio-Beispiele am Ende dieses Codelabs verständlicher.
Kenntnisse in HTML, CSS, JavaScript und Chrome-Entwicklertools.

Vorbereitung

Verknüpfen Sie zuerst Google Analytics 4 mit BigQuery, damit Sie mit der Leistungsanalyse beginnen können, sobald der Code online ist.

Folgen Sie der Anleitung in der Google Analytics-Hilfe, um Ihre GA4-Property mit BigQuery zu verknüpfen.

Ihre Google Analytics-Property ist jetzt bereit, Ereignisdaten nach BigQuery zu exportieren. Binden Sie die web-vitals-Bibliothek in Ihre Website ein.

2. Webvitals-Bibliothek und gtag einer Webseite hinzufügen

Füge zuerst die web-vitals-Bibliothek einer Webseite hinzu.

Öffnen Sie eine Seitenvorlage, der Sie die web-vitals-Bibliothek hinzufügen möchten. In diesem Beispiel verwenden wir eine einfache Seite:

basic.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>
</body>
</html>

Fügen Sie den Quellcode in eine leere Datei in Ihrem Texteditor ein.
Speichern Sie die Datei lokal als basic.html.
Kopieren Sie dieses Modulskript und fügen Sie es direkt vor dem schließenden </body>-Tag ein. Mit diesem Script wird die web-vitals-Bibliothek aus einem Content Delivery Network geladen.

basic.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {onCLS, onINP, onLCP} from 'https://unpkg.com/web-vitals@4/dist/web-vitals.attribution.js?module';

  onCLS(console.log);
  onINP(console.log);
  onLCP(console.log);
</script>
</body>
</html>

Speichern Sie die Datei.

Du hast der Webseite die web-vitals-Bibliothek hinzugefügt.

3. Core Web Vitals der Webseite messen

Core Web Vitals geben Aufschluss über die Nutzererfahrung, die über Chrome oder die web-vitals-Bibliothek in Chromium-Browsern erfasst wird. Wenn Sie web-vitals für die Produktion freigeben, erhalten Sie eine Vielzahl von Ergebnissen basierend auf den der Verbindungsgeschwindigkeit, der Geräteleistung und der Art und Weise, wie sie mit Ihrer Website interagieren. Um die Funktionen der web-vitals-Bibliothek zu demonstrieren, simulieren wir eine Nutzererfahrung mit einer langsamen Verbindung.

Öffnen Sie die gespeicherte Datei in Ihrem Webbrowser.
Klicken Sie mit der rechten Maustaste auf die Webseite.
Klicken Sie auf Untersuchen, um die Google Chrome-Entwicklertools zu öffnen.

Klicken Sie auf den Tab Console > Einstellungen in der Konsole

Klicken Sie das Kästchen Preserve log (Protokoll beibehalten) an, damit Protokolle beim Aktualisieren der Webseite beibehalten werden.

Klicken Sie auf den Tab Netzwerk. Online > Langsames 3G, um eine langsame Netzwerkverbindung zu simulieren.

Klicken Sie auf den Tab Console.
Klicken Sie auf eine beliebige Stelle auf der Webseite, um zu erzwingen, dass der Messwert für Largest Contentful Paint (LCP) gedruckt wird.
Klicken Sie auf Diese Seite neu laden , um zu erzwingen, dass die Messwerte für Cumulative Layout Shift (CLS) und Interaction to Next Paint (INP) gedruckt werden.

Klicken Sie auf den Tab Netzwerk. Online > Schnelles 3G, um eine schnelle Netzwerkverbindung zu simulieren
Klicken Sie auf den Tab Console.
Klicken Sie auf eine beliebige Stelle auf der Webseite, um zu erzwingen, dass der LCP-Messwert noch einmal gedruckt wird.

Klicken Sie auf „Diese Seite aktualisieren“ , um zu erzwingen, dass die Messwerte für CLS und INP noch einmal gedruckt werden.

Fertig! Du hast die Core Web Vitals der Webseite gemessen.

4. Web Vitals-Daten im Detail untersuchen

Für jedes von Ihnen gemessene Core Web Vitals-Ereignis stehen in den zurückgegebenen Daten eine Vielzahl von Informationen zur Verfügung, mit denen Sie Leistungsengpässe beheben können. Jedes web-vitals-Ereignis enthält ein entries-Array mit Informationen zu den Ereignissen, die zum aktuellen Messwert beitragen.

CLS `entries`

Wenn Sie die Eigenschaft entries des von onCLS() protokollierten Objekts erweitern, erhalten Sie eine Liste mit LayoutShift-Einträgen. Jede LayoutShift enthält eine value-Eigenschaft, die den Layout Shift-Wert widerspiegelt, und ein sources-Array, mit dem wir sehen können, welche Elemente verschoben wurden.

In diesem Beispiel wurden zwei Layoutverschiebungen vorgenommen, durch die ein h1-Element auf der Seite verschoben wurde. Die Eigenschaft currentRect gibt an, wo sich das Element jetzt befindet, und das Element previousRect gibt an, wo es zuvor war.

LCP `entries`

Wenn Sie die Eintrageigenschaft des von onLCP() protokollierten Objekts erweitern, sehen Sie, welche Elemente vor der Meldung des endgültigen Werts für Largest Contentful Paint infrage kamen.

In diesem Beispiel enthält das Array entries eine Liste aller LCP-Kandidaten in chronologischer Reihenfolge. In diesem Fall wurde zuerst ein h1-Element gerendert, gefolgt von einem img-Element. img war der Largest Contentful Paint. Das gemeldete LCP-Element ist immer das letzte Element im Array.

INP `entries`

Wenn Sie die Eigenschaft entries des von onINP(), protokollierten Objekts erweitern, wird ein Array mit dem Eintrag PerformanceEventTiming für die Interaktion angezeigt, die als Nächstes auf der Seite dargestellt werden soll.

Das Attribut name gibt an, welche Art von Nutzereingabe den Timer für die Verfügbarkeit des Hauptthreads ausgelöst hat. Die value, die von web-vitals gemeldet wird, ist die Verzögerung, die als duration-Eigenschaft des PerformanceEventTiming-Eintrags angegeben ist und von Mikrosekunden in Millisekunden umgewandelt wird. In diesem Fall beträgt der gemessene INP 48 Millisekunden.

5. Web Vitals-Daten vorbereiten und an Google Analytics 4 senden

Bevor Sie Daten vom Typ „web-vitals“ an Google Analytics 4 senden können, müssen sie in ein Format konvertiert werden, das mit GA4 empfangen werden kann.

Debug-Informationen für jede CWV strukturieren

Der letzte Schritt, bevor dieser Code an Google Analytics gesendet wird, besteht darin, die Informationen aus den Einträgen zu strukturieren, einschließlich der von den oben genannten Funktionen zurückgegebenen Informationen.

diagnostics.html

  function getDebugInfo(name, attribution) {
    // In some cases there won't be any entries (e.g. if CLS is 0,
    // or for LCP after a bfcache restore), so we have to check first.
    if (attribution) {
      if (name === 'LCP') {
        return {
          debug_url: attribution.url,
          debug_time_to_first_byte: attribution.timeToFirstByte,
          debug_resource_load_delay: attribution.resourceLoadDelay,
          debug_resource_load_time: attribution.resourceLoadTime,
          debug_element_render_delay: attribution.elementRenderDelay,
          debug_target: attribution.element || '(not set)',
        };
      } else if (name === 'INP') {
        return {
          debug_event: attribution.interactionType,
          debug_time: Math.round(attribution.interactionTime),
          debug_load_state: attribution.loadState,
          debug_target: attribution.interactionTarget || '(not set)',
          debug_interaction_delay: Math.round(attribution.inputDelay),
          debug_processing_duration: Math.round(attribution.processingDuration),
          debug_presentation_delay:  Math.round(attribution.presentationDelay),
        };
      } else if (name === 'CLS') {
        return {
          debug_time: attribution.largestShiftTime,
          debug_load_state: attribution.loadState,
          debug_target: attribution.largestShiftTarget || '(not set)',
        }
      }
    }
    // Return default/empty params in case there is no attribution.
    return {
      debug_target: '(not set)',
    };
  }
  
  function sendToGoogleAnalytics({ name, delta, value, id, entries, attribution }) {
    gtag('event', name, {
      // Built-in params:
      value: delta, // Use `delta` so the value can be summed.
      // Custom params:
      metric_id: id, // Needed to aggregate events.
      metric_value: value, // Value for querying in BQ
      metric_delta: delta, // Delta for querying in BQ
      // Send the returned values from getDebugInfo() as custom parameters
        ...getDebugInfo(name, attribution)
    });
  }

Daten an Google Analytics senden

Erstellen Sie abschließend eine Funktion, die Parameter aus dem web-vitals-Ereignis an Google Analytics übergibt.

diagnostics.html

function sendToGoogleAnalytics({ name, delta, value, id, entries, attribution }) {
  gtag('event', name, {
    // Built-in params:
    value: delta, // Use `delta` so the value can be summed.
    // Custom params:
    metric_id: id, // Needed to aggregate events.
    metric_value: value, // Value for querying in BQ
    metric_delta: delta, // Delta for querying in BQ
    // Send the returned values from getDebugInfo() as custom parameters
      ...getDebugInfo(name, attribution)
  });
}

Registrieren Sie die Funktion bei jeder der web-vitals-Funktionen. Diese werden ausgelöst, wenn der Browser bereit ist, jedes Ereignis zu erfassen:

diagnostics.html

onLCP(sendToGoogleAnalytics);
onINP(sendToGoogleAnalytics);
onCLS(sendToGoogleAnalytics);

Gut gemacht! Sie senden jetzt web-vitals Ereignisse an Google Analytics.

6. Prüfen, ob die Web Vitals-Daten in Google Analytics erfasst werden

So sorgen Sie dafür, dass Ihre Ereignisse in Ihrer Google Analytics 4-Property erfasst werden:

Öffnen Sie Ihre Google Analytics 4-Property und rufen Sie Berichte auf.

Wählen Sie Echtzeit aus.

Aktualisieren Sie Ihre Testseite einige Male und klicken Sie zwischen den einzelnen Aktualisierungen auf die Seite, um INP-Ereignisse auszulösen.
Suchen Sie in der Benutzeroberfläche Echtzeitübersicht nach dem Bereich Ereignisanzahl nach Ereignisname. Sie sollten LCP-, INP- und CLS-Ereignisse sehen.

Klicken Sie auf einen Ereignisnamen, um die mit diesen Ereignissen übergebenen Parameter aufzurufen.

Klicken Sie auf die entsprechenden Parameterschlüssel, um eine Zusammenfassung der Werte aufzurufen, die von Google Analytics empfangen wurden.

Sie können Ihren Debug-Informationen auch andere Daten hinzufügen, z. B. Namen von Seitenvorlagen oder andere Seitenereignisse, die für INP relevant sind, die weiter oben in diesem Codelab behandelt wurden. Ändern Sie dazu einfach die return-Anweisungen in der Funktion getDebugInfo().

Wenn Sie mit den Daten von Ihren Testseiten zufrieden sind, implementieren Sie den neuen Google Analytics-Code für die Produktion auf Ihrer Website und fahren Sie mit dem nächsten Schritt fort.

7. Daten in BigQuery abfragen

Sobald Ihr Google Analytics-Code einige Tage lang aktiv war, können Sie mit dem Abfragen der Daten in BigQuery beginnen. Prüfen Sie zuerst, ob die Daten an BigQuery übertragen werden.

Öffnen Sie die Google Cloud Console und wählen Sie oben auf dem Bildschirm Ihr Projekt aus dem Drop-down-Menü aus.
Klicken Sie im Navigationsmenü oben links auf BigQuery unter der Überschrift Analytics.
Maximieren Sie im Bereich Explorer Ihr Projekt, um das Google Analytics-Dataset zu sehen. Der Name des Datasets lautet analytics_, gefolgt von Ihrer Google Analytics 4-Property-ID (z.B. analytics_229787100).
Maximieren Sie das Dataset. Daraufhin sollte die Tabelle events_ angezeigt werden. Die Zahl in Klammern gibt die Anzahl der Tage an, die für die Abfrage zur Verfügung stehen.

Unterabfrage zur Auswahl nur CWV-Ereignissen

Wenn Sie ein Dataset abfragen möchten, das nur unsere CWV-Ereignisse enthält, beginnen Sie mit einer Unterabfrage, mit der die LCP-, CLS- und INP-Ereignisse der letzten 28 Tage ausgewählt werden. Dabei wird speziell nach dem letzten gemeldeten Wert für jede web-vitals-Ereignis-ID mit dem metric_id-Schlüssel gesucht, damit dieselben CWV-Ereignisse nicht mehr als einmal gezählt werden.

# Subquery all Web Vitals events from the last 28 days
WITH web_vitals_events AS (
 SELECT event_name as metric_name, * EXCEPT(event_name, is_last_received_value) FROM
 (
   SELECT *
   , IF (ROW_NUMBER() OVER (
     PARTITION BY (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric_id')
     ORDER BY (SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = 'metric_value') DESC
   ) = 1, true, false) AS is_last_received_value
   # Make sure to update your project ID and GA4 property ID here!
   FROM `YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_*`
   WHERE event_name in ('CLS', 'INP', 'LCP') AND
     _TABLE_SUFFIX BETWEEN FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 28 DAY)) AND FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY))
  )
  WHERE is_last_received_value
)

Dies bildet die Grundlage für alle Ihre Abfragen für dieses Dataset. Ihre Hauptabfrage wird an der temporären Tabelle web_vitals_events ausgeführt.

Struktur von GA4-Ereignissen

Alle Google Analytics 4-Ereignisdaten werden in einer STRUCT der event_params-Spalte gespeichert. Jeder Ereignisparameter, den Sie auf Ihrer Website an GA4 übergeben, wird durch einen Schlüssel dargestellt. Der Wert ist eine STRUCT mit einem Schlüssel für jeden möglichen Datentyp. Im obigen Beispiel könnte der Schlüssel metric_value ein int_value oder ein double_value haben. Daher wird die Funktion COALESCE() verwendet. Um die zuvor übergebene debug_target abzurufen, wählen Sie in debug_target den Schlüssel string_value aus.

...
(SELECT value.string_value FROM UNNEST(event_params) WHERE key = "debug_target") as debug_target
...

Seiten und Elemente mit der geringsten Leistung ermitteln

Die debug_target ist ein CSS-Selektorstring, der dem Element auf der Seite entspricht, das für den Messwert am relevantesten ist.

Bei CLS steht debug_target für das größte Element aus dem größten Layout Shift, das zum CLS-Wert beigetragen hat. Wenn keine Elemente verschoben wurden, ist der debug_target-Wert null.

Bei der folgenden Abfrage werden die Seiten vom schlechtesten bis zum besten anhand ihrer CLS im 75. Perzentil aufgelistet nach debug_target gruppiert:

# Main query logic
SELECT
  page_path,
  debug_target,
  APPROX_QUANTILES(metric_value, 100)[OFFSET(75)] AS metric_p75,
  COUNT(1) as page_views
FROM (
  SELECT
    REGEXP_SUBSTR((SELECT value.string_value FROM UNNEST(event_params) WHERE key = "page_location"), r'\.com(\/[^?]*)') AS page_path,
    (SELECT value.string_value FROM UNNEST(event_params) WHERE key = "debug_target") as debug_target,
    ROUND((SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = "metric_value"), 3) AS metric_value,
    *
  FROM web_vitals_events
  WHERE metric_name = 'CLS'
)
GROUP BY 1, 2
# OPTIONAL: You may want to limit your calculations to pages with a 
# minimum number of pageviews to reduce noise in your reports. 
# HAVING page_views > 50
ORDER BY metric_p75 DESC

Wenn Sie wissen, welche Elemente auf der Seite sich verschieben, sollte es wesentlich einfacher sein, die Ursache des Problems zu identifizieren und zu beheben.

Beachten Sie, dass die hier aufgeführten Elemente möglicherweise nicht die Elemente sind, die sich ändern, wenn Sie Fehler auf Ihren Seiten lokal beheben. Deshalb ist es so wichtig, diese Daten von vornherein zu erfassen. Es ist sehr schwer, Dinge zu beheben, von denen Sie nicht bemerken, dass es sich um Probleme handelt!

Fehler bei anderen Messwerten beheben

Die obige Abfrage zeigt die Ergebnisse für den CLS-Messwert. Sie können aber genau die gleiche Technik verwenden, um Berichte zu den Debug-Zielen für LCP und INP zu erstellen. Ersetzen Sie einfach die WHERE-Klausel durch den entsprechenden Messwert für die Fehlerbehebung:

# Replace:
# WHERE metric_name = 'CLS'
# With:
WHERE metric_name = 'LCP'

8. Abfrageergebnisse in Data Studio visualisieren

Mit BigQuery lassen sich Abfrageergebnisse schnell über Data Studio visualisieren. Data Studio ist ein kostenloses Tool für die Datenvisualisierung und das Dashboarding. Wenn Sie die Abfrageergebnisse nach dem Ausführen der Abfrage in der BigQuery-Benutzeroberfläche visualisieren möchten, klicken Sie auf Daten auswerten und wählen Sie Mit Data Studio auswerten aus.

Option „Mit Data Studio ansehen“ in BigQuery

Dadurch wird eine direkte Verknüpfung von BigQuery zu Data Studio in der explorativen Datenanalyse erstellt. In dieser Ansicht können Sie die Felder auswählen, die visualisiert werden sollen, Diagrammtypen auswählen, Filter einrichten und Ad-hoc-Diagramme für eine schnelle visuelle Analyse erstellen. Aus den obigen Abfrageergebnissen können Sie dieses Liniendiagramm erstellen, um den Trend der LCP-Werte im Zeitverlauf zu sehen:

Liniendiagramm der täglichen LCP-Werte in Data Studio

Dank dieser direkten Verknüpfung zwischen BigQuery und Data Studio können Sie schnell Diagramme aus allen Ihren Abfragen erstellen und visuelle Analysen durchführen. Wenn Sie jedoch zusätzliche Analysen durchführen möchten, können Sie sich mehrere Diagramme in einem interaktiven Dashboard ansehen, um eine ganzheitlichere Ansicht zu erhalten oder die Daten aufzuschlüsseln. Mit einem praktischen Dashboard müssen Sie nicht jedes Mal Abfragen schreiben und Diagramme manuell generieren, wenn Sie Ihre Messwerte analysieren möchten.

In Data Studio können Sie ein Dashboard mit dem nativen BigQuery-Connector erstellen. Rufen Sie dazu datastudio.google.com auf, erstellen Sie eine neue Datenquelle, wählen Sie den BigQuery-Connector und dann das Dataset aus, mit dem Sie arbeiten möchten:

Nativen BigQuery-Connector in Data Studio verwenden

9. Web Vitals-Daten erfassen

Wenn Sie wie oben beschrieben Dashboards mit den Web Vitals-Ereignisdaten erstellen, ist es nicht effizient, das Google Analytics 4-Export-Dataset direkt zu verwenden. Aufgrund der Struktur der GA4-Daten und der erforderlichen Vorverarbeitung für die Web Vitals-Messwerte werden Teile Ihrer Abfrage am Ende mehrfach ausgeführt. Dies führt zu zwei Problemen: der Dashboard-Leistung und den BigQuery-Kosten.

Sie können den BigQuery-Sandbox-Modus kostenlos nutzen. Bei der kostenlosen Nutzungsstufe von BigQuery ist das erste Terabyte (1 TB) an verarbeiteten Abfragedaten pro Monat kostenlos. Bei den in diesem Beitrag beschriebenen Analysemethoden sollten Sie in der Lage sein, dieses kostenlose Limit jeden Monat einzuhalten, es sei denn, Sie verwenden ein sehr großes Dataset oder fragen das Dataset regelmäßig intensiv ab. Wenn Sie jedoch eine stark frequentierte Website haben und regelmäßig verschiedene Messwerte über ein schnelles interaktives Dashboard überwachen möchten, empfehlen wir, Ihre Web Vitals-Daten vorzuverarbeiten und zu erfassen und gleichzeitig BigQuery-Effizienzfunktionen wie Partitionierung, Clustering und Caching zu nutzen.

Mit dem folgenden Skript werden Ihre BigQuery-Daten (Quelltabelle) vorverarbeitet und eine materialisierte Tabelle (Zieltabelle) erstellt.

# Materialize Web Vitals metrics from GA4 event export data

# Replace target table name
CREATE OR REPLACE TABLE YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.web_vitals_summary
  PARTITION BY DATE(event_timestamp)
AS
SELECT
  ga_session_id,
  IF(
    EXISTS(SELECT 1 FROM UNNEST(events) AS e WHERE e.event_name = 'first_visit'),
    'New user',
    'Returning user') AS user_type,
  IF(
    (SELECT MAX(session_engaged) FROM UNNEST(events)) > 0, 'Engaged', 'Not engaged')
    AS session_engagement,
  evt.* EXCEPT (session_engaged, event_name),
  event_name AS metric_name,
  FORMAT_TIMESTAMP('%Y%m%d', event_timestamp) AS event_date
FROM
  (
    SELECT
      ga_session_id,
      ARRAY_AGG(custom_event) AS events
    FROM
      (
        SELECT
          ga_session_id,
          STRUCT(
            country,
            device_category,
            device_os,
            traffic_medium,
            traffic_name,
            traffic_source,
            page_path,
            debug_target,
            event_timestamp,
            event_name,
            metric_id,
            IF(event_name = 'LCP', metric_value / 1000, metric_value) AS metric_value,
            user_pseudo_id,
            session_engaged,
            session_revenue) AS custom_event
        FROM
          (
            SELECT
              (SELECT value.int_value FROM UNNEST(event_params) WHERE key = 'ga_session_id')
                AS ga_session_id,
              (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric_id')
                AS metric_id,
              ANY_VALUE(device.category) AS device_category,
              ANY_VALUE(device.operating_system) AS device_os,
              ANY_VALUE(traffic_source.medium) AS traffic_medium,
              ANY_VALUE(traffic_source.name) AS traffic_name,
              ANY_VALUE(traffic_source.source) AS traffic_source,
              ANY_VALUE(
                REGEXP_SUBSTR(
                  (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'page_location'),
                  r'^[^?]+')) AS page_path,
              ANY_VALUE(
                (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'debug_target'))
                AS debug_target,
              ANY_VALUE(user_pseudo_id) AS user_pseudo_id,
              ANY_VALUE(geo.country) AS country,
              ANY_VALUE(event_name) AS event_name,
              SUM(ecommerce.purchase_revenue) AS session_revenue,
              MAX(
                (
                  SELECT
                    COALESCE(
                      value.double_value, value.int_value, CAST(value.string_value AS NUMERIC))
                  FROM UNNEST(event_params)
                  WHERE key = 'session_engaged'
                )) AS session_engaged,
              TIMESTAMP_MICROS(MAX(event_timestamp)) AS event_timestamp,
              MAX(
                (
                  SELECT COALESCE(value.double_value, value.int_value)
                  FROM UNNEST(event_params)
                  WHERE key = 'metric_value'
                )) AS metric_value,
            FROM
              # Replace source table name
              `YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_*`
            WHERE
              event_name IN ('LCP', 'INP', 'CLS', 'first_visit', 'purchase')
            GROUP BY
              1, 2
          )
      )
    WHERE
      ga_session_id IS NOT NULL
    GROUP BY ga_session_id
  )
CROSS JOIN UNNEST(events) AS evt
WHERE evt.event_name NOT IN ('first_visit', 'purchase');

Dieses materialisierte Dataset hat mehrere Vorteile:

Die Datenstruktur ist vereinfacht und lässt sich leichter abfragen.
Es werden nur die Web Vitals-Ereignisse aus dem ursprünglichen GA4-Dataset beibehalten.
Informationen zur Sitzungs-ID, zum Nutzertyp (neu oder wiederkehrend) und zu den Sitzungsinteraktionen sind direkt in Spalten verfügbar.
Die Tabelle ist nach Datum partitioniert und nach Messwertnamen geclustert. Dadurch wird in der Regel die für jede Abfrage verarbeitete Datenmenge reduziert.
Da Sie für die Abfrage dieser Tabelle keine Platzhalter verwenden müssen, können Abfrageergebnisse bis zu 24 Stunden im Cache gespeichert werden. Dadurch werden die Kosten für die Wiederholung derselben Abfrage reduziert.
Wenn Sie BigQuery BI Engine verwenden, können Sie optimierte SQL-Funktionen und -Operatoren für diese Tabelle ausführen.

Sie können diese materialisierte Tabelle direkt über die BigQuery-Benutzeroberfläche abfragen oder mit dem BigQuery-Connector in Data Studio verwenden.

Regelmäßige Materialisierungsjobs ausführen

Wenn Sie die obige Abfrage ohne Zeitraum ausführen, wird sie für Ihr gesamtes Google Analytics-Dataset ausgeführt. Da Sie große Mengen an Verlaufsdaten erneut verarbeiten, sollten Sie dies vermeiden. Sie können Ihre Abfrage so aktualisieren, dass nur die Daten des letzten Tages angehängt werden. Dazu entfernen Sie die CREATE or REPLACE TABLE-Anweisung am Anfang der Abfrage und fügen der WHERE-Klausel in der Unterabfrage ein zusätzliches Kriterium für die Tabelle events_intraday_ hinzu:

FROM
  # Replace source table name
  `YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_intraday_*`
WHERE
  event_name IN ('LCP', 'INP', 'CLS', 'first_visit', 'purchase')
  # The _TABLE_SUFFIX replaces the asterisk (*) in the table name
  # 
  AND _TABLE_SUFFIX = FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY)

Diese Abfrage gibt nur Daten vom Vortag zurück. Anschließend können Sie mit der BigQuery-Konsole die tägliche Ausführung Ihrer Abfrage planen.

10. Daten in Google Data Studio visualisieren

Google Data Studio unterstützt nativ das Lesen von Daten aus Google BigQuery. Da jetzt web-vitals-Daten aus Google Analytics 4 in BigQuery erfasst werden, können Sie den BigQuery-Connector von Data Studio verwenden, um die materialisierte Tabelle direkt zu lesen.

Web Vitals-Connector verwenden

Da das Erstellen eines Dashboards von Grund auf zeitaufwändig ist, haben wir ein Lösungspaket entwickelt, das eine Vorlage für das Dashboard für Sie erstellt. Prüfen Sie zuerst, ob Sie Ihre Web Vitals-Tabelle mithilfe der obigen Abfrage materialisiert haben. Greifen Sie dann über diesen Link auf den Web Vitals-Connector für Data Studio zu: goo.gle/web-vitals-connector.

Nach der einmaligen Autorisierung sollte der folgende Konfigurationsbildschirm angezeigt werden:

Bildschirm für die Web Vitals-Connector-Autorisierung

Geben Sie die ID der materialisierten BigQuery-Tabelle (d.h. die Zieltabelle) und die ID Ihres BigQuery-Abrechnungsprojekts an. Nachdem Sie auf VERBINDEN geklickt haben, wird in Data Studio ein neues Dashboard mit Vorlage erstellt und Ihre Daten werden damit verknüpft. Sie können das Dashboard nach Belieben bearbeiten, ändern und freigeben. Wenn Sie ein Dashboard einmal erstellen, müssen Sie den Connector-Link nur dann erneut aufrufen, wenn Sie mehrere Dashboards aus verschiedenen Datasets erstellen möchten.

Im Dashboard navigieren

Während Sie im Dashboard navigieren, können Sie auf dem Tab „Zusammenfassung“ die täglichen Trends der Web Vitals-Messwerte und einige Nutzungsdaten für Ihre Website wie Nutzer und Sitzungen sehen.

Auf dem Tab „Nutzeranalyse“ können Sie einen Messwert auswählen und eine Aufschlüsselung des Perzentilwerts der Messwerte sowie der Nutzeranzahl nach Nutzungs- und Geschäftsmesswerten abrufen.

Mithilfe des Tabs „Seitenpfadanalyse“ können Sie Problembereiche auf Ihrer Website identifizieren. Hier können Sie einen Messwert auswählen, um sich die Übersicht anzusehen. Außerdem sehen Sie eine Streukarte aller Seitenpfade mit dem Perzentilwert auf der Y-Achse und der Datensatzanzahl auf der X-Achse. Mithilfe der Streukarte lassen sich Seiten identifizieren, deren Messwerte niedriger als erwartet sind. Nachdem Sie die Seiten ausgewählt haben, können Sie den Problembereich mit dem Streudiagramm in der Tabelle „Seitenpfad“ oder in der Tabelle „Fehlerbehebungsziel“ weiter aufschlüsseln.

Der Tab "Umsatzanalyse" ist ein Beispiel dafür, wie Sie Ihr Unternehmen und Ihre Leistungsmesswerte zentral überwachen können. In diesem Abschnitt werden alle Sitzungen dargestellt, in denen der Nutzer etwas gekauft hat. Sie können den erzielten Umsatz mit der Nutzererfahrung während einer bestimmten Sitzung vergleichen.

11. Weitere Ressourcen

Sie haben dieses Codelab erfolgreich abgeschlossen! Sie sollten jetzt die Core Web Vitals-Leistung auf Ihrer Website mit einem hohen Detaillierungsgrad im Blick behalten können. Sie sollten auch in der Lage sein, bestimmte Seitentypen und -elemente auf Ihrer Website zu identifizieren, die hohe CWVs verursachen, damit Sie sich auf Ihre Optimierungen konzentrieren können.

Weitere Informationen

Auf web.dev findest du eine Vielzahl von Artikeln und Fallstudien mit Strategien zur Verbesserung von Core Web Vitals. Beginnen Sie mit den Artikeln zur Optimierung für jeden Messwert:

Referenzdokumente

Dieses Codelab basiert auf zwei web.dev-Artikeln:
Artikel zur Messung von Web Vitals in der Praxis
Im Artikel zur Verwendung von Web Vitals-GA4-Daten in BigQuery finden Sie viele weitere Abfragebeispiele, die Sie verwenden können.
Weitere Informationen zu GA4 > Die BigQuery Export-Integration finden Sie in der Google Analytics-Hilfe.

Leistung mit web-vitals.js, Google Analytics und BigQuery messen

1. Hinweis

Aufgabe

Voraussetzungen

Vorbereitung

2. Webvitals-Bibliothek und gtag einer Webseite hinzufügen

basic.html

basic.html

basic.html

3. Core Web Vitals der Webseite messen

4. Web Vitals-Daten im Detail untersuchen

CLS entries

LCP entries

INP entries

5. Web Vitals-Daten vorbereiten und an Google Analytics 4 senden

Debug-Informationen für jede CWV strukturieren

diagnostics.html

Daten an Google Analytics senden

diagnostics.html

diagnostics.html

6. Prüfen, ob die Web Vitals-Daten in Google Analytics erfasst werden

7. Daten in BigQuery abfragen

Unterabfrage zur Auswahl nur CWV-Ereignissen

Struktur von GA4-Ereignissen

Seiten und Elemente mit der geringsten Leistung ermitteln

Fehler bei anderen Messwerten beheben

8. Abfrageergebnisse in Data Studio visualisieren

9. Web Vitals-Daten erfassen

Regelmäßige Materialisierungsjobs ausführen

10. Daten in Google Data Studio visualisieren

Web Vitals-Connector verwenden

Im Dashboard navigieren

11. Weitere Ressourcen

Weitere Informationen

Referenzdokumente

CLS `entries`

LCP `entries`

INP `entries`