Dodawanie niestandardowych pikseli

Jeśli nie jest dostępna aplikacja do śledzenia określonych zdarzeń klientów, dla których chcesz gromadzić dane, możesz dodać niestandardowy piksel, który jest uruchamiany w swobodnym środowisku testowym.

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

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

Przygotowywanie kodu piksela 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 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.

Oto przykład piksela Meta. Pamiętaj, że piksele będą się nieznacznie różnić w zależności od firmy.

​​<!-- 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);

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 go zastąpić 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 poniższym odpowiednikiem JavaScript. Zawsze upewnij się, że Twój 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');

Subskrybuj standardowe zdarzenia

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.

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", 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", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
  });
});

Dodaj niestandardowy piksel

Zanim dodasz niestandardowy piksel, usuń wszystkie istniejące piksele, aby zdarzenia klientów nie były liczone dwukrotnie. Istniejący kod piksela należy usunąć ręcznie z każdego miejsca, w którym istnieje, np.theme.liquid, checkout.liquid (tylko sprzedawcy Plus) i w innych skryptach realizacji zakupu.

  1. W panelu administracyjnym Shopify przejdź do opcji: Ustawienia > Zdarzenia klienta.
  2. Nadaj pikselowi unikalną nazwę. Jeśli wpiszesz nazwę niestandardowego piksela, która już istnieje, zostaniesz poproszony(-a) o nadanie pikselowi innej nazwy.
  3. Kliknij opcję Dodaj piksel aby otworzyć edytor zdarzeń.
  4. Wklej piksel JavaScript firmy zewnętrznej do okna Kod.
  5. Dodaj zdarzenia, które chcesz śledzić w odpowiednim schemacie.
  6. Opcjonalnie: Kliknij opcję Więcej czynności, aby edytować nazwę piksela lub wyświetlić informacje o wynajęciu eksperta Shopify w celu uzyskania pomocy w zakresie niestandardowych pikseli.
  7. Kliknij opcję Zapisz, aby zapisać niestandardowy piksel. Jeśli jest gotowy(-a) do podłączenia niestandardowego piksela, możesz kliknąć opcję Podłącz piksel, aby rozpocząć śledzenie zdarzeń.

Podłącz niestandardowy piksel

Po dodaniu niestandardowego piksela musisz podłączyć go do swojego sklepu.

  1. Na stronie Zdarzenia klienta w panelu administracyjnym Shopify kliknij Niestandardowe piksele.
  2. Niestandardowe piksele, które nie są obecnie podłączone, są wyświetlane pod nagłówkiem Odłączone piksele. Kliknij opcję Podłącz w odpowiedniej linii piksela niestandardowego.
  3. Sprawdź Warunki świadczenia usług Shopify. Jeśli piksel spełnia wymagania dotyczące usług, kliknij opcję Podłącz.

Przykłady niestandardowych pikseli

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');
fbq('init', YOUR_PIXEL_ID);

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

analytics.subscribe("product_viewed", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

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

analytics.subscribe("product_added_to_cart", event => {
  fbq('track', 'AddToCart', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

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

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

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

Odłączanie niestandardowych pikseli

Jeśli chcesz zatrzymać śledzenie zdarzeń, dla których dodano niestandardowy piksel, musisz ręcznie odłączyć piksel od swojego sklepu online.

Kroki:

  1. Na stronie Zdarzenia klienta w panelu administracyjnym Shopify kliknij Niestandardowe piksele.
  2. Niestandardowe piksele, które są obecnie podłączone, są wyświetlane na górze listy niestandardowych pikseli. Kliknij opcję Odłącz w odpowiedniej linii piksela niestandardowego. Odłączenie piksela nie powoduje jego usunięcia.

Usuwanie niestandardowych pikseli

Możesz usunąć niestandardowe piksele, których już nie potrzebujesz.

Kroki:

  1. Na stronie Zdarzenia klienta w panelu administracyjnym Shopify kliknij Niestandardowe piksele.
  2. Kliknij przycisk ... w odpowiedniej linii piksela niestandardowego.
  3. Kliknij opcję Usuń. Potwierdź usunięcie, a niestandardowy piksel zostanie usunięty z menedżera pikseli.

Usunięcia niestandardowego piksela nie można cofnąć, więc upewnij się, że usuwasz odpowiedni piksel.

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

Wypróbuj za darmo