Tworzenie niestandardowego piksela menedżera tagów Google

Ta strona została wydrukowana dnia Mar 21, 2023. Aby zapoznać się z aktualną wersją, odwiedź https://help.shopify.com/pl/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial.

Ta strona zawiera instrukcje dotyczące korzystania z menedżera tagów Google (GTM) jako niestandardowego piksela do zarządzania pikselami firm zewnętrznych.

Przygotowanie do utworzenia niestandardowego piksela

Zanim utworzysz niestandardowy piksel za pomocą menedżera tagów Google, zapoznaj się z poniższymi informacjami dotyczącymi sposobu konfigurowania piksela:

Utwórz lub otwórz konto menedżera tagów Google i uzyskaj ID kontenera GTM.
Ze względów bezpieczeństwa menedżer tagów załadowany do naszego środowiska testowego ma takie same ograniczenia jak wszystkie inne piksele. Dowiedz się więcej o ograniczeniach środowiska testowego pikseli.

Tworzenie niestandardowego piksela menedżera tagów Google

Kroki

Otwórz konto menedżera tagów Google i wybierz konto, dla którego chcesz skonfigurować niestandardowy piksel.
Kliknij opcję Administrator, a następnie Zainstaluj menedżera tagów Google, aby otworzyć kod instalacji.
Skopiuj blok kodu, który należy do sekcji head strony.
Usuń tagi HTML z tego bloku kodu.
Wstaw pozostały kod do nowego niestandardowego piksela Shopify.
Zainicjuj obiekt warstwy danych dataLayer za pomocą window.dataLayer = window.dataLayer || [];.

Twój niestandardowy kod piksela powinien wyglądać podobnie, a GTM-XXXXXXX powinien być taki sam jak ID Twojego kontenera GTM.

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');

window.dataLayer = window.dataLayer || [];

Subskrybowanie zdarzeń klientów i wypychanie do warstwy danych (dataLayer) GTM

Zamiast dodawać wywołania dataLayer.push() do plików szablonów liquid, wszystkie czynności dotyczące warstwy danych (dataLayer ) GTM można wykonywać w kodzie niestandardowego piksela.

Dostępny jest domyślny zbiór typowych zdarzeń niestandardowych, z których można od razu skorzystać. Możesz jednak również publikować własne zdarzenia niestandardowe z plików szablonów liquid.

Poniżej przedstawiono przykład subskrypcji standardowego zdarzenia "product_viewed", które oznacza, że ktoś wyświetlił produkt. Po wyzwoleniu zdarzenia jest ono wypychane do warstwy danych (dataLayer).

analytics.subscribe('product_viewed', (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_title': event.data.productVariant.title,
  });
});

W tym przykładzie przekazywane są dane o tytule produktu, który może zostać przekazany do innych tagów za pomocą zmiennych menedżera tagów Google.

Zastąpienie starych wywołań dataLayer.push(event) przez analytics.publish()

Jeśli wcześniej skonfigurowano menedżera tagów Google, musisz zastąpić wywołania dataLayer.push wywołaniami Shopify.analytics.publish().

Poniżej przedstawiono uproszczony przykład niestandardowego zdarzenia rejestracji e-mail śledzonego za pomocą dataLayer.

<script>
  dataLayer.push({ event: 'email_signup', email: customer.email });
</script>

Odpowiednik Shopify wygląda następująco i powoduje wypychanie danych do Twojego niestandardowego piksela.

<script>
  Shopify.analytics.publish('email_signup', {email: customer.email });
</script>

Następnie w kodzie niestandardowego piksela dodaj coś takiego.

analytics.subscribe("email_signup", (event) => {
  window.dataLayer.push({
   'event': 'email_signup',
   'email': event.customData.email,
  });
});

Zastąpienie starego dataLayer.push(data)

Menedżer tagów Google ma funkcję, która umożliwia wypychanie stanowego obiektu warstwy danych przy każdym zdarzeniu. Gdy środowisko testowe piksela Shopify nie oferuje równoważnej funkcji, możesz osiągnąć ten sam wynik, tworząc własny obiekt danych i przekazując go do niestandardowych zdarzeń.

Możesz na przykład zdefiniować obiekt "customData" przed opublikowaniem dowolnego z niestandardowych wydarzeń.

<script>
  const customData = {email: customer.email}
</script>

Wówczas za każdym razem, gdy chcesz uwzględnić swoje niestandardowe dane, możesz przekazywać je do swojej metody publikowania.

<script>
  Shopify.analytics.publish('email_signup', customData);
</script>

Przykład niestandardowego piksela menedżera tagów Google

Poniższy przykład to uproszczona wersja niestandardowego piksela menedżera tagów Google, która wyświetla sposób wysyłania danych do GTM. Aby wypchnąć więcej zdarzeń do warstwy danych (dataLayer), możesz subskrybować więcej standardowych i niestandardowych zdarzeń.

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');

window.dataLayer = window.dataLayer || [];

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_id': event.data.product.id,
   'product_title': event.data.product.title,
  });
});

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
   'event': 'checkout_completed',
   'order_id': event.data.order.id,
   'currency': event.data.checkout.currencyCode,
  });
});

Porady i wskazówki dotyczące konfigurowania Google Analytics 4

Możesz skorzystać z poniższych wskazówek dotyczących konfigurowania Google Analytics 4 (GA4), gdy używasz menedżera tagów Google jako niestandardowego piksela.

URL stron oczyszczarki

Gdy GA4 działa w środowisku testowym, możesz zauważyć, że adresy URL stron zawierają informacje o środowisku testowym, w którym działają. Jeśli chcesz usunąć informacje o środowisku testowym z tych adresów URL, możesz wyłączyć automatyczne śledzenie stron GA4, a zamiast tego zaimplementować własne, za pomocą standardowego zdarzenia page_viewed.

analytics.subscribe('page_viewed', (event) => {
  window.dataLayer.push({
   'event': 'page_viewed',
   'page_location': event.context.window.location.href,
   'page_title': event.context.document.title,
  });
});

Po opublikowaniu własnego zdarzenia w warstwie danych (dataLayer) możesz utworzyć tag page_view GA4, który jest wyzwalany dla zdarzenia page_viewed. Najczęściej używa się typu tagu Google Analytics: zdarzenie GA4 i ustawia nazwę zdarzenia na page_view. Po skonfigurowaniu typu tagu i nazwy zdarzenia należy dodać parametr dla page_location i ustawić wartość na tę samą wartość, która została przekazana do warstwy danych z piksela klienta.

Rozszerzone pomiary

Podczas ładowania GA4 wewnątrz środowiska testowego piksela Shopify niektóre zdarzenia, które zostają zwykle automatycznie wywnioskowane, będą wymagać ręcznej skonfigurowania. Na przykład, kliknięcia linku wychodzącego w ramach ustawienia rozszerzonych pomiarów GA4 nie mogą być wyzwalane automatycznie ze względów bezpieczeństwa, jeśli używasz niestandardowych pikseli. Możesz jednak samodzielnie zaimplementować zdarzenia rozszerzonych pomiarów GA4 jako zdarzenia niestandardowe.

Poniższy kod zawiera uproszczony przykład śledzenia kliknięć linku wychodzącego.

<script>
  function detectOutboundLink() {
    // add your logic for determining if a link click is outbound

    // if the link click is outbound then publish it
    if (isOutboundLink) {
      Shopify.analytics.publish('outbound_link', { link_url: link_url });
    }
  }
</script>

Na koniec w GTM utwórz tag GA4, który wysyła kliknięcie linku do GA4, upewniając się, że nazwa zdarzenia to kliknięcie w celu zapewnienia zgodności z nazewnictwem rozszerzonych zdarzeń GA4.

Możesz zapewnić to samo śledzenie dla dowolnych rozszerzonych wskaźników pomiarów Google.

Testowanie i debugowanie

Otwórz sklep Shopify w przeglądarce Chrome.
Otwórz kartę sieci w swojej przeglądarce i znajdź żądanie o nazwie collect?..., które będzie zawierać ID Twojego pomiaru GA4, jeśli dane są wysyłane do GA4 z menedżera tagów Google.
Na koncie Google Analytics kliknij opcję Administrator, a następnie kliknij Widok debugowania.
Upewnij się, że do Twojej przeglądarki Chrome dodano rozszerzenie Google GA Debug:
- Włącz GA Debug
- Otwórz sklep Shopify na osobnej karcie.
- Wróć do GA4 w widoku debugowania i przejrzyj zdarzenia page_viewed.

Tworzenie niestandardowego piksela menedżera tagów Google

Przygotowanie do utworzenia niestandardowego piksela

Tworzenie niestandardowego piksela menedżera tagów Google

Kroki

Subskrybowanie zdarzeń klientów i wypychanie do warstwy danych (dataLayer) GTM

Zastąpienie starych wywołań dataLayer.push(event) przez analytics.publish()

Zastąpienie starego dataLayer.push(data)

Przykład niestandardowego piksela menedżera tagów Google

Porady i wskazówki dotyczące konfigurowania Google Analytics 4

URL stron oczyszczarki

Rozszerzone pomiary

Testowanie i debugowanie

Gotowy(-a) do rozpoczęcia sprzedaży za pomocą Shopify?