Tworzenie niestandardowego piksela Google Tag Manager

Ostrzeżenie

Niestandardowe piksele to zaawansowana funkcja wymagająca znajomości języka JavaScript. Zapewnienie zgodności z obowiązującymi przepisami, uzyskanie zgód, bezpieczeństwo kodu, rozwiązywanie problemów i aktualizacje należą do Twoich obowiązków. Piksele podlegają Regulaminowi świadczenia usług Shopify.

Dodawanie i używanie niestandardowych pikseli nie jest obsługiwane przez pomoc techniczną Shopify. Jeśli potrzebujesz pomocy w dodaniu lub użyciu niestandardowego piksela, możesz zatrudnić Partnera Shopify.

Możesz użyć Google Tag Manager (GTM) jako niestandardowego piksela do zarządzania pikselami firm zewnętrznych.

Gdy zechcesz przetestować niestandardowy piksel GTM, użyj narzędzia Shopify Pixel Helper, aby upewnić się, że wszystkie zdarzenia, które chcesz śledzić, są dodawane do piaskownicy bez błędów.

Możesz także użyć rozszerzenia strony Google Tag Assistant, aby przetestować, które tagi Google są ładowane na stronie. Jednak funkcja Rozwiązywanie problemów z tagami w Google Tag Assistant nie jest kompatybilna z niestandardowymi pikselami i nie wykrywa żadnych tagów Google w niestandardowym pikselu ani innych pikseli ładowanych przez GTM.

Uwaga

Przed utworzeniem niestandardowego piksela należy przejrzeć dostępne aplikacje w celu uzyskania lepszej stabilności, bezpieczeństwa i wydajności. Jeśli jednak nie ma aplikacji, która spełnia Twoje potrzeby, możesz użyć Google Tag Manager jako niestandardowego piksela.

Przygotowanie do utworzenia niestandardowego piksela

Zanim utworzysz niestandardowy piksel za pomocą Google Tag Manager, zapoznaj się z poniższymi informacjami, aby upewnić się, że rozumiesz, jak skonfigurować piksel:

• Utwórz lub otwórz konto Google Tag Manager i uzyskaj ID kontenera GTM.
• Ze względów bezpieczeństwa menedżery tagów ładowane w naszej piaskownicy mają takie same ograniczenia jak wszystkie inne piksele. Dowiedz się więcej o ograniczeniach piaskownicy pikseli.

Tworzenie niestandardowego piksela Google Tag Manager

Możesz utworzyć niestandardowy piksel Google Tag Manager, aby zarządzać pikselami firm zewnętrznych.

Rozwijaj swoją firmę

Jest to tutorial dla zaawansowanych użytkowników i nie jest on objęty pomocą techniczną Shopify. Jeśli potrzebujesz pomocy w dodaniu niestandardowego piksela, możesz zatrudnić Partnera Shopify.

Kroki:

1. Otwórz konto Google Tag Manager i wybierz konto, za pomocą którego chcesz skonfigurować niestandardowy piksel.
2. Kliknij opcję Administrator, a następnie kliknij opcję Zainstaluj Menedżera tagów Google, aby otworzyć kod instalacyjny.
3. Skopiuj blok kodu, który należy umieścić w 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. Subskrybuj zdarzenia klientów i przesyłaj je do warstwy dataLayer GTM.
7. Aby sprawdzić, jak powinien wyglądać kod, zapoznaj się z przykładowym niestandardowym pikselem Menedżera tagów Google.
8. Skonfiguruj Menedżera tagów Google tak, aby akceptował zdarzenia z niestandardowego piksela.
9. Opcjonalnie: Jeśli masz istniejące wywołania dataLayer.push(event) w pliku checkout.liquid, zastąp je wywołaniem analytics.publish().

Subskrybowanie zdarzeń klientów i przesyłanie ich do warstwy danych GTM

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

Domyślnie dostępny jest zestaw zdarzeń standardowych, które możesz subskrybować. Jeśli jednak chcesz śledzić zdarzenia klientów, które nie należą do oferty zdarzeń standardowych, możesz publikować własne zdarzenia niestandardowe z plików szablonów Liquid.

Poniżej znajduje się przykład subskrypcji standardowego zdarzenia „product_viewed”, które wskazuje, że ktoś wyświetlił produkt. Gdy zdarzenie zostanie wyzwolone, przesyła ono zdarzenie 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 przechwycić 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 pokazuje, jak wysyłać dane do Menedżera tagów Google. Aby przesłać więcej zdarzeń do dataLayer, możesz subskrybować więcej zdarzeń standardowych i niestandardowych.

Uwaga

Ten przykład piksela zawiera również przykładowe ustawienia odzwierciedlające tryb Google Consent Mode v2. Jest to tryb, który pozwala pikselowi respektować wybory odwiedzającego dotyczące zgody na pliki cookie dla ruchu obejmującego Europejski Obszar Gospodarczy (EOG). Więcej informacji o trybie uzyskiwania zgody znajdziesz w Pomocy Google Ads.

Te przykładowe ustawienia mogą nie być zgodne z wymaganiami dla Twojego sklepu, które wynikają z przepisów dotyczących prywatności obowiązujących w Twoim regionie. Jeśli potrzebujesz pomocy w dodawaniu lub dostosowywaniu ustawień zgody w niestandardowym pikselu, zapoznaj się z przewodnikiem Google Konfiguracja trybu uzyskiwania zgody w witrynach lub zatrudnij Partnera Shopify.

// 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,
  });
});

Konfiguracja Menedżera tagów Google w celu akceptowania zdarzeń z niestandardowego piksela

Po utworzeniu niestandardowego piksela należy skonfigurować Menedżera tagów Google tak, aby akceptował zdarzenia z niestandardowego piksela. W tym celu potrzebne są: tag, wyzwalacz i zmienne dataLayer w Menedżerze tagów Google.

Wybrane przykłady standardowych zdarzeń klientów i ich odpowiedniki w Menedżerze tagów Google przedstawiono w poniższej tabeli:

Lista standardowych zdarzeń klientów Shopify do użycia z pikselami w porównaniu z ich odpowiednikami w Menedżerze tagów Google oraz wyzwalacz wymagany do uruchomienia zdarzeń.

Zdarzenie Shopify	Wyzwalacz	Zdarzenie GTM
payment_info_submitted	Przesłanie informacji o płatności	add_payment_info
checkout_address_info_submitted	Przesłanie informacji o wysyłce	add_shipping_info
product_added_to_cart	Dodanie pozycji do koszyka	add_to_cart
checkout_started	Rozpoczęcie realizacji zakupu	begin_checkout
checkout_completed	Zakończenie realizacji zakupu	purchase
product_removed_from_cart	Usunięcie pozycji z koszyka	remove_from_cart
cart_viewed	Wyświetlenie koszyka	view_cart
product_viewed	Wyświetlenie strony szczegółów produktu	view_item
collection_viewed	Wyświetlenie listy pozycji	view_item_list

Parametry zdarzeń tagu GTM muszą być zgodne z oczekiwanymi konwencjami nazewnictwa, aby zdarzenia dataLayer niestandardowego piksela mogły być przetwarzane.

Poniżej przedstawiono przykłady wybranych właściwości zdarzeń dataLayer niestandardowego piksela i ich odpowiedników w parametrach zdarzeń Google Analytics 4 (GA4):

Lista zdarzeń dataLayer niestandardowego piksela używających konwencji nazewnictwa GA4

Zdarzenia dataLayer niestandardowego piksela	Parametry zdarzeń GA4
event.data?.checkout?.currencyCode	currency
event.data?.checkout?.totalPrice?.amount	value
event.data?.checkout?.order?.id	transaction_id
event.data?.checkout?.discountAllocations	coupon
event.data?.checkout?.shippingLine?.price?.amount	shipping
event.data?.checkout?.totalTax	tax
event.data?.checkout?.lineItems	items

Oto przykład z użyciem następującego zdarzenia 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 to niestandardowy typ zdarzenia o nazwie checkout_completed. Pole Nazwa zdarzenia w wyzwalaczu musi być zgodne z kluczem event w niestandardowym pikselu.

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

Utwórz tag, który będzie używać właśnie utworzonego wyzwalacza. W obszarze parametrów zdarzenia dodaj zmienne, które chcesz przechwycić. W powyższym przykładzie zmienne orderId, currency, price, shippingLine i totalTax zostałyby skonfigurowane jako zmienne dataLayer. Za każdym razem, gdy tag się uruchomi, przechwyci on te zmienne dataLayer wraz ze zdarzeniem.

Pamiętaj, że co najmniej jeden tag i jeden wyzwalacz muszą być skonfigurowane w Menedżerze tagów Google, aby transfer danych mógł mieć miejsce.

Zastępowanie starych wywołań dataLayer.push(event) wywołaniami analytics.publish()

Jeśli wcześniej skonfigurowano Menedżera tagów Google, należy zastąpić wywołania dataLayer.push wywołaniami Shopify.analytics.publish(). Wywołania dataLayer.push można znaleźć w plikach theme.liquid, w sekcji Układ w edytorze szablonów.

Należy również zastąpić wywołania dataLayer.push w pliku checkout.liquid. Jednakże, ponieważ plik checkout.liquid nie jest kompatybilny z Shopify Extensions, należy użyć rozszerzenia IU, aby przekazywać dane do pikseli internetowych.

Poniżej przedstawiono uproszczony przykład śledzenia niestandardowego zdarzenia rejestracji e-mail za pomocą dataLayer w plikach theme.liquid:

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

Tak wygląda odpowiednik w Shopify, który przekazuje dane do niestandardowego piksela:

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

Następnie w kodzie niestandardowego piksela dodaj kod podobny do poniższego:

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

Zastępowanie starych wywołań dataLayer.push(data)

Menedżer tagów Google ma funkcję, która pozwala na przekazywanie stanowego obiektu dataLayer przy każdym zdarzeniu. Chociaż piaskownica pikseli Shopify nie zawiera odpowiedniej funkcji, możesz osiągnąć ten sam rezultat, tworząc własny obiekt danych i przekazując go do niestandardowych zdarzeń.

Na przykład zdefiniuj obiekt „customData”, zanim jakiekolwiek niestandardowe zdarzenia zostaną opublikowane:

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

Następnie, gdy tylko zechcesz dołączyć niestandardowe dane, przekaż je do metody publikowania:

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

Uwaga

Obecnie Shopify nie obsługuje dodawania niestandardowych danych do zdarzeń standardowych. Jeśli potrzebujesz takiej funkcji, możesz opublikować własne zdarzenia niestandardowe, aby zastąpić zdarzenia standardowe.

Wskazówki dotyczące konfiguracji Google Analytics 4

Zapoznaj się z poniższymi wskazówkami dotyczącymi konfiguracji Google Analytics 4 (GA4) podczas używania Menedżera tagów Google jako niestandardowego piksela.

Czystsze adresy URL stron

Gdy GA4 działa w piaskownicy, możesz zauważyć, że adresy URL stron zawierają informacje o piaskownicy, w której działają. Jeśli chcesz usunąć informacje o piaskownicy z tych adresów URL, możesz wyłączyć automatyczne śledzenie stron w GA4 i zamiast tego wdrożyć własne śledzenie 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 będzie uruchamiany przez zdarzenie page_viewed. Najczęściej możesz użyć typu tagu Google Analytics: Zdarzenie GA4 i ustawić Nazwę zdarzenia na page_view. Po ustawieniu typu tagu i nazwy zdarzenia należy dodać parametr dla page_location i ustawić jego wartość na taką samą, jak ta, która została przekazana do dataLayer z niestandardowego piksela.

Pomiar zaawansowany

Podczas ładowania GA4 w piaskownicy pikseli Shopify niektóre zdarzenia, które normalnie są automatycznie określane, muszą być konfigurowane ręcznie. Na przykład, kliknięcia linków wychodzących, będące częścią ustawienia Pomiaru zaawansowanego w GA4, nie mogą być uruchamiane automatycznie ze względów bezpieczeństwa podczas korzystania z niestandardowych pikseli. Możliwe jest jednak samodzielne wdrożenie zdarzeń pomiaru zaawansowanego GA4 jako zdarzeń niestandardowych.

Poniższy kod zawiera uproszczony przykład śledzenia kliknięć linków wychodzących:

<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 click, aby była zgodna z nazewnictwem zdarzeń zaawansowanych GA4.

Możesz uzyskać takie samo śledzenie dla dowolnych metryk pomiaru zaawansowanego Google.

Testowanie i debugowanie niestandardowego piksela

Gdy zechcesz przetestować niestandardowy piksel GTM, użyj narzędzia Shopify Pixel Helper, aby upewnić się, że wszystkie zdarzenia, które chcesz śledzić, są dodawane do piaskownicy bez błędów.

Możesz także użyć rozszerzenia strony Google Tag Assistant, aby przetestować, które tagi Google są ładowane na stronie. Jednak funkcja Rozwiązywanie problemów z tagami w Google Tag Assistant nie jest kompatybilna z niestandardowymi pikselami i nie wykrywa żadnych tagów Google w niestandardowym pikselu ani innych pikseli ładowanych przez GTM.