Pixel de conversie pe Shopify

Shopify nu mai permite inserarea unui tag <script> brut în checkout — urmărirea terților trece prin Custom Pixels, un mediu izolat (sandboxed) construit pe API-ul Customer Events al Shopify. Acest ghid arată cum să integrezi pixelul de conversie Styrar într-un pixel personalizat.

Sandbox-ul nu îți oferă acces direct la DOM, așa că, în loc să inserezi tag-ul de script al Styrar, apelezi direct endpoint-ul de urmărire cu fetch de fiecare dată când se declanșează un eveniment Shopify de tip customer event.

Configurare

1. În admin-ul tău Shopify, accesează Settings → Customer events → Add custom pixel.

2. Denumește-l (de exemplu „Styrar conversions") și adaugă un cod precum acesta:

   JavaScript

   analytics.subscribe('checkout_completed', (event) => {
     const url = new URL(window.location.href);
     const clickToken = url.searchParams.get('styrar_ck') ||
       (typeof localStorage !== 'undefined' && localStorage.getItem('styrar_ck'));
     if (!clickToken) return;
   
     fetch('https://api.styrar.com/v1/pixel/track', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
         clickToken,
         eventName: 'purchase',
         value: event.data.checkout.totalPrice.amount,
         eventData: { currency: event.data.checkout.totalPrice.currencyCode },
       }),
       keepalive: true,
     });
   });
   

   Abonează-te la orice eveniment se potrivește conversiei care te interesează — checkout_completed, payment_info_submitted, product_added_to_cart, și altele sunt toate disponibile.

3. Permite accesul la rețea. Shopify blochează implicit cererile de ieșire din pixelii personalizați. În setările aceluiași pixel, adaugă api.styrar.com la Permissions → Connect to third-party servers, altfel cererea de mai sus va eșua silențios.

4. Setează pixelul ca Active.

O notă despre token-ul de click

Sandbox-ul pixelului Shopify nu poate citi localStorage așa cum o poate face o pagină normală, așa că styrar_ck trebuie să fie încă prezent în URL (sau dus mai departe ca atribut de coș) până când se declanșează evenimentul tău. Dacă fluxul tău de checkout elimină parametrul de query înainte de checkout_completed, capturează token-ul mai devreme — la page_viewed — și stochează-l ca atribut de coș pentru a-l putea citi mai târziu.

Acest lucru folosește în continuare exact același endpoint public, neautentificat, POST /v1/pixel/track, ca pe orice altă platformă — nu există o aplicație specifică Shopify de instalat pe partea Styrar.

Conexe

• Pixel de conversie — referință completă