Ta strona została przetłumaczona przez Cloud Translation API.

Mierz skuteczność za pomocą pliku web-vitals.js, Google Analytics i BigQuery

1. Zanim zaczniesz

Co trzeba zrobić

W ramach tego ćwiczenia w programie:

Połącz usługę w Google Analytics 4 z BigQuery.
Dodaj bibliotekę web-vitals do strony internetowej.
Przygotuj i wyślij dane web-vitals do Google Analytics.
Tworzenie zapytań o dane dotyczące podstawowych wskaźników internetowych w BigQuery.
Utwórz panel w Studiu danych Google, aby wizualizować dane dotyczące podstawowych wskaźników internetowych.

Czego potrzebujesz

Musisz mieć konto Google Analytics z usługą w GA4.
Konto Google Cloud –
Przeglądarka oparta na Chromium, taka jak Google Chrome lub Microsoft Edge. Więcej informacji o tym, dlaczego potrzebujesz przeglądarki opartej na Chromium, znajdziesz w artykule Obsługa przeglądarek.
wybrany przez Ciebie edytor tekstu, np. Sublime Text lub Visual Studio Code;
Gdzieś hostować strony testowe, aby zobaczyć, jak działa biblioteka web-vitals. (Możesz użyć lokalnego serwera, aby przesyłać statyczne strony internetowe, lub hostować strony testowe na GitHubie).
Witryna publiczna, w której możesz wdrożyć kod Analytics. (Wprowadzenie kodu do środowiska produkcyjnego sprawia, że przykłady BigQuery i Studio danych znajdujące się na końcu tego ćwiczenia z programowania są bardziej zrozumiałe).
Znajomość języków HTML, CSS i JavaScript oraz Narzędzi deweloperskich w Chrome.

Zanim zaczniesz

Najpierw połącz Google Analytics 4 z BigQuery, aby móc rozpocząć analizę skuteczności zaraz po opublikowaniu kodu.

Aby połączyć usługę w GA4 z BigQuery, wykonaj czynności opisane w Centrum pomocy Google Analytics.

Gdy usługa w Google Analytics jest gotowa do eksportowania danych o zdarzeniach do BigQuery, zintegruj bibliotekę web-vitals w swojej witrynie.

2. Dodawanie do strony internetowej biblioteki Web Vitals i tagu gtag

Najpierw dodaj do strony internetowej bibliotekę web-vitals.

Otwórz szablon strony, do którego chcesz dodać bibliotekę web-vitals. W tym przykładzie użyjemy prostej strony:

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>

Wklej kod źródłowy w pustym pliku w edytorze tekstu.
Zapisz plik lokalnie jako basic.html.
Skopiuj ten skrypt modułu i wklej go tuż przed zamykającym tagiem </body>. Ten skrypt wczytuje bibliotekę web-vitals z sieci dostarczania treści.

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>

Zapisz plik.

Dodałeś do strony internetowej bibliotekę web-vitals.

3. Pomiar podstawowych wskaźników internetowych strony internetowej

Podstawowe wskaźniki internetowe pozwalają ocenić wrażenia użytkownika w czasie rzeczywistym. Dane pochodzą z Chrome lub biblioteki web-vitals w przeglądarce Chromium. Gdy opublikujesz aplikację web-vitals w wersji produkcyjnej, zobaczysz różne wyniki na podstawie takich jak szybkość połączenia, moc urządzenia i sposób ich interakcji z witryną. Aby zademonstrować możliwości biblioteki web-vitals, przeprowadzimy symulację wygody użytkowników przy powolnym połączeniu.

Otwórz zapisany plik w przeglądarce.
Kliknij stronę internetową prawym przyciskiem myszy.
Kliknij Zbadaj, aby otworzyć Narzędzia dla deweloperów w Google Chrome.

Kliknij kartę Console (Konsola) > Ustawienia konsoli

Zaznacz pole wyboru Preserve log (Zachowaj dziennik), aby dzienniki były zachowywane przy odświeżaniu strony internetowej.

Kliknij kartę Sieć > Online > Wolna sieć 3G symuluje wolne połączenie sieciowe.

Kliknij kartę Konsola.
Kliknij dowolne miejsce na stronie, aby wymusić wydrukowanie wskaźnika największego wyrenderowania treści (LCP).
Kliknij Załaduj ponownie tę stronę , aby wymusić wydrukowanie danych dotyczących skumulowanego przesunięcia układu (CLS) i interakcji do następnego wyrenderowania (INP).

Kliknij kartę Sieć > Online > Szybkie połączenie 3G symulujące szybkie połączenie sieciowe.
Kliknij kartę Konsola.
Kliknij dowolne miejsce na stronie, aby wymusić ponowne wydrukowanie LCP.

Kliknij Odśwież tę stronę , aby wymusić ponowne wydrukowanie wskaźników CLS i INP.

Znakomicie. Podstawowe wskaźniki internetowe strony internetowej zostały zmierzone.

4. Poznaj bardziej szczegółowe dane z Web Vitals

W przypadku każdego mierzonego zdarzenia dotyczącego podstawowych wskaźników internetowych w zwracanych danych dostępnych jest wiele informacji, które możesz wykorzystać do debugowania wąskich gardeł wydajności. Każde zdarzenie web-vitals zawiera tablicę entries z informacjami o zdarzeniach mających wpływ na bieżącą wartość danych.

CLS: `entries`

Po rozwinięciu właściwości entries obiektu zarejestrowanego przez onCLS() zobaczysz listę wpisów LayoutShift. Każdy element LayoutShift zawiera właściwość value odzwierciedlającą wynik przesunięcia układu oraz tablicę sources, dzięki której możemy sprawdzić, które elementy zostały przesunięte.

W tym przykładzie układ strony został przesunięty 2 razy. W obu przypadkach element h1 został przeniesiony na stronie. Właściwość currentRect informuje nas, gdzie znajduje się element, a element previousRect informuje o tym, gdzie znajdował się wcześniej.

LCP: `entries`

Rozwijanie właściwości wpisów obiektu zarejestrowanego przez funkcję onLCP() pokazuje, które elementy były kandydatami do największego wyrenderowania treści, zanim została zgłoszona ich końcowa wartość.

W tym przykładzie tablica entries zawiera listę wszystkich kandydatów LCP w kolejności chronologicznej. W tym przypadku jako pierwszy został wyrenderowany element h1, a po nim element img. img to największe wyrenderowanie treści. Zgłoszony element LCP jest zawsze ostatnim elementem w tablicy.

INP: `entries`

Gdy rozwiniesz właściwość entries obiektu zarejestrowanego przez funkcję onINP(),, zobaczysz tablicę zawierającą wpis PerformanceEventTiming określający interakcję do następnego wyrenderowania na stronie.

Właściwość name informuje, jaki typ danych wejściowych użytkownika wywołał licznik dostępności wątku głównego. Wartość value w raportach web-vitals to opóźnienie podane we właściwości duration wpisu PerformanceEventTiming, przekonwertowane z mikrosekund na milisekundy. W tym przypadku mierzona wartość INP wynosi 48 milisekund.

5. Przygotowywanie i wysyłanie danych Web Vitals do Google Analytics 4

Zanim wyślesz dane web-vitals do Google Analytics 4, musisz je przekonwertować na format, który może odbierać GA4.

Uporządkuj informacje debugowania w przypadku każdego tagu CWV.

Ostatnim krokiem przed wysłaniem tego kodu do Google Analytics jest utworzenie struktury informacji z wpisów, w tym informacji zwracanych przez powyższe funkcje.

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)
    });
  }

Wysyłanie danych do Google Analytics

Na koniec utwórz funkcję, która pobiera parametry ze zdarzenia web-vitals i przekazuje je do Google Analytics.

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)
  });
}

Zarejestruj funkcję z każdą z funkcji web-vitals, która uruchamia się, gdy przeglądarka jest gotowa do pomiaru poszczególnych zdarzeń:

diagnostics.html

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

Brawo! Wysyłasz teraz do Google Analytics web-vitals zdarzeń.

6. Sprawdź, czy Google Analytics wypełniają dane Web Vitals

Aby mieć pewność, że usługa w Google Analytics 4 będzie rejestrować zdarzenia:

Otwórz usługę w Google Analytics 4 i kliknij Raporty.

Kliknij Czas rzeczywisty.

Kilkakrotnie odśwież stronę testową i w celu wywołania zdarzeń INP kliknij stronę między odświeżeniami.
W interfejsie Przegląd w czasie rzeczywistym znajdź sekcję Liczba zdarzeń według nazwy zdarzenia. Powinny być widoczne zdarzenia LCP, INP i CLS.

Kliknij dowolną nazwę zdarzenia, aby wyświetlić parametry przekazane z nim.

Kliknij te klucze parametrów, aby wyświetlić podsumowanie wartości otrzymanych przez Google Analytics.

Możesz dodać do danych debugowania inne dane, np. nazwy szablonów stron lub inne zdarzenia strony związane z INP omówione wcześniej w tym ćwiczeniu z programowania. Wystarczy, że zmodyfikujesz instrukcje return w funkcji getDebugInfo().

Jeśli uznasz, że dane ze stron testowych są zadowalające, możesz wdrożyć nowy kod Google Analytics w środowisku produkcyjnym i przejść do następnego kroku.

7. Tworzenie zapytań dotyczących danych w BigQuery

Po kilku dniach od uruchomienia kodu Google Analytics możesz zacząć tworzyć zapytania dotyczące danych w BigQuery. Najpierw sprawdź, czy dane są przesyłane do BigQuery.

Otwórz konsolę Google Cloud i wybierz swój projekt z menu u góry ekranu.
W menu nawigacyjnym w lewym górnym rogu ekranu pod nagłówkiem Statystyki kliknij BigQuery.
W panelu Explorer rozwiń projekt, aby wyświetlić zbiór danych Google Analytics. Nazwa zbioru danych to analytics_ i identyfikator usługi w Google Analytics 4 (np. analytics_229787100).
Rozwiń zbiór danych. Powinna się pojawić tabela events_. Liczba w nawiasach oznacza liczbę dni dostępnych w ramach zapytania.

Podzapytanie do wybierania tylko zdarzeń CWV

Aby wysłać zapytanie do zbioru danych, który zawiera tylko zdarzenia CWV, zacznij od podzapytania, które wybiera zdarzenia LCP, CLS i INP z ostatnich 28 dni. Szuka ono ostatniej zarejestrowanej wartości dla każdego identyfikatora zdarzenia web-vitals korzystającego z klucza metric_id, aby mieć pewność, że te same zdarzenia CWV nie są liczone więcej niż raz.

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

Stanowi to podstawę wszystkich zapytań dotyczących tego zbioru danych. Główne zapytanie będzie uruchamiane w tabeli tymczasowej web_vitals_events.

Informacje o strukturze zdarzeń GA4

Wszystkie dane zdarzeń Google Analytics 4 są przechowywane w kolumnie STRUCT w kolumnie event_params. Każdy parametr zdarzenia przekazywany w witrynie do GA4 jest reprezentowany przez jego klucz, a wartość to STRUCT z kluczem dla każdego możliwego typu danych. W powyższym przykładzie klucz metric_value może mieć wartość int_value lub double_value, więc używana jest funkcja COALESCE(). Aby uzyskać debug_target zaliczony wcześniej, wybierz klucz string_value w funkcji debug_target.

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

Znajdowanie najmniej skutecznych stron i elementów

debug_target to ciąg selektora arkusza CSS odpowiadający elementowi na stronie, który jest najbardziej związany z wartością danych.

W CLS element debug_target reprezentuje największy element z największego przesunięcia układu, który miał wpływ na wartość CLS. Jeśli żadne elementy nie zostały przesunięte, debug_target ma wartość null.

Te zapytania zawierają listę stron od najgorszej (najniższej) do najlepszej (najniższej) według wartości CLS na 75 centylu i pogrupowanych według parametru debug_target:

# 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

Jeśli wiesz, które elementy na stronie się przesuwają, powinno Ci to znacznie ułatwić znalezienie i usunięcie głównej przyczyny problemu.

Pamiętaj, że widoczne tutaj elementy mogą nie być tymi samymi elementami, które zmieniają się podczas lokalnego debugowania stron. Dlatego tak ważne jest, aby zarejestrować te dane. Bardzo trudno jest naprawić coś, z czego nie zdajesz sobie sprawy!

Debugowanie innych danych

Powyższe zapytanie wyświetla wyniki danych CLS, ale do raportowania celów debugowania dla LCP i INP możesz użyć dokładnie tej samej metody. Wystarczy zastąpić klauzulę WHERE odpowiednimi danymi do debugowania:

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

8. Wizualizacja wyników zapytań w Studiu danych

BigQuery umożliwia szybką wizualizację wyników zapytań w Studiu danych. Studio danych to bezpłatne narzędzie do wizualizacji i paneli informacyjnych. Aby wizualizować wyniki zapytania po uruchomieniu zapytania w interfejsie BigQuery, kliknij Przeglądaj dane i wybierz Przeglądaj w Studiu danych.

Eksplorowanie za pomocą opcji Studia danych w BigQuery

Spowoduje to utworzenie bezpośredniego połączenia między BigQuery a Studio danych w widoku wglądu. W tym widoku możesz wybrać pola, które chcesz zwizualizować, wybrać typy wykresów, skonfigurować filtry i tworzyć wykresy doraźne, aby szybko analizować wizualną. Na podstawie powyższych wyników zapytania możesz utworzyć ten wykres liniowy, aby zobaczyć trend zmian wartości LCP w czasie:

Wykres liniowy przedstawiający dzienne wartości LCP w Studiu danych

Dzięki bezpośredniemu połączeniu między BigQuery a Studio danych możesz tworzyć szybkie wykresy na podstawie dowolnych zapytań i przeprowadzać analizy wizualne. Jeśli jednak chcesz przeprowadzić dodatkową analizę, możesz skorzystać z kilku wykresów w interaktywnym panelu, aby uzyskać bardziej całościowy widok lub móc przeanalizować dane. Dzięki przydatnemu panelowi nie musisz ręcznie pisać zapytań ani generować wykresów, za każdym razem, gdy chcesz analizować wskaźniki.

Panel danych możesz utworzyć w Studiu danych, korzystając z natywnego oprogramowania sprzęgającego BigQuery. Aby to zrobić, otwórz stronę datastudio.google.com, utwórz nowe źródło danych, wybierz oprogramowanie sprzęgające BigQuery i wskaż zbiór danych, z którym chcesz pracować:

Korzystanie z natywnego oprogramowania sprzęgającego BigQuery w Studiu danych

9. Realizuj dane ze wskaźników internetowych

Podczas tworzenia paneli z danymi zdarzeń internetowych za pomocą wskaźników internetowych zgodnie z opisem powyżej nie warto używać bezpośrednio zbioru danych eksportu Google Analytics 4. Ze względu na strukturę danych w GA4 i wstępne przetwarzanie danych wskaźników internetowych niektóre części zapytania są wyświetlane wiele razy. Powoduje to 2 problemy: wydajność panelu i koszty BigQuery.

Możesz bezpłatnie korzystać z trybu piaskownicy BigQuery. W przypadku bezpłatnego poziomu wykorzystania BigQuery pierwsze 1 TB danych zapytań przetwarzanych miesięcznie jest bezpłatne. W przypadku metod analizy omówionych w tym poście, jeśli nie używasz znacznie dużego zbioru danych lub regularnie wykonujesz na nim duże zapytania, limit ten powinien co miesiąc przekraczać limit. Jeśli jednak masz witrynę o dużym natężeniu ruchu i chcesz regularnie monitorować różne wskaźniki za pomocą szybkiego, interaktywnego panelu, zalecamy wstępne przetwarzanie i materializację danych z internetu przy jednoczesnym korzystaniu z funkcji BigQuery zwiększających wydajność, takich jak partycjonowanie, grupowanie i buforowanie.

Poniższy skrypt wstępnie przetwarza dane BigQuery (tabela źródłowa) i tworzy tabelę zmaterializowaną (tabelę docelową).

# 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');

Ten zmaterializowany zbiór danych ma kilka zalet:

Struktura danych jest spłaszczona i ułatwia tworzenie zapytań.
Zachowuje on tylko zdarzenia wskaźników internetowych z pierwotnego zbioru danych GA4.
Identyfikator sesji, typ użytkownika (nowi a powracający) oraz informacje o zaangażowaniu w sesję są dostępne bezpośrednio w kolumnach.
Tabela jest partycjonowana według daty i grupowana według nazwy wskaźnika. Zwykle zmniejsza to ilość danych przetwarzanych dla każdego zapytania.
Ponieważ do wysyłania zapytań dotyczących tej tabeli nie trzeba używać symboli wieloznacznych, wyniki zapytań mogą być przechowywane w pamięci podręcznej przez maksymalnie 24 godziny. Pozwala to obniżyć koszty związane z powtarzaniem tego samego zapytania.
Jeśli używasz mechanizmu analityki biznesowej BigQuery, możesz uruchomić w tej tabeli zoptymalizowane funkcje i operatory SQL.

Możesz przesłać zapytanie do tej zmaterializowanej tabeli bezpośrednio z interfejsu użytkownika BigQuery lub użyć jej w Studiu danych za pomocą oprogramowania sprzęgającego BigQuery.

Uruchamiaj regularne zadania materializowania

Jeśli uruchomisz to zapytanie bez zakresu dat, zostanie ono uruchomione w całym zbiorze danych Google Analytics. Nie należy tego robić codziennie, ponieważ przetwarzasz ponownie duże ilości danych historycznych. Możesz zaktualizować zapytanie tak, aby dodawało tylko dane z ostatniego dnia. W tym celu usuń instrukcję CREATE or REPLACE TABLE na początku zapytania i dodaj dodatkowe kryteria do klauzuli WHERE w zapytaniu podrzędnym względem tabeli events_intraday_:

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)

To zapytanie zwraca tylko dane z wczoraj. Następnie możesz za pomocą konsoli BigQuery zaplanować codzienne uruchamianie zapytania.

10. Wizualizacja danych w Studiu danych Google

Studio danych Google natywnie obsługuje odczytywanie danych z Google BigQuery. Kiedy dane web-vitals z Google Analytics 4 zapełniają się już w BigQuery, możesz więc użyć oprogramowania sprzęgającego BigQuery w Studiu danych, aby bezpośrednio odczytać tabelę zmaterializowaną.

Korzystanie z oprogramowania sprzęgającego Web Vitals

Ze względu na to, że tworzenie panelu od podstaw jest czasochłonne, opracowaliśmy pakietowe rozwiązanie, które umożliwia utworzenie szablonu panelu. Najpierw upewnij się, że tabela wskaźników internetowych została zmaterializowane za pomocą podanego wyżej zapytania. Następnie otwórz oprogramowanie sprzęgające Web Vitals dla Studia danych, klikając ten link: goo.gle/web-vitals-connector

Po przyznaniu jednorazowej autoryzacji powinien wyświetlić się następujący ekran konfiguracji:

Ekran autoryzacji oprogramowania sprzęgającego Web Vitals

Podaj identyfikator zmaterializowanej tabeli BigQuery (tj. tabeli docelowej) i identyfikator projektu rozliczeniowego BigQuery. Gdy klikniesz POŁĄCZ, Studio danych utworzy nowy panel oparty na szablonie i powiąże z nim Twoje dane. Pulpit nawigacyjny możesz edytować, modyfikować i udostępniać według własnego uznania. Jeśli utworzysz panel raz, nie musisz ponownie klikać linku do oprogramowania sprzęgającego, chyba że chcesz utworzyć wiele paneli z różnych zbiorów danych.

Poruszanie się po panelu

W trakcie poruszania się po panelu możesz na karcie „Podsumowanie” zobaczyć dzienne trendy dotyczące wskaźników internetowych oraz niektóre informacje o wykorzystaniu witryny, np. liczbę użytkowników i sesje.

Na karcie Analiza użytkowników możesz wybrać dane i zobaczyć zestawienie centyli danych i liczby użytkowników według różnych wskaźników wykorzystania i firmy.

Karta Analiza ścieżki strony ułatwia wykrywanie problematycznych obszarów w witrynie. Tutaj możesz wybrać dane, by zobaczyć przegląd, ale możesz też zobaczyć mapę punktową wszystkich ścieżek do strony z wartością percentyla na osi Y i rejestrowaną liczbę na osi X. Mapa punktowa może pomóc w identyfikacji stron, które mają niższe od oczekiwanych wartości danych. Po wybraniu stron możesz dokładniej przeanalizować problematyczny problem za pomocą wykresu punktowego tabeli Ścieżki do strony lub wyświetlić tabelę Cel debugowania.

Karta Analiza przychodów to przykład, w jaki sposób możesz monitorować dane firmy i skuteczności w jednym miejscu. W tej sekcji widoczne są wszystkie sesje, podczas których użytkownik dokonał zakupu. Możesz porównać przychody i wrażenia użytkowników podczas danej sesji.

11. Inne zasoby

Udało Ci się ukończyć ćwiczenia z programowania. Teraz możesz bardzo szczegółowo śledzić wydajność swoich podstawowych wskaźników internetowych w całej witrynie. Potrafisz też zidentyfikować konkretne typy stron i elementy w witrynie, które powodują wysokie liczby zmiennych, co pozwoli Ci odpowiednio optymalizować.

Więcej informacji

Na stronie web.dev znajdziesz wiele artykułów i studiów przypadków ze strategiami ulepszania podstawowych wskaźników internetowych. Zacznij od artykułów o optymalizacji pod kątem poszczególnych danych:

Dokumentacja

W ramach tego ćwiczenia w Codelabs znajdują się 2 artykuły na stronie web.dev:
Artykuł o mierzeniu wskaźników internetowych w terenie
W artykule o korzystaniu ze wskaźników internetowych z GA4 w BigQuery znajdziesz znacznie więcej przykładów zapytań, których możesz użyć.
Jeśli potrzebujesz więcej informacji o GA4 > Integracji z BigQuery Export znajdziesz w Centrum pomocy Google Analytics.

Mierz skuteczność za pomocą pliku web-vitals.js, Google Analytics i BigQuery

1. Zanim zaczniesz

Co trzeba zrobić

Czego potrzebujesz

Zanim zaczniesz

2. Dodawanie do strony internetowej biblioteki Web Vitals i tagu gtag

basic.html

basic.html

basic.html

3. Pomiar podstawowych wskaźników internetowych strony internetowej

4. Poznaj bardziej szczegółowe dane z Web Vitals

CLS: entries

LCP: entries

INP: entries

5. Przygotowywanie i wysyłanie danych Web Vitals do Google Analytics 4

Uporządkuj informacje debugowania w przypadku każdego tagu CWV.

diagnostics.html

Wysyłanie danych do Google Analytics

diagnostics.html

diagnostics.html

6. Sprawdź, czy Google Analytics wypełniają dane Web Vitals

7. Tworzenie zapytań dotyczących danych w BigQuery

Podzapytanie do wybierania tylko zdarzeń CWV

Informacje o strukturze zdarzeń GA4

Znajdowanie najmniej skutecznych stron i elementów

Debugowanie innych danych

8. Wizualizacja wyników zapytań w Studiu danych

9. Realizuj dane ze wskaźników internetowych

Uruchamiaj regularne zadania materializowania

10. Wizualizacja danych w Studiu danych Google

Korzystanie z oprogramowania sprzęgającego Web Vitals

Poruszanie się po panelu

11. Inne zasoby

Więcej informacji

Dokumentacja

CLS: `entries`

LCP: `entries`

INP: `entries`