Tworzenie niestandardowego piksela menedżera tagów Google

Możesz użyć Menedżera tagów Google (GTM) jako niestandardowego piksela do zarządzania pikselami firm zewnętrznych.

Gdy będziesz gotowy(-a) do testowania niestandardowego piksela, możesz użyć rozszerzenia starszej wersji Asystenta tagów Google dla Chrome, aby przetestować niestandardowe piksele. Asystent tagów Google nie działa z niestandardowymi pikselami.

Na tej stronie

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

Możesz utworzyć niestandardowy piksel Menedżera tagów Google, aby zarządzać pikselami firm zewnętrznych.

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 bloku kodu. Na przykład, <script></script>.
Wstaw pozostały kod do nowego niestandardowego piksela Shopify.
Subskrybowanie zdarzeń klientów i wypychanie do warstwy danych (dataLayer) GTM.
Aby sprawdzić, w jaki sposób powinien być wyświetlany kod, zapoznaj się z przykładowym niestandardowym pikselem Menedżer tagów Google.
Skonfiguruj Menedżera tagów Google tak, aby akceptował zdarzenia z niestandardowego piksela.
Opcjonalnie: Jeśli istnieją już wywołania dataLayer.push(event) w pliku checkout.liquid, zastąp go wywołaniami analytics.publish().

Subskrybuj zdarzenia klientów i przesyłaj je do data layer GTM

Możesz subskrybować zdarzenia klientów za pomocą dataLayer GTM w kodzie niestandardowego piksela.

Domyślnie dostępny jest zbiór standardowych zdarzeń, które możesz subskrybować. Jeśli jednak chcesz śledzić zdarzenia klientów, które nie są częścią oferty standardowych zdarzeń, możesz opublikować własne niestandardowe zdarzenia 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 przesyłane do dataLayer.

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

W tym przykładzie tytuł produktu jest przekazywany w ładunku zdarzenia. Możesz użyć zmiennej Menedżera tagów Google, aby zarejestrować tytuł produktu z ładunku zdarzenia w wybranym tagu.

Przykładowy niestandardowy piksel Menedżera tagów Google

Poniższy przykład to uproszczona wersja niestandardowego piksela Menedżera tagów Google, która przedstawia sposób wysyłania danych do Menedżera tagów Google. Aby przesłać więcej zdarzeń do dataLayer, możesz subskrybować więcej standardowych i niestandardowych zdarzeń.

// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

//Initialize GTM tag
(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');

//Google Consent Mode v2
gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("payment_info_submitted", (event) => {
  window.dataLayer.push({
    event: "payment_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_shipping_info_submitted", (event) => {
  window.dataLayer.push({
    event: checkout_shipping_info_submitted,
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_address_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_address_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_contact_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_contact_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_started", (event) => {
  window.dataLayer.push({
    event: "checkout_started",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  window.dataLayer.push({
    event: "product_added_to_cart",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    price: event.data?.cartLine?.merchandise?.price?.amount,
    currency: event.data?.cartLine?.merchandise?.id,
    product_title: event.data?.cartLine?.merchandise?.product?.title,
    quantity: event.data?.cartLine?.quantity,
    total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
  });
});

analytics.subscribe("cart_viewed", (event) => {
  window.dataLayer.push({
    event: "cart_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    total_cost: event.data?.cart?.cost?.totalAmount?.amount,
    quantity: event.data?.cart?.totalQuantity,
    cart_id: event.data?.cart?.id,
  });
});

analytics.subscribe("page_viewed", (event) => {
  window.dataLayer.push({
    event: "page_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    page_title: event.context.document.title,
  });
});

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    product_id: event.data?.productVariant?.product?.id,
    product_title: event.data?.productVariant?.title,
    product_sku: event.data?.productVariant?.sku,
  });
});

analytics.subscribe("search_submitted", (event) => {
  window.dataLayer.push({
    event: "search_submitted",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    query: event.data?.searchResult?.query,
  });
});

analytics.subscribe("collection_viewed", (event) => {
  window.dataLayer.push({
    event: "collection_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    collection_id: event.data?.collection?.id,
    collection_title: event.data?.collection?.title,
  });
});

Skonfiguruj Menedżera tagów Google tak, aby akceptował zdarzenia z piksela niestandardowego

Po utworzeniu niestandardowego piksela musisz skonfigurować Menedżera tagów Google tak, aby akceptował zdarzenia z tego piksela. Do tego celu potrzebujesz tagu, wyzwalacza i zmiennych dataLayer w Menedżerze tagów Google.

Kilka przykładów wybranych standardowych zdarzeń klienta i ich odpowiedników w Menedżerze tagów Google znajduje się w poniższej tabeli:

Lista standardowych zdarzeń klienta Shopify i ich odpowiedników w GTM
Zdarzenie Shopify	Wyzwalacz	Zdarzenie GTM
payment_info_submitted	Prześlij informacje o płatności	add_payment_info
checkout_address_info_submitted	Prześlij informacje o wysyłce	add_shipping_info
product_added_to_cart	Dodaj pozycję do koszyka zakupów	add_to_cart
checkout_started	Rozpocznij realizację zakupu	begin_checkout
checkout_completed	Zakończ realizację zakupu	zakup
product_removed_from_cart	Usuń pozycję z koszyka	remove_from_cart
cart_viewed	Pokaż koszyk zakupów	view_cart
product_viewed	Wyświetl stronę szczegółów produktu	view_item
collection_viewed	Wyświetl listę pozycji	view_item_list

Parametry zdarzenia tagu GTM muszą być zgodne z oczekiwanymi konwencjami nazewnictwa, aby zdarzenia dataLayer niestandardowego piksela zostały przetworzone.

Poniżej przedstawiono kilka przykładów wybranych właściwości zdarzeń dataLayer niestandardowego piksela i parametrów zdarzeń Google Analytics 4 (GA4) będących ich odpowiednikami:

Wybierz listę zdarzeń `dataLayer` niestandardowego piksela przy użyciu konwencji nazewnictwa GA4
Zdarzenia `dataLayer` niestandardowego piksela	Parametry zdarzenia GA4
`event.data?.checkout?.currencyCode`	`waluta`
`event.data?.checkout?.totalPrice?.amount`	`value`
`event.data?.checkout?.order?.id`	`transaction_id`
`event.data?.checkout?.discountAllocations`	`kupon`
`event.data?.checkout?.shippingLine?.price?.amount`	`wysyłka`
`event.data?.checkout?.totalTax`	`tax`
`event.data?.checkout?.lineItems`	`pozycje`

Oto przykład, w którym wykorzystane jest zdarzenie checkout_completed:

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    price: event.data.checkout.totalPrice.amount,
    shippingLine: event.data.checkout.shippingLine.price.amount,
    totalTax: event.data.checkout.totalTax,
  });
});

Wyzwalacz Menedżera tagów Google jest niestandardowym typem zdarzenia o nazwie checkout_completed. Pole Nazwa zdarzenia w wyzwalaczu musi być zgodne z kluczem zdarzenia w pikselu niestandardowym.

orderId i currency to zmienne używane w Menedżerze tagów Google do rejestrowania danych ze zdarzenia. Można je mapować na zmienną dataLayer w Menedżerze tagów Google. Każda zmienna zdarzenia wymaga własnej zmiennej dataLayer. Ustaw wyzwalacz tak, aby uruchamiał się przy wszystkich niestandardowych zdarzeniach.

Utwórz tag, który używa właśnie utworzonego wyzwalacza. W obszarze parametrów zdarzenia dodaj zmienne, które chcesz zarejestrować. W powyższym przykładzie zmienne orderId, currency, price, shippingLine i totalTax są rejestrowane jako zmienne dataLayer. Przy każdej aktywacji tagu będzie on rejestrować te zmienne dataLayer wraz ze zdarzeniem.

Pamiętaj, że aby transfer danych mógł zostać wykonany, w Menedżerze tagów Google musi być skonfigurowany co najmniej jeden tag i reguła.

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

Jeśli masz skonfigurowanego Menedżera tagów Google, musisz zastąpić wywołania dataLayer.push wywołaniami Shopify.analytics.publish(). Wywołania dataLayer.push znajdują się w plikach theme.liquid w sekcji Układ edytora szablonów.

Musisz także zastąpić wywołania dataLayer.push w pliku checkout.liquid. Jednak, ponieważ plik checkout.liquid nie jest kompatybilny z funkcjonalnością Checkout Extensibility, musisz użyć rozszerzenia IU, aby przesłać dane do pikseli internetowych.

Poniżej przedstawiono uproszczony przykład niestandardowego zdarzenia rejestracji w celu otrzymywania e-maili, śledzonego za pomocą zmiennej dataLayer w plikach theme.liquid.

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

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 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ć tę samą wartość, która została przekazana do dataLayer z niestandardowego piksela.

Rozszerzone pomiary

Podczas ładowania GA4 wewnątrz środowiska testowego piksela Shopify niektóre zdarzenia, które są zwykle automatycznie generowane, będą musiały być skonfigurowane ręcznie. 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.
Dodaj rozszerzenie starszej wersji Asystenta tagów Google dla Chrome do swojej przeglądarki.
Kliknij ikonę rozszerzenia, a następnie opcję Włącz.
Przejdź do swojej witryny, a następnie uruchom zdarzenia, które chcesz przetestować.
W rozszerzeniu kliknij tag Menedżer tagów Google. W sekcji Warstwa danych powinien być wyświetlany ładunek zdarzenia, które zostało wyzwolone.
W rozszerzeniu znajdują się również inne tagi załadowane przez Menedżera tagów Google. Możesz kliknąć te tagi, aby przejrzeć dane, które zostały do nich wysłane.