E-commerce w GA4 (analytics.js – standardowe e-commerce): wysyłanie zdarzeń e-commerce GA4

Z tego przewodnika dowiesz się, jak przenieść dotychczasową implementację standardowego e-commerce do analytics.js Universal Analytics, aby używać zdarzeń e-commerce Google Analytics 4.

Odwiedź Centrum migracji dla programistów, aby zapoznać się z dodatkowymi przewodnikami i materiałami po migracji.

Wynik

Z tego przewodnika dowiesz się, że nowa implementacja Google Analytics 4 będzie wysyłać zdarzenia e-commerce GA4 do nowej usługi w GA4 i do dotychczasowej usługi w Universal Analytics. Dotychczasowa usługa Universal Analytics będzie otrzymywać dane e-commerce GA4, ale raporty pozostaną bez zmian.

Migracja składa się z 2 etapów:

Zanim zaczniesz

  1. Sprawdź, czy te warunki opisują Twoją obecną implementację:

    • Używasz usługi w Universal Analytics.
    • Twoja witryna używa biblioteki analytics.js do wysyłania zdarzeń e-commerce.
  2. Zapoznaj się z opcjami migracji w przypadku implementacji e-commerce, aby poznać wady każdej z nich. Potwierdź, że chcesz korzystać ze zdarzeń e-commerce Google Analytics 4 w swojej obecnej implementacji Universal Analytics zgodnie z tym przewodnikiem.

  3. Aby dowiedzieć się, jak zdarzenie zakupu w GA4 jest przesyłane do usługi w UA, zapoznaj się z dokumentacją dotyczącą zgodności zdarzeń.

Kompromisy i kwestie

Zapoznaj się z podanymi niżej informacjami, aby w pełni zrozumieć konsekwencje korzystania ze zdarzeń e-commerce Google Analytics 4 w ramach implementacji e-commerce Universal Analytics.

Zalety Wady
  • Wyświetlanie danych e-commerce w raportach GA4 i Universal Analytics.
  • Przejście na zdarzenie purchase w GA4 zapewni Ci pełne raporty e-commerce UA.
  • Dodatkowe nakłady pracy związane z migracją z tagu analytics.js do tagu gtag.js. Zalecamy przeniesienie wszystkich pomiarów niestandardowych z tagu analytics.js do tagu gtag.js (np.zdarzeń, odsłon, czasu itp.).

Implementacja

1. Przenieś pomiary UA z tagu analytics.js do tagu gtag.js

Aby wysyłać zdarzenia e-commerce w GA4, musisz przejść z tagu analytics.js na tag gtag.js, w tym ze wszelkich pomiarów niestandardowych.

Ogólnie kroki migracji obejmują:

  1. Usuń fragment kodu analytics.js.
  2. Zainstaluj tag Google (gtag.js) i skonfiguruj go za pomocą identyfikatora śledzenia usługi w UA.
  3. Przenieś niestandardowy kod pomiarowy z analytics.js do tagu gtag.js. W sekcjach poniżej dowiesz się, jak przenieść standardową transakcję e-commerce. Ogólne informacje o migracji innych scenariuszy pomiarów znajdziesz w artykule Migracja pomiarów.

Przed: tag analytics.js

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');    // Universal Analytics property.
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Po: tag Google (gtag.js)

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXX-Y');    // Universal Analytics property.
</script>

2. Zaktualizuj implementację e-commerce, aby wysyłać zdarzenia GA4

Zaktualizuj dotychczasową implementację e-commerce, aby zacząć korzystać ze zdarzeń e-commerce Universal Analytics na zdarzenia Google Analytics 4. Gdy wykonasz ten krok, Twoja usługa w Universal Analytics będzie otrzymywać zdarzenie purchase z GA4. Zapoznaj się z informacjami o wydatkach i uwagach, aby poznać konsekwencje tej aktualizacji.

Przykład poniżej pokazuje, jak przenieść standardowe zdarzenie transakcji e-commerce za pomocą tagu analytics.js do odpowiadającego mu zdarzenia purchase e-commerce w GA4, które jest zgodne z Universal Analytics.

Wcześniej: standardowa transakcja e-commerce UA (analytics.js)

Poniższy przykład przedstawia standardową implementację e-commerce za pomocą tagu analytics.js w przypadku transakcji zawierającej 2 elementy:

// Add the transaction.
ga('ecommerce:addTransaction', {
  id: '1234',     // Transaction ID.
  affiliation: 'Google Store',
  revenue: '29.97',
  shipping: '5.25',
  tax: '2.42'
});

// Add the items belonging to the transaction.
ga('ecommerce:addItem', {
  id: '1234',     // Transaction ID.
  name: 'Android Warhol T-Shirt',
  sku: 'P12345',  // Item ID.
  category: 'Apparel/T-Shirts',
  price: '12.99',
  quantity: '2'
});
ga('ecommerce:addItem', {
  id: '1234',     // Transaction ID.
  name: 'Flame challenge T-Shirt',
  sku: 'P67890',  // Item ID.
  category: 'Apparel/T-Shirts',
  price: '3.99',
  quantity: '1'
});
ga('ecommerce:send');

Po: zakup e-commerce w GA4 (gtag.js)

Najważniejsze różnice w przypadku migracji zdarzenia transakcji analytics.js do zdarzenia purchase w GA4 to:

  • GA4 ma jedno zdarzenie purchase, które obejmuje wszystkie szczegóły i elementy związane z transakcją. Tag analytics.js wykonuje wiele poleceń e-commerce ga(), aby rejestrować te same informacje.
  • GA4 zawiera jedno pole transaction_id dla całego zdarzenia. Tag analytics.js wymaga, aby identyfikator transakcji był dołączany do każdego elementu.
  • GA4 ma wiele pól kategorii produktów. Do opisania hierarchii analytics.js używa pojedynczego pola kategorii z separatorem /. Jednak zdarzenia GA4 z wieloma polami kategorii produktów będą działać w przypadku usługi w UA, ponieważ przekształcanie parametrów kategorii.
 gtag('event', 'purchase', {
   currency: 'USD',
   transaction_id: '1234',    // Transaction ID.
   value: 29.97,
   affiliation: 'Google Store',
   shipping: 5.25,
   tax: 2.42,
   items: [
    {
      item_id: 'P12345',     // Item ID.
      item_name: 'Android Warhol T-Shirt',
      item_category: 'Apparel',
      item_category2: 'T-Shirts',
      price: 12.99,
      quantity: 2
    },
    {
      item_id: 'P67890',    // Item ID.
      item_name: 'Flame challenge T-Shirt',
      item_category: 'Apparel',
      item_category2: 'T-Shirts',
      price: 3.99,
      quantity: 1
    }
  ]
});

3. Tworzenie i konfigurowanie nowej usługi w GA4

Po zaktualizowaniu implementacji e-commerce pod kątem wysyłania zdarzeń e-commerce GA4, wykonaj jedną z tych czynności, aby zacząć wysyłać dane do nowej usługi w Google Analytics 4.

Opcja 1. Użyj Asystenta konfiguracji usługi w Google Analytics 4 i włącz połączone tagi witryny

Asystent konfiguracji usługi w Google Analytics 4 automatycznie utworzy nową usługę w GA4 i skopiuje z niej te ustawienia: nazwa usługi, adres URL witryny, strefa czasowa i ustawienia waluty. Możesz też włączyć funkcję połączonego tagu witryny, aby korzystać z dotychczasowej implementacji tagu gtag.js Universal Analytics w celu wczytywania nowej usługi w GA4.

Aby utworzyć i skonfigurować nową usługę w Google Analytics 4, wykonaj czynności opisane w artykule Asystent konfiguracji usługi w Google Analytics 4. Aby korzystać z funkcji połączonego tagu witryny, zaznacz opcję Włącz zbieranie danych za pomocą istniejących tagów.

Opcja 2. Zaktualizuj fragment kodu gtag.js

  1. Utwórz nową usługę Google Analytics 4.
    • Aby dodać usługę Google Analytics 4, użyj Asystenta konfiguracji usługi w Google Analytics 4. Gdy pojawi się prośba podczas konfiguracji, odznacz opcję Włącz zbieranie danych, korzystając z istniejących tagów. Możesz też utworzyć usługę w Google Analytics 4 bez korzystania z Asystenta konfiguracji usługi w Google Analytics 4. Zaletą Asystenta jest to, że skopiuje on niektóre podstawowe ustawienia z usługi w Universal Analytics.
  2. Znajdź identyfikator tagu usługi Google Analytics 4.
  3. Dodaj usługę Google Analytics 4 do dotychczasowego fragmentu kodu gtag.js, używając polecenia config z identyfikatorem tagu.

Poniżej znajdziesz przykładowy fragment kodu gtag.js, który skonfigurował usługę Universal Analytics i Google Analytics 4.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXX-Y');         // Universal Analytics property.
  gtag('config', 'TAG_ID');  // Google Analytics 4 property.
</script>

4. (Opcjonalnie) Pomiar dodatkowych zdarzeń e-commerce

Aby w pełni korzystać z raportów e-commerce w GA4, wdróż dodatkowe zdarzenia e-commerce w GA4. Więcej informacji znajdziesz w artykule o e-commerce w Google Analytics 4.

Jeśli używasz domyślnej konfiguracji fragmentu kodu gtag.js, zdarzenia GA4 będą wysyłane zarówno do usług w UA, jak i do GA4. Zdarzenia GA4 wysyłane do usługi w UA będą przetłumaczone zgodnie z definicją zawartą w dokumentacji zgodności zdarzeń. Jeśli wolisz użyć innego działania, możesz użyć funkcji Grupowanie i przekierowywanie danych w tagu gtag.js, aby określić, które zdarzenia będą wysyłane do usługi w UA i GA4. Możesz np. wysyłać zdarzenie purchase zarówno do usługi w UA, jak i do GA4, ale do usługi w GA4 tylko do innych zdarzeń e-commerce GA4.