Pomoc
Zaloguj

Utwórz kod niestandardowego piksela

Na tej stronie znajdują się instrukcje tworzenia kodu niestandardowego piksela dla piksela firmy zewnętrznej, aby umożliwić śledzenie określonych zdarzeń klientów. Po utworzeniu kodu dla niestandardowego piksela możesz dodać piksel do swojego sklepu Shopify.

Na tej stronie

Przygotowanie do utworzenia niestandardowego piksela

Przed utworzeniem niestandardowego piksela zapoznaj się z poniższymi informacjami, aby upewnić się, że rozumiesz, jak skonfigurować piksel:

Dodając niestandardowy piksel, określasz następujące informacje:

  • Piksel JavaScript firmy zewnętrznej.
  • Zdarzenia behawioralne, które chcesz śledzić.
  • Ustawienia zgody na prywatność klientów.

Utworzenie kodu dla niestandardowego piksela

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

  1. Przygotuj pakiet SDK Javascript firmy zewnętrznej.
  2. Skonfiguruj piksel tak, aby śledził zdarzenia klientów.
  3. Skonfiguruj ustawienia zgody na prywatność klientów dla piksela.

Przygotowanie pakietu SDK Javascript firmy zewnętrznej

Usługa firmy zewnętrznej, z której korzystasz, dostarcza kod zintegrowany z pikselem. Piksel zazwyczaj składa się z 2 komponentów: pakietu SDK Javascript i kodu śledzenia. Wszelkie elementy HTML w kodzie usługi firmy zewnętrznej należy usunąć, ponieważ piaskownica pikseli Shopify obsługuje tylko JavaScript.

Oto przykład piksela Meta. Piksele poszczególnych firm zewnętrznych mogą się nieznacznie różnić.

​​<!-- 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 pakiet SDK piksela Meta i kod do jego inicjalizacji. Kod śledzenia zdarzeń PageView również został 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);

Pakiet SDK piksela Meta nie przesyła automatycznie danych z niestandardowego piksela Shopify. Aby przesłać dane, należy zasubskrybować zdarzenia.

Możesz natknąć się na piksele ładowane za pomocą script src=. Kod HTML nie jest obsługiwany w pikselach Shopify, dlatego należy zastąpić script src= jego odpowiednikiem w języku JavaScript.

Oto przykładowy piksel Google Analytics, który ładuje się za pomocą script src=:

<!-- 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żna zastąpić odpowiednikiem w języku JavaScript. Zawsze upewnij się, że atrybut src jest zgodny z wersją 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');

Zestaw SDK piksela Google nie przesyła danych automatycznie z niestandardowego piksela Shopify. Aby przesłać dane, musisz zasubskrybować zdarzenia.

Śledzenie zdarzeń klientów

Po załadowaniu i zainicjowaniu zestawu SDK piksela musisz przekazać do niego zdarzenia w celu śledzenia. Odbywa się to poprzez subskrybowanie zdarzeń, a następnie przekazanie danych o zdarzeniach do zestawu SDK piksela w celu ich przetworzenia przez usługę zewnętrzną.

Subskrybowanie zdarzeń standardowych

Shopify oferuje standardowy zestaw zdarzeń, co ułatwia upewnienie się, że piksel gromadzi potrzebne dane.

Możesz subskrybować zdarzenia za pomocą Shopify Pixels Extension API. Musisz umieścić kod piksela firmy zewnętrznej razem ze zdarzeniem, które subskrybujesz.

Jest to przykład zdarzenia PageView dla piksela Meta. Pamiętaj, że kod fbq("track") jest częścią kodu Meta i każda firma będzie miała jego własną wersję, w przypadku której trzeba będzie zapoznać się z dokumentacją.

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 niektórych szczegółów produktu do zdarzenia ViewContent firmy 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,
  });
});

Subskrybowanie niestandardowych zdarzeń klientów

Jeśli chcesz śledzić dodatkowe zdarzenia klientów, takie jak kliknięcie przycisku przez użytkownika, możesz dodać niestandardowe zdarzenia klientów. Niestandardowe zdarzenia można subskrybować w taki sam sposób jak zdarzenia standardowe. Zadeklaruj nazwę zdarzenia, które chcesz subskrybować, i przekaż informacje do piksela zewnętrznego dostawcy usług.

Oto przykład, jak opublikowane zdarzenie niestandardowe może wyglądać w plikach liquid szablonu:

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

Oto przykład, jak można skonfigurować piksel w celu subskrybowania tego niestandardowego zdarzenia:

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

Więcej informacji na temat zdarzeń niestandardowych można znaleźć w dokumentacji Shopify dla deweloperów.

Na rynkach skonfigurowanych tak, by wymagały uzyskania zgody, takich jak Europejski Obszar Gospodarczy (EOG) i Wielka Brytania, piksele internetowe działają tylko wtedy, gdy odwiedzający stronę internetową udzielili uprawnień wymaganych w konfiguracji piksela.

Domyślnie nowe niestandardowe piksele wymagają uprawnień do celów marketingowych i analitycznych. Możesz dostosować wymagane uprawnienia w sekcji Prywatność klienta > Uprawnienia w szczegółach niestandardowego piksela.

Podobnie piksele skonfigurowane jako sprzedaż danych nie będą działać w przypadku klientów, którzy zrezygnowali ze sprzedaży lub udostępniania danych, chyba że piksel obsługuje ograniczone wykorzystanie danych. Domyślnie nowe niestandardowe piksele kwalifikują się jako sprzedaż danych. Możesz dostosować, czy zebrane dane kwalifikują się jako sprzedaż danych, w sekcji Prywatność klienta > Sprzedaż danych w szczegółach niestandardowego piksela.

Deweloperzy niestandardowych pikseli mogą dowiedzieć się więcej o zbieraniu i rejestrowaniu zgody.

Każdy piksel może mieć inną nazwę dla każdego celu. Należy zapoznać się z dokumentacją piksela firmy zewnętrznej, aby zrozumieć, w jaki sposób jest on mapowany na definicje Shopify.

Na przykład poniżej przedstawiono sposób mapowania celów marketingowych i analitycznych na Tryb uzyskiwania zgody Google:

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

Przykład niestandardowego piksela

Poniżej znajduje się przykład kodu dla piksela Meta. Kod piksela różni się w zależności od zewnętrznego dostawcy usług i zdarzeń, które chcesz śledzić. Zapoznaj się z dokumentacją zdarzeń klientów, aby wyświetlić listę dostępnych zdarzeń.

Przykład niestandardowego piksela 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,
  });
});