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

1. Zanim zaczniesz

Co musisz zrobić

W tym ćwiczeniu wykonasz te czynności:

Połącz usługę w Google Analytics 4 z BigQuery.
Dodaj bibliotekę web-vitals do strony internetowej.
Przygotowywanie i wysyłanie web-vitals danych do Google Analytics.
Wysyłaj zapytania do BigQuery dotyczące danych Core Web Vitals.
Utwórz panel w Google Studio danych, aby wizualizować dane dotyczące Core Web Vitals.

Czego potrzebujesz

Konto Google Analytics z usługą w GA4.
Konto Google Cloud.
przeglądarka oparta na Chromium, np. Google Chrome lub Microsoft Edge; (Więcej informacji o tym, dlaczego potrzebujesz przeglądarki opartej na Chromium, znajdziesz w sekcji Obsługa przeglądarek).
Wybrany edytor tekstu, np. Sublime Text lub Visual Studio Code.
Miejsce do hostowania stron testowych, aby sprawdzić, jak działa biblioteka web-vitals. (Możesz użyć serwera lokalnego do wyświetlania statycznych stron internetowych lub hostować strony testowe na GitHubie).
Publiczna witryna, w której możesz wdrożyć kod analityczny. (Wprowadzenie kodu do środowiska produkcyjnego sprawi, że przykłady BigQuery i Studia danych na końcu tego ćwiczenia będą bardziej zrozumiałe).
Znajomość HTML-a, CSS-a, JavaScriptu i Narzędzi deweloperskich w Chrome.

Zanim rozpoczniesz

Najpierw połącz Google Analytics 4 z BigQuery, aby móc rozpocząć analizowanie skuteczności od razu po opublikowaniu kodu.

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

Teraz, gdy usługa w Google Analytics jest gotowa do eksportowania danych zdarzeń do BigQuery, zintegruj w swojej witrynie bibliotekę web-vitals.

2. Dodawanie biblioteki web-vitals i tagu gtag do strony internetowej

Najpierw dodaj bibliotekę web-vitals do strony internetowej.

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 do pustego pliku w edytorze tekstu.
Zapisz plik lokalnie jako basic.html.
Skopiuj ten skrypt modułu i wklej go tuż przed tagiem zamykającym </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.

Biblioteka web-vitals została dodana do strony internetowej.

3. Pomiar Core Web Vitals strony internetowej

Core Web Vitals to miara wrażeń prawdziwych użytkowników, rejestrowana w Chrome lub w bibliotece web-vitals w przeglądarkach opartych na Chromium. Gdy udostępnisz web-vitals w wersji produkcyjnej, zobaczysz szeroki zakres wyników na podstawie szybkości połączenia użytkowników, mocy urządzenia i sposobu, w jaki korzystają oni z Twojej witryny. Aby zademonstrować możliwości biblioteki web-vitals, zasymulujemy środowisko użytkownika z wolnym połączeniem.

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

Kliknij kartę Konsola > Ustawienia konsoli .

Zaznacz pole wyboru Zachowaj dziennik, aby dzienniki były zachowywane po odświeżeniu strony internetowej.

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

Kliknij kartę Konsola.
Kliknij dowolne miejsce na stronie, aby wymusić wydrukowanie wartości wskaźnika największego wyrenderowania treści (LCP).
Kliknij Odśwież tę stronę , aby wymusić wyświetlenie danych dotyczących skumulowanego przesunięcia układu (CLS) i interakcji do kolejnego wyrenderowania (INP).

Kliknij kartę Sieć > Online > Szybka sieć 3G, aby zasymulować szybkie połączenie sieciowe.
Kliknij kartę Konsola.
Kliknij dowolne miejsce na stronie internetowej, aby ponownie wydrukować dane LCP.

Kliknij Odśwież tę stronę , aby ponownie wydrukować dane CLS i INP.

To wszystko. Zmierzono Core Web Vitals strony.

4. Bardziej szczegółowe analizowanie danych o podstawowych sygnałach internetowych

W przypadku każdego zdarzenia związanego z Core Web Vitals, które mierzysz, 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, które mają wpływ na bieżącą wartość danych.

CLS `entries`

Rozwinięcie właściwości entries obiektu zarejestrowanego przez onCLS() powoduje wyświetlenie listy wpisów LayoutShift. Każdy obiekt LayoutShift zawiera właściwość value odzwierciedlającą wynik przesunięcia układu oraz tablicę sources, która pozwala sprawdzić, które elementy zostały przesunięte.

W tym przykładzie wystąpiły 2 przesunięcia układu, które spowodowały przesunięcie elementu h1 na stronie. Właściwość currentRect informuje nas, gdzie element znajduje się obecnie, a element previousRect – gdzie był wcześniej.

LCP `entries`

Rozwinięcie właściwości entries obiektu rejestrowanego przez onLCP() pokazuje, które elementy były kandydatami do największego wyrenderowania treści przed zgłoszeniem wartości końcowej.

W tym przykładzie tablica entries zawiera listę wszystkich kandydatów do LCP w porządku chronologicznym. W tym przypadku najpierw został wyrenderowany element h1, a następnie element img. img było największym wyrenderowaniem treści. Zgłoszony element LCP jest zawsze ostatnim elementem w tablicy.

INP `entries`

Po rozwinięciu właściwości entries obiektu zarejestrowanego przez onINP(), wyświetli się tablica zawierająca wpis PerformanceEventTiming dotyczący interakcji z kolejnym malowaniem na stronie.

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

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

Zanim web-vitalsdane zostaną wysłane do Google Analytics 4, muszą zostać przekształcone w format, który GA4 może odbierać.

Strukturyzowanie informacji debugowania dla każdego wskaźnika CWV

Ostatnim krokiem przed wysłaniem tego kodu do Google Analytics jest uporządkowanie 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ę w każdej z funkcji web-vitals, która jest wywoływana, gdy przeglądarka jest gotowa do pomiaru każdego zdarzenia:

diagnostics.html

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

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

6. Sprawdź, czy dane o podstawowych wskaźnikach internetowych są wypełniane w Google Analytics

Aby mieć pewność, że zdarzenia są rejestrowane przez usługę w Google Analytics 4:

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

Wybierz Czas rzeczywisty.

Odśwież stronę testową kilka razy i pamiętaj, aby między odświeżeniami klikać ją w różnych miejscach, aby wywołać zdarzenia INP.
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 przekazywane wraz z tymi zdarzeniami.

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

Do informacji do debugowania możesz dodać inne dane, np. nazwy szablonów stron lub inne zdarzenia na stronie związane z INP, o których wspominaliśmy wcześniej w tym Codelabie. Wystarczy zmodyfikować instrukcje return w funkcji getDebugInfo().

Gdy uznasz, że dane pochodzące ze stron testowych są prawidłowe, wdróż nowy kod GA w wersji produkcyjnej witryny i przejdź do następnego kroku.

7. Wykonywanie zapytań o dane w BigQuery

Gdy kod Google Analytics będzie działać przez kilka dni, możesz zacząć wysyłać zapytania do danych w BigQuery. Najpierw sprawdź, czy dane są przesyłane do BigQuery.

Otwórz konsolę Google Cloud i wybierz projekt z menu u góry ekranu.
W menu nawigacyjnym w lewym górnym rogu ekranu kliknij BigQuery w sekcji Analytics.
W panelu Eksplorator rozwiń projekt, aby wyświetlić zbiór danych Google Analytics. Nazwa zbioru danych to analytics_, a po niej identyfikator usługi w Google Analytics 4 (np. analytics_229787100)).
Rozwiń zbiór danych. Powinna się w nim pojawić tabela events_. Liczba w nawiasach to liczba dni, dla których można wysyłać zapytania.

Podzapytanie do wybierania tylko zdarzeń CWV

Aby wysłać zapytanie do zbioru danych, który zawiera tylko zdarzenia dotyczące podstawowych wskaźników internetowych, zacznij od podzapytania, które wybiera zdarzenia LCP, CLS i INP z ostatnich 28 dni. W tym przypadku wyszukiwana jest ostatnia zgłoszona wartość każdego web-vitals identyfikatora zdarzenia przy użyciu 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 zostanie uruchomione w tabeli tymczasowej web_vitals_events.

Struktura zdarzeń w GA4

Każde dane zdarzenia w Google Analytics 4 są przechowywane w kolumnie STRUCT event_params. Każdy parametr zdarzenia przekazywany do GA4 w Twojej witrynie jest reprezentowany przez klucz, a wartość to STRUCT z kluczem dla każdego możliwego typu danych. W przykładzie powyżej klucz metric_value może mieć wartość int_value lub double_value, dlatego użyto funkcji COALESCE(). Aby uzyskać znak debug_target, który został wcześniej wpisany, wybierz klawisz string_value w debug_target.

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

Znajdowanie stron i elementów o najgorszych wynikach

debug_target to ciąg selektora CSS, który odpowiada elementowi na stronie najbardziej istotnemu dla wartości danych.

W przypadku CLS symbol debug_target oznacza największy element z największego przesunięcia układu, które miało wpływ na wartość CLS. Jeśli żadne elementy nie zostały przesunięte, wartość debug_target to null.

Ta lista zapytań zawiera strony posortowane od najgorszej do najlepszej według wartości CLS na 75 percentylu, pogrupowane według 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ą, łatwiej będzie Ci zidentyfikować i rozwiązać przyczynę problemu.

Pamiętaj, że elementy zgłaszane w tym raporcie mogą nie być tymi samymi elementami, które widzisz podczas debugowania stron lokalnie. Dlatego tak ważne jest, aby najpierw zebrać te dane. Trudno naprawić coś, co nie jest problemem.

Debugowanie innych danych

Powyższe zapytanie pokazuje wyniki dotyczące wskaźnika CLS, ale tej samej techniki można użyć do raportowania o elementach docelowych debugowania w przypadku wskaźników LCP i INP. Aby debugować, zastąp klauzulę WHERE odpowiednimi danymi:

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

8. Wizualizacja wyników zapytania w Studiu danych

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

Opcja Przeglądaj w Studiu danych w BigQuery

Spowoduje to utworzenie bezpośredniego połączenia z BigQuery do Studia danych w widoku eksplorowania. W tym widoku możesz wybrać pola, które chcesz wizualizować, wybrać typy wykresów, skonfigurować filtry i utworzyć wykresy ad hoc do szybkiej analizy wizualnej. Na podstawie wyników zapytania powyżej możesz utworzyć ten wykres liniowy, aby zobaczyć trend wartości LCP na przestrzeni czasu:

Wykres liniowy dziennych wartości LCP w Studiu danych

Dzięki temu bezpośredniemu połączeniu między BigQuery a Studio danych możesz tworzyć szybkie wykresy na podstawie dowolnych zapytań i przeprowadzać analizę wizualną. Jeśli jednak chcesz przeprowadzić dodatkową analizę, możesz wyświetlić kilka wykresów w interaktywnym panelu, aby uzyskać bardziej kompleksowy obraz lub móc przejść do bardziej szczegółowego widoku danych. Dzięki przydatnemu panelowi nie musisz za każdym razem, gdy chcesz przeanalizować dane, pisać zapytań i ręcznie generować wykresów.

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

Korzystanie z natywnego łącznika BigQuery w Studio danych

9. Materializowanie danych Web Vitals

Podczas tworzenia paneli danych o zdarzeniach związanych ze wskaźnikami internetowymi w sposób opisany powyżej bezpośrednie używanie wyeksportowanego zbioru danych Google Analytics 4 jest nieefektywne. Ze względu na strukturę danych GA4 i wstępne przetwarzanie wymagane w przypadku wartości podstawowych wskaźników internetowych Web Vitals niektóre części zapytania są wykonywane wielokrotnie. Powoduje to 2 problemy: wydajność panelu i koszty BigQuery.

Możesz bezpłatnie korzystać z trybu piaskownicy BigQuery. W ramach bezpłatnego poziomu wykorzystania BigQuery pierwsze 1 TB przetworzonych danych zapytań w miesiącu jest bezpłatne. W przypadku metod analizy omówionych w tym poście, o ile nie używasz bardzo dużego zbioru danych lub nie wysyłasz do niego regularnie wielu zapytań, co miesiąc powinna wystarczyć Ci ta bezpłatna ilość. Jeśli jednak masz witrynę o dużym natężeniu ruchu i chcesz regularnie monitorować różne dane za pomocą szybkiego interaktywnego panelu, zalecamy wstępne przetwarzanie i materializowanie danych o podstawowych sygnałach internetowych z wykorzystaniem funkcji BigQuery, takich jak partycjonowanie, grupowanie i pamięć podręczna.

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

# 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 łatwiejsza do przeszukiwania.
Zachowuje tylko zdarzenia Web Vitals z oryginalnego zbioru danych GA4.
Identyfikator sesji, typ użytkownika (nowy lub powracający) i informacje o zaangażowaniu w sesję są dostępne bezpośrednio w kolumnach.
Tabela jest partycjonowana według daty i klastrowana według nazwy danych. Zwykle zmniejsza to ilość danych przetwarzanych w przypadku każdego zapytania.
Ponieważ do wysyłania zapytań do tej tabeli nie musisz 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 BigQuery BI Engine, możesz uruchamiać w tej tabeli zoptymalizowane funkcje i operatory SQL.

Możesz bezpośrednio wysyłać zapytania do tej zmaterializowanej tabeli z poziomu interfejsu BigQuery lub używać jej w Studio danych za pomocą konektora BigQuery.

Uruchamianie regularnych zadań materializacji

Jeśli uruchomisz powyższe zapytanie bez zakresu dat, zostanie ono wykonane na całym zbiorze danych Google Analytics. Nie warto tego robić codziennie, ponieważ wiąże się to z ponownym przetwarzaniem dużych ilości danych historycznych. Możesz zaktualizować zapytanie, aby dołączać tylko dane z ostatniego dnia. W tym celu usuń instrukcję CREATE or REPLACE TABLE na początku zapytania i dodaj dodatkowe kryterium do klauzuli WHERE w podzapytaniu 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 użyć konsoli BigQuery, aby zaplanować codzienne uruchamianie zapytania.

10. Wizualizacja danych w Studiu danych Google

Studio danych Google natywnie obsługuje odczytywanie danych z Google BigQuery. Teraz, gdy w BigQuery masz już web-vitals dane z Google Analytics 4, możesz użyć łącznika BigQuery w Studio Danych, aby bezpośrednio odczytywać zmaterializowaną tabelę.

Korzystanie z narzędzia Web Vitals Connector

Tworzenie panelu od zera jest czasochłonne, dlatego opracowaliśmy gotowe rozwiązanie, które tworzy dla Ciebie panel szablonu. Najpierw upewnij się, że tabela Web Vitals została zmaterializowana za pomocą powyższego zapytania. Następnie otwórz łącznik Web Vitals dla Studia danych, korzystając z tego linku: goo.gle/web-vitals-connector

Po jednorazowym udzieleniu autoryzacji powinien pojawić się ten ekran konfiguracji:

Ekran autoryzacji Web Vitals Connector

Podaj identyfikator zmaterializowanej tabeli BigQuery (czyli tabeli docelowej) i identyfikator projektu rozliczeniowego BigQuery. Po kliknięciu POŁĄCZ Studio danych utworzy nowy panel oparty na szablonie i powiąże z nim Twoje dane. Możesz edytować, modyfikować i udostępniać panel w dowolny sposób. Jeśli utworzysz panel raz, nie musisz ponownie klikać linku do złącza, chyba że chcesz utworzyć kilka paneli na podstawie różnych zbiorów danych.

Poruszanie się po panelu

Na karcie Podsumowanie możesz przeglądać dzienne trendy wskaźników Web Vitals oraz informacje o korzystaniu z witryny, takie jak liczba użytkowników i sesji.

Na karcie Analiza użytkowników możesz wybrać dane i uzyskać zestawienie centyla danych oraz liczby użytkowników według różnych danych dotyczących użytkowania i biznesowych.

Karta Analiza ścieżki do strony pomaga zidentyfikować problematyczne obszary w witrynie. Możesz tu wybrać wskaźnik, aby wyświetlić przegląd, ale zobaczysz też mapę punktową wszystkich ścieżek do stron z wartością percentyla na osi Y i liczbą rekordów na osi X. Mapa punktowa może pomóc w identyfikowaniu stron, które mają wartości mniejsze niż oczekiwane. Po wybraniu stron możesz przejść do bardziej szczegółowego widoku problematycznego obszaru, korzystając z wykresu punktowego w tabeli Ścieżka do strony lub wyświetlając tabelę Cel debugowania.

Karta Analiza przychodów to przykład tego, jak możesz monitorować swoją firmę i dane o skuteczności w jednym miejscu. Ta sekcja zawiera wykres wszystkich sesji, w których użytkownik dokonał zakupu. Możesz porównać przychody z wrażeniami użytkowników podczas konkretnej sesji.

11. Inne zasoby

Gratulujemy ukończenia tych ćwiczeń z programowania. Teraz możesz śledzić wydajność Core Web Vitals w całej witrynie z dużą szczegółowością. Powinieneś też być w stanie określić konkretne typy stron i elementy w witrynie, które powodują wysokie wartości CWV, aby móc skupić się na optymalizacji.

Więcej informacji

Na web.dev znajdziesz wiele artykułów i studiów przypadków ze strategiami poprawy Core Web Vitals. Zacznij od optymalizacji artykułów pod kątem poszczególnych danych:

Dokumentacja

Ten Codelab w dużej mierze opiera się na 2 artykułach z web.dev:
Artykuł o pomiarze Web Vitals w terenie
Artykuł o używaniu danych GA4 dotyczących Web Vitals w BigQuery, w którym znajdziesz wiele innych przykładów zapytań.
Więcej informacji o integracji GA4 – BigQuery Export znajdziesz w Centrum pomocy Google Analytics.

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

1. Zanim zaczniesz

Co musisz zrobić

Czego potrzebujesz

Zanim rozpoczniesz

2. Dodawanie biblioteki web-vitals i tagu gtag do strony internetowej

basic.html

basic.html

basic.html

3. Pomiar Core Web Vitals strony internetowej

4. Bardziej szczegółowe analizowanie danych o podstawowych sygnałach internetowych

CLS entries

LCP entries

INP entries

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

Strukturyzowanie informacji debugowania dla każdego wskaźnika CWV

diagnostics.html

Wysyłanie danych do Google Analytics

diagnostics.html

diagnostics.html

6. Sprawdź, czy dane o podstawowych wskaźnikach internetowych są wypełniane w Google Analytics

7. Wykonywanie zapytań o dane w BigQuery

Podzapytanie do wybierania tylko zdarzeń CWV

Struktura zdarzeń w GA4

Znajdowanie stron i elementów o najgorszych wynikach

Debugowanie innych danych

8. Wizualizacja wyników zapytania w Studiu danych

9. Materializowanie danych Web Vitals

Uruchamianie regularnych zadań materializacji

10. Wizualizacja danych w Studiu danych Google

Korzystanie z narzędzia Web Vitals Connector

Poruszanie się po panelu

11. Inne zasoby

Więcej informacji

Dokumentacja

CLS `entries`

LCP `entries`

INP `entries`