Tworzenie niestandardowego piksela menedżera tagów Google

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:

Tworzenie niestandardowego piksela menedżera tagów Google

Kroki:

  1. Otwórz konto menedżera tagów Google i wybierz konto, dla którego chcesz skonfigurować niestandardowy piksel.
  2. Kliknij opcję Administrator, a następnie Zainstaluj menedżera tagów Google, aby otworzyć kod instalacji.
  3. Skopiuj blok kodu, który należy do sekcji head strony.
  4. Usuń tagi HTML z bloku kodu. Na przykład, <script></script>.
  5. Wstaw pozostały kod do nowego niestandardowego piksela Shopify.
  6. Subskrybowanie zdarzeń klientów i wypychanie do warstwy danych (dataLayer) GTM.
  7. Aby sprawdzić, w jaki sposób powinien być wyświetlany kod, zapoznaj się z przykładowym niestandardowym pikselem Menedżer tagów Google.
  8. Skonfiguruj Menedżera tagów Google tak, aby akceptował zdarzenia z niestandardowego piksela.
  9. 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ń klienta, które możesz subskrybować. Jeśli jednak chcesz śledzić zdarzenia klienta, 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

  1. Otwórz sklep Shopify w przeglądarce Chrome.
  2. Dodaj rozszerzenie starszej wersji Asystenta tagów Google dla Chrome do swojej przeglądarki.
  3. Kliknij ikonę rozszerzenia, a następnie opcję Włącz.
  4. Przejdź do swojej witryny, a następnie uruchom zdarzenia, które chcesz przetestować.
  5. W rozszerzeniu kliknij tag Menedżer tagów Google. W sekcji Warstwa danych powinien być wyświetlany ładunek zdarzenia, które zostało wyzwolone.
  6. 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.

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

Wypróbuj za darmo