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

1. Hinweis

Aufgaben

In diesem Codelab werden Sie Folgendes tun:

Verknüpfen Sie Ihre Google Analytics 4-Property mit BigQuery.
Fügen Sie die web-vitals-Bibliothek einer Webseite hinzu.
web-vitals-Daten 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

Sie haben 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.
Ein Texteditor Ihrer Wahl, z. B. Sublime Text oder Visual Studio Code.
Sie benötigen einen Ort, an dem Sie Ihre Testseiten hosten können, 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. Wenn Sie Ihren Code in die Produktion bringen, werden die BigQuery- und Data Studio-Beispiele am Ende dieses Codelabs verständlicher.
Kenntnisse von HTML, CSS, JavaScript und den Chrome-Entwicklertools

Vorbereitung

Verknüpfen Sie zuerst Google Analytics 4 mit BigQuery, damit Sie die Leistung analysieren können, sobald Ihr Code live geht.

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

Nachdem Ihre Google Analytics-Property für den Export von Ereignisdaten nach BigQuery eingerichtet ist, müssen Sie die web-vitals-Bibliothek auf Ihrer Website einbinden.

2. Web-Vitals-Bibliothek und gtag auf einer Webseite einfügen

Fügen Sie zuerst die web-vitals-Bibliothek zu 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

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

Der resultierende Code sollte in etwa so aussehen.

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.

Sie haben die web-vitals-Bibliothek zur Webseite hinzugefügt.

3. Core Web Vitals einer Webseite messen

Core Web Vitals sind ein Maß für die Nutzererfahrung, die über Chrome oder die web-vitals-Bibliothek in Chromium-Browsern erfasst wird. Wenn Sie web-vitals in der Produktion veröffentlichen, sehen Sie eine Vielzahl von Ergebnissen, die auf den Verbindungsgeschwindigkeiten der Nutzer, der Geräteleistung und der Art und Weise basieren, 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 > Console settings .

Aktivieren Sie das Kästchen Protokoll beibehalten, 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 den Messwert für Largest Contentful Paint (LCP) auszugeben.
Klicken Sie auf Diese Seite neu laden , um die Messwerte für Cumulative Layout Shift (CLS) und Interaction to Next Paint (INP) zu erzwingen.

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 die Ausgabe des LCP-Messwerts zu erzwingen.

Klicken Sie auf „Diese Seite neu laden“ , um die Messwerte für CLS und INP noch einmal auszugeben.

Geschafft! Sie haben die Core Web Vitals der Webseite gemessen.

4. Web-Vitals-Daten genauer ansehen

Für jedes der Core Web Vitals-Ereignisse, die Sie messen, sind in den zurückgegebenen Daten viele Informationen verfügbar, 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 entries-Property des von onCLS() protokollierten Objekts maximieren, wird eine Liste von LayoutShift-Einträgen angezeigt. Jedes LayoutShift enthält ein value-Attribut, das den Layout Shift-Wert widerspiegelt, und ein sources-Array, mit dem wir sehen können, welche Elemente verschoben wurden.

In diesem Beispiel sind zwei Layoutverschiebungen aufgetreten, bei denen jeweils ein h1-Element auf der Seite verschoben wurde. Das Attribut currentRect gibt an, wo sich das Element jetzt befindet, und das Attribut previousRect gibt an, wo es sich zuvor befand.

LCP `entries`

Wenn wir die „entries“-Property des von onLCP() protokollierten Objekts maximieren, sehen wir, welche Elemente Kandidaten für Largest Contentful Paint waren, bevor der endgültige Wert gemeldet wurde.

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

INP `entries`

Wenn Sie die entries-Eigenschaft des von onINP(), protokollierten Objekts maximieren, wird ein Array mit dem PerformanceEventTiming-Eintrag für die Interaktion bis zum nächsten Rendern auf der Seite angezeigt.

Die Eigenschaft 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-Property des PerformanceEventTiming-Eintrags angegeben ist und von Mikrosekunden in Millisekunden umgerechnet wurde. In diesem Fall beträgt der gemessene INP 48 Millisekunden.

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

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

Informationen zur Fehlerbehebung für jeden CWV strukturieren

Bevor Sie diesen Code an Google Analytics senden, müssen Sie die Informationen aus den Einträgen strukturieren, einschließlich der Informationen, die von den oben genannten Funktionen zurückgegeben werden.

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 schließlich eine Funktion, die Parameter aus dem web-vitals-Ereignis übernimmt und 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 mit jeder der web-vitals-Funktionen, die ausgelöst wird, wenn der Browser bereit ist, die einzelnen Ereignisse 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 mehrmals und klicken Sie zwischen den Aktualisierungen auf die Seite, um INP-Ereignisse auszulösen.
Suchen Sie in der Benutzeroberfläche des Berichts Echtzeit-Übersicht nach dem Abschnitt Ereignisanzahl nach Ereignisname. Sie sollten LCP-, INP- und CLS-Ereignisse sehen.

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

Klicken Sie auf die Parameterschlüssel, um eine Zusammenfassung der in Google Analytics empfangenen Werte aufzurufen.

Sie können Ihren Debugging-Informationen auch andere Daten hinzufügen, z. B. Namen von Seitenvorlagen oder die anderen Seitenereignisse, die für INP relevant sind und die wir bereits in diesem Codelab besprochen haben. Ändern Sie einfach die return-Anweisungen in der Funktion getDebugInfo().

Wenn Sie mit den Daten Ihrer Testseiten zufrieden sind, stellen Sie den neuen GA-Code auf Ihrer Website bereit und fahren Sie mit dem nächsten Schritt fort.

7. Daten in BigQuery abfragen

Nachdem Ihr Google Analytics-Code einige Tage aktiv war, können Sie die Daten in BigQuery abfragen. Prüfen Sie zuerst, ob die Daten an BigQuery übertragen werden.

Öffnen Sie die Google Cloud Console und wählen Sie Ihr Projekt aus dem Drop-down-Menü oben auf dem Bildschirm aus.
Klicken Sie links oben auf dem Bildschirm im Navigationsmenü unter der Überschrift Analysen auf BigQuery.
Maximieren Sie im Bereich Explorer Ihr Projekt, um Ihr Google Analytics-Dataset aufzurufen. Der Name des Datasets ist analytics_ gefolgt von Ihrer Google Analytics 4-Property-ID, z.B. analytics_229787100).
Maximieren Sie das Dataset. Sie sollten eine Tabelle events_ sehen. Die Zahl in Klammern gibt die Anzahl der Tage an, für die Daten abgefragt werden können.

Unterabfrage zum Auswählen von CWV-Ereignissen

Wenn Sie ein Dataset abfragen möchten, das nur unsere CWV-Ereignisse enthält, beginnen Sie mit einer Unterabfrage, in 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 gesucht. Der metric_id-Schlüssel wird verwendet, um sicherzustellen, dass 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
)

Das ist die Grundlage für alle Ihre Abfragen für dieses Dataset. Ihre Hauptabfrage wird für die temporäre Tabelle web_vitals_events ausgeführt.

Struktur von GA4-Ereignissen

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

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

Seiten und Elemente mit der schlechtesten Leistung finden

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

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

In der folgenden Abfrage werden Seiten nach ihrem CLS am 75. Perzentil von schlecht nach gut sortiert und 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 verschoben werden, sollte es viel einfacher sein, die Ursache des Problems zu ermitteln und zu beheben.

Die hier gemeldeten Elemente sind möglicherweise nicht dieselben Elemente, die sich verschieben, wenn Sie Ihre Seiten lokal debuggen. Deshalb ist es so wichtig, diese Daten überhaupt zu erfassen. Es ist sehr schwierig, Dinge zu beheben, die Sie nicht als Probleme erkennen.

Andere Messwerte debuggen

In der obigen Abfrage werden die Ergebnisse für den CLS-Messwert angezeigt. Dieselbe Technik kann jedoch auch verwendet werden, um Berichte zu den Debugging-Zielen für LCP und INP zu erstellen. Ersetzen Sie einfach die WHERE-Klausel durch den relevanten Messwert, den Sie debuggen möchten:

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

8. Abfrageergebnisse in Data Studio visualisieren

Mit BigQuery können Sie Abfrageergebnisse schnell in Data Studio visualisieren. Data Studio ist ein kostenloses Tool zur Datenvisualisierung und zum Erstellen von Dashboards. Wenn Sie Ihre Abfrageergebnisse nach dem Ausführen der Abfrage in der BigQuery-UI visualisieren möchten, klicken Sie auf Daten auswerten und wählen Sie Mit Data Studio auswerten aus.

Option „Mit Data Studio auswerten“ in BigQuery

Dadurch wird in der Ansicht „Erkunden“ eine direkte Verknüpfung von BigQuery zu Data Studio 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 schnelle visuelle Analysen 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 Verbindung zwischen BigQuery und Data Studio können Sie schnell Diagramme aus beliebigen Abfragen erstellen und visuelle Analysen durchführen. Wenn Sie jedoch zusätzliche Analysen durchführen möchten, sollten Sie sich mehrere Diagramme in einem interaktiven Dashboard ansehen, um einen ganzheitlicheren Überblick zu erhalten oder die Daten aufschlüsseln zu können. Mit einem praktischen Dashboard müssen Sie nicht jedes Mal Abfragen schreiben und Diagramme manuell erstellen, wenn Sie Ihre Messwerte analysieren möchten.

Sie können in Data Studio 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 aus und wählen Sie das Dataset aus, mit dem Sie arbeiten möchten:

BigQuery-Connector in Data Studio verwenden

9. Web Vitals-Daten erfassen

Wenn Sie Dashboards mit den oben beschriebenen 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 für die Web Vitals-Messwerte erforderlichen Vorverarbeitung werden Teile Ihrer Abfrage mehrmals ausgeführt. Das führt zu zwei Problemen: Dashboard-Leistung und BigQuery-Kosten.

Sie können den BigQuery-Sandboxmodus kostenlos verwenden. Im Rahmen der kostenlosen Nutzungskontingente von BigQuery ist das erste Terabyte (1 TB) an verarbeiteten Abfragedaten pro Monat kostenlos. Für die in diesem Beitrag beschriebenen Analysemethoden sollten Sie dieses kostenlose Limit jeden Monat einhalten können, es sei denn, Sie verwenden ein sehr großes Dataset oder führen regelmäßig viele Abfragen für das Dataset aus. Wenn Sie jedoch eine Website mit hohem Traffic haben und verschiedene Messwerte regelmäßig mit einem schnellen interaktiven Dashboard überwachen möchten, empfehlen wir, Ihre Web-Vitals-Daten vorzuverarbeiten und zu materialisieren. Nutzen Sie dabei die Effizienzfunktionen von BigQuery wie Partitionierung, Clustering und Caching.

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 bietet mehrere Vorteile:

Die Datenstruktur wird vereinfacht und lässt sich leichter abfragen.
Es werden nur die Web Vitals-Ereignisse aus dem ursprünglichen GA4-Dataset beibehalten.
Sitzungs-ID, Nutzertyp (neu oder wiederkehrend) und Informationen zur Sitzungsinteraktion sind direkt in Spalten verfügbar.
Die Tabelle ist nach Datum partitioniert und nach Messwertname geclustert. Dadurch wird in der Regel die Menge der für jede Abfrage verarbeiteten Daten reduziert.
Da Sie keine Platzhalter verwenden müssen, um diese Tabelle abzufragen, können Abfrageergebnisse bis zu 24 Stunden lang im Cache gespeichert werden. So werden Kosten für die Wiederholung derselben Abfrage gesenkt.
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 oben genannte Abfrage ohne Zeitraum ausführen, wird sie für Ihren gesamten Google Analytics-Datensatz ausgeführt. Sie sollten das nicht jeden Tag tun, da Sie sonst große Mengen an Verlaufsdaten neu verarbeiten. Sie können die Abfrage so aktualisieren, dass nur die Daten des letzten Tages angehängt werden. Entfernen Sie dazu die CREATE or REPLACE TABLE-Anweisung am Anfang der Abfrage und fügen Sie der WHERE-Klausel in der Unterabfrage ein zusätzliches Kriterium für die events_intraday_-Tabelle 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 von gestern zurück. Anschließend können Sie die BigQuery-Konsole verwenden, um die tägliche Ausführung der Abfrage zu planen.

10. Daten in Google Data Studio visualisieren

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

Web Vitals Connector verwenden

Da es zeitaufwendig ist, ein Dashboard von Grund auf neu zu erstellen, haben wir eine Paketlösung entwickelt, mit der ein Vorlagendashboard für Sie erstellt wird. Achten Sie zuerst darauf, dass Sie die Tabelle mit Web-Vitals mithilfe der oben genannten Abfrage materialisiert haben. Rufen Sie dann den Web Vitals-Connector für Data Studio über diesen Link auf: goo.gle/web-vitals-connector.

Nachdem Sie die einmalige Autorisierung erteilt haben, sollte der folgende Konfigurationsbildschirm angezeigt werden:

Autorisierungsbildschirm für Web Vitals Connector

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 auf Grundlage einer Vorlage erstellt und Ihre Daten werden damit verknüpft. Sie können das Dashboard nach Belieben bearbeiten, ändern und freigeben. Wenn Sie ein Dashboard erstellt haben, müssen Sie den Connector-Link nicht noch einmal aufrufen, es sei denn, Sie möchten mehrere Dashboards aus verschiedenen Datasets erstellen.

Dashboard verwenden

Auf dem Tab „Übersicht“ sehen Sie die täglichen Trends der Web Vitals-Messwerte sowie einige Nutzungsdaten für Ihre Website, z. B. Nutzer und Sitzungen.

Auf dem Tab „Nutzeranalyse“ können Sie einen Messwert auswählen und sich eine Aufschlüsselung des Messwertperzentils sowie der Nutzeranzahl nach verschiedenen Nutzungs- und Unternehmensmesswerten ansehen.

Auf dem Tab „Seitenpfadanalyse“ können Sie Problembereiche auf Ihrer Website identifizieren. Hier können Sie einen Messwert auswählen, um die Übersicht aufzurufen. Außerdem sehen Sie die Streukarte aller Seitenpfade mit dem Prozentilwert auf der Y-Achse und der Anzahl der Datensätze auf der X-Achse. Mithilfe der Streukarte lassen sich Seiten mit niedrigeren als erwarteten Messwerten ermitteln. Nachdem Sie die Seiten ausgewählt haben, können Sie den Problembereich weiter eingrenzen. Verwenden Sie dazu das Streudiagramm der Tabelle „Seitenpfad“ oder die Tabelle „Debug-Ziel“.

Der Tab „Umsatzanalyse“ ist ein Beispiel dafür, wie Sie Ihre Geschäfts- und Leistungsmesswerte an einem Ort im Blick behalten können. In diesem Abschnitt werden alle Sitzungen dargestellt, in denen der Nutzer einen Kauf getätigt 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 in der Lage sein, die Leistung Ihrer Core Web Vitals auf Ihrer Website mit einem hohen Detaillierungsgrad zu verfolgen. Außerdem sollten Sie in der Lage sein, bestimmte Seitentypen und Elemente auf Ihrer Website zu identifizieren, die hohe CWV-Werte verursachen, damit Sie Ihre Optimierungen darauf konzentrieren können.

Weitere Informationen

Auf web.dev finden Sie viele Artikel und Fallstudien mit Strategien zur Verbesserung der Core Web Vitals. Beginnen Sie mit den Artikeln zur Optimierung für die einzelnen Messwerte:

Referenzdokumente

Dieses Codelab basiert auf zwei web.dev-Artikeln:
Artikel zum Messen von Web Vitals in der Praxis
Artikel zur Verwendung von Web Vitals-GA4-Daten in BigQuery mit vielen weiteren Abfragebeispielen
Weitere Informationen zur Integration von GA4 und BigQuery Export finden Sie in der Google Analytics-Hilfe.

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

1. Hinweis

Aufgaben

Voraussetzungen

Vorbereitung

2. Web-Vitals-Bibliothek und gtag auf einer Webseite einfügen

basic.html

basic.html

basic.html

3. Core Web Vitals einer Webseite messen

4. Web-Vitals-Daten genauer ansehen

CLS entries

LCP entries

INP entries

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

Informationen zur Fehlerbehebung für jeden 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 zum Auswählen von CWV-Ereignissen

Struktur von GA4-Ereignissen

Seiten und Elemente mit der schlechtesten Leistung finden

Andere Messwerte debuggen

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

Dashboard verwenden

11. Weitere Ressourcen

Weitere Informationen

Referenzdokumente

CLS `entries`

LCP `entries`

INP `entries`