> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Konfigurowanie web pixeli Shopify

> Konfiguracja śledzenia konwersji za pomocą Web Pixels przy upsellach post-purchase

[Shopify Web Pixels](https://help.shopify.com/en/manual/promoting-marketing/pixels) to rozwiązanie Shopify do śledzenia danych o zakupach, takich jak współczynniki konwersji. Istnieją dwa główne sposoby korzystania z nich:

* Web pixele aplikacji
* Niestandardowe web pixele

<div id="app-web-pixels">
  # Web pixele aplikacji
</div>

Niektóre pixele aplikacji (np. Omega Facebook Pixel) integrują się bezpośrednio z Shopify Web Pixels. Te aplikacje nie wymagają żadnej dodatkowej konfiguracji, aby działać z Aftersell.

<div id="custom-web-pixels">
  # Niestandardowe web pixele
</div>

Niestandardowe pixele umożliwiają tworzenie rozwiązań szytych na miarę, jeśli w sklepie Shopify nie ma pixela aplikacji spełniającego Twoje potrzeby. Poniżej opisujemy, jak przekonwertować istniejące skrypty śledzące ze strony statusu zamówienia na niestandardowe pixele. Przed rozpoczęciem zapoznaj się z [potencjalnymi ryzykami niestandardowych pixeli](https://help.shopify.com/en/manual/promoting-marketing/pixels/overview#potential-risks).

Jeśli korzystasz konkretnie z Google Tag Managera, Shopify udostępnia [pomocną dokumentację przeprowadzenia tej migracji](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial).

Utworzenie niestandardowego pixela do śledzenia konwersji obejmuje 3 podstawowe kroki:

1. Przygotowanie zewnętrznego SDK JavaScript
2. Konfiguracja śledzenia konwersji za pomocą web pixeli
3. Podłączenie niestandardowego pixela

<div id="1-preparing-the-3rd-party-javascript-sdk">
  ## 1. Przygotowanie zewnętrznego SDK JavaScript
</div>

Usuń cały kod HTML obecny w dostarczonym kodzie pixela. Każdy JavaScript ładowany przez tag HTML `<script>` powinien zamiast tego być ładowany wyłącznie za pomocą JavaScriptu.

Ten proces jest szczegółowo opisany [tutaj](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/code#third-party-sdk).

Przykład z użyciem Google Tag Managera

*Oryginalny kod pixela:*

```
<!-- 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>
```

*Po usunięciu HTML i przerobieniu tagów `<script>`:*

```
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');
```

Pamiętaj, że SDK pixela Google nie przesyła automatycznie danych z niestandardowego pixela Shopify. Aby przesyłać dane, musisz zasubskrybować zdarzenia.

<div id="2-setting-up-conversion-tracking-using-web-pixels">
  ## 2. Konfiguracja śledzenia konwersji za pomocą web pixeli
</div>

Aby śledzić konwersje za pomocą niestandardowych pixeli, zasubskrybuj zdarzenie `checkout_completed` udostępniane przez Shopify. To zdarzenie jest wyzwalane albo na stronie post-purchase, jeśli jest ona wyświetlana klientowi, albo na stronie z podziękowaniem, jeśli nie. W obu przypadkach zdarzenie wyzwala się tylko raz, więc nie potrzebujesz dodatkowej logiki, aby uniknąć podwójnego liczenia zakupu.

```
analytics.subscribe("checkout_completed", (event) => {  
  // process event using 3rd party pixel tracking code  
});
```

Skorzystaj z tego materiału referencyjnego, aby sprawdzić, jakie dane możesz pobrać ze zdarzenia `event`.

[Zdarzenie Shopify checkout\_completed](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_completed)

Przykład niestandardowego pixela Meta

*Kod śledzący wyzwalany po ukończeniu checkoutu:*

```
!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);  
  
analytics.subscribe("checkout_completed", (event) => {  
  fbq('track', 'Purchase', {  
    currency: event.data?.checkout?.currencyCode,  
    value: event.data?.checkout?.totalPrice?.amount,  
  });  
});
```

<div id="3-connecting-your-custom-pixel">
  ## 3. Podłączenie niestandardowego pixela
</div>

Zanim dodasz niestandardowy pixel, usuń lub zmodyfikuj wszystkie istniejące pixele, aby zdarzenia klientów nie były liczone podwójnie. Istniejący kod pixeli należy ręcznie usunąć z każdego miejsca, w którym się znajduje, np. z `theme.liquid`, `checkout.liquid` (tylko sprzedawcy Plus) oraz z sekcji Additional scripts w ustawieniach checkoutu.

Gdy to zrobisz, wykonaj poniższe kroki, aby podłączyć niestandardowy pixel do swojego sklepu.

1. Przejdź do Settings > Customer Events > Custom Pixels > Add Custom Pixel

   1. Wprowadź nazwę swojego niestandardowego pixela.
2. Wklej kod niestandardowego pixela w sekcji „Code”.
3. Upewnij się, że ustawienia prywatności klientów są poprawnie skonfigurowane.
4. Kliknij „Save” przy swoim niestandardowym pixelu.
5. Kliknij „Connect”, aby aktywować swój niestandardowy pixel!