Tworzenie kodu niestandardowego piksela

Ta strona została wydrukowana dnia Apr 18, 2024. Aby zapoznać się z aktualną wersją, odwiedź https://help.shopify.com/pl/manual/promoting-marketing/pixels/custom-pixels/code.

Ta strona zawiera instrukcje dotyczące tworzenia kodu niestandardowego piksela dla piksela firmy zewnętrznej umożliwiającego śledzenie określonych zdarzeń klientów. Po utworzeniu kodu dla piksela niestandardowego możesz dodać piksel do swojego sklepu Shopify.

Na tej stronie

Przygotowanie do utworzenia niestandardowego piksela

Zanim utworzysz piksel niestandardowy, zapoznaj się z poniższymi informacjami dotyczącymi sposobu konfigurowania piksela:

Po dodaniu niestandardowego piksela możesz podać następujące informacje:

  • piksel JavaScript firmy zewnętrznej
  • zdarzenia behawioralne, które chcesz śledzić

Utwórz kod dla niestandardowego piksela

Tworzenie kodu dla niestandardowego piksela obejmuje następujące kroki:

  1. Przygotuj SDK firmy zewnętrznej.
  2. Skonfiguruj piksel, aby śledzić zdarzenia klientów.

Przygotowywanie zestawu Javascript SDK firmy zewnętrznej

Usługa firmy zewnętrznej, z którą współpracujesz, zapewnia kod, który jest zintegrowany z pikselem. Piksel ma zazwyczaj dwa składniki: SDK Javascript i kod śledzenia. Każdy kod HTML w kodzie usługi firmy zewnętrznej musi zostać usunięty, ponieważ środowisko pikseli Shopify obsługuje tylko język JavaScript.

Poniżej przedstawiono przykład piksela Meta. Piksele będą się nieznacznie różnić w zależności od firmy zewnętrznej.

​​<!-- Meta Pixel Code -->
​​<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=618182112209280&ev=PageView&noscript=1"/></noscript>
<!-- End Meta Pixel Code -->

Po usunięciu kodu HTML z kodu Meta, pozostaje Ci zestaw SDK piksela i kod Meta do inicjalizacji. Kod śledzenia zdarzenia PageView został również usunięty, ponieważ zostanie dodany w następnym kroku.

​​!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);

Meta's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

Możesz natknąć się na piksele, które są ładowane za pomocą script src=. Kod HTML nie jest obsługiwany w pikselach Shopify, więc musisz zastąpić script src= odpowiednikiem JavaScript.

Oto przykładowy piksel Google Analytics:

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

Część script src= może zostać zastąpiona odpowiednikiem JavaScript. Zawsze upewnij się, że atrybut src pasuje do wersji HTML:

const script = document.createElement('script');
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID');
script.setAttribute('async', '');
document.head.appendChild(script);

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR_PIXEL_ID');

Google's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

Śledź zdarzenia klientów

Po załadowaniu i inicjalizacji zestawu SDK piksela musisz przekazać do niego zdarzenia w celu śledzenia. Odbywa się to poprzez subskrypcję zdarzeń, a następnie przekazanie danych zdarzeń do zestawu SDK piksela w celu przetworzenia przez usługę firmy zewnętrznej.

Subskrybuj standardowe zdarzenia

Shopify oferuje standardowy zestaw zdarzeń, co ułatwia zapewnienie gromadzenia przez piksel potrzebnych danych.

Możesz subskrybować zdarzenia za pomocą interfejsu API rozszerzenia pikseli Shopify. W subskrybowanym zdarzeniu należy umieścić kod piksela firmy zewnętrznej.

Jest to przykład zdarzenia PageView dla piksela Meta. Pamiętaj, że fbq("track") to część kodu Meta i każda firma będzie mieć własną wersję, w przypadku której musisz odwoływać się do jej dokumentacji.

analytics.subscribe("page_viewed", async (event) => {
  fbq('track', 'PageView');
});

Niektóre zdarzenia mają metadane, które można przekazać do piksela. Oto przykład przekazywania szczegółów produktu do zdarzenia ViewContent Meta:

analytics.subscribe("product_viewed", async (event) => {
  fbq('track', 'ViewContent', {
    content_ids: [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price?.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

Subskrybuj niestandardowe zdarzenia klientów

Jeśli chcesz śledzić dodatkowe zdarzenia klientów (np. kliknięcie przycisku), możesz dodać niestandardowe zdarzenia klientów. Niestandardowe zdarzenia mogą być subskrybowane w taki sam sposób jak zdarzenia standardowe. Podaj nazwę zdarzenia, które chcesz subskrybować, i przekaż informacje pikselowi zewnętrznego dostawcy usług.

Poniżej przedstawiono przykładowy sposób, w jaki opublikowane niestandardowe zdarzenie może pojawić się w plikach liquid szablonu:

<script>Shopify.analytics.publish("special_email_signup", { email_campaign_id: 123});</script>

Poniżej przedstawiono przykładowy sposób, w jaki można skonfigurować piksel w celu subskrybowania tego niestandardowego wydarzenia:

analytics.subscribe("special_email_signup", event => {
  window.dataLayer.push({event: emailSignUp, emailCampaignId: event.customData.email_campaign_id});
});

Aby uzyskać więcej informacji na temat niestandardowych wydarzeń, zapoznaj się z dokumentacją programisty Shopify.

Piksele internetowe są uruchamiane tylko wtedy, gdy odwiedzający wyrażą zgodę na cele Marketing i Analizy na rynkach, dla których skonfigurowano wymóg uzyskania zgody. Każdy piksel może mieć inną nazwę w zależności od celu. Zapoznaj się z dokumentacją piksela, aby dowiedzieć się, w jaki sposób jest on mapowany na definicje Shopify.

Poniżej przedstawiono na przykład sposób mapowania celów Marketing i Analiza na tryb zgody Google:

gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

Przykład niestandardowego piksela

Poniżej przedstawiono przykład kodu piksela Meta. Kod piksela będzie się różnić w zależności od zewnętrznego dostawcy usług i zdarzeń, które chcesz śledzić. Zapoznaj się z odwołaniem do zdarzenia klienta, aby uzyskać listę dostępnych zdarzeń.

Niestandardowy piksel Meta

!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');

// replace YOUR_PIXEL_ID with the pixel ID provided by third-party
fbq('init', YOUR_PIXEL_ID);

// integrate third-party pixel tracking
analytics.subscribe("page_viewed", (event) => {
  fbq('track', 'PageView');
});

analytics.subscribe("product_viewed", (event) => {
  fbq('track', 'ViewContent', {
    content_ids: [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

analytics.subscribe("search_submitted", (event) => {
  fbq('track', 'Search', {
    search_string: event.searchResult.query
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  fbq('track', 'AddToCart', {
    content_ids: [event.data?.cartLine?.merchandise?.productVariant?.id],
    content_name: event.data?.cartLine?.merchandise?.productVariant?.title,
    currency: event.data?.cartLine?.merchandise?.productVariant?.price?.currencyCode,
    value: event.data?.cartLine?.merchandise?.productVariant?.price.amount,
  });
});

analytics.subscribe("payment_info_submitted", (event) => {
  fbq('track', 'AddPaymentInfo');
});

analytics.subscribe("checkout_started", (event) => {
  fbq('track', 'InitiateCheckout');
});

analytics.subscribe("checkout_completed", (event) => {
  fbq('track', 'Purchase', {
    currency: event.data?.checkout?.currencyCode,
    value: event.data?.checkout?.totalPrice?.amount,
  });
});

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

Wypróbuj za darmo