Konverzijski piksel na Shopifyju

Shopify više ne podržava zalijepljen sirovi <script> tag u checkout - praćenje treće strane ide putem prilagođenih piksela, sandboxiranog okruženja izgrađenog na Shopifyjevom Customer Events API-ju. Ovaj vodič prikazuje kako povezati Styrar konverzijski piksel s prilagođenim pikselom.

Sandbox vam ne daje direktan DOM pristup, pa umjesto ugrađivanja Styrarovog script taga, pozivate endpoint za praćenje direktno s fetch kad god se okine Shopify događaj kupca.

Postavljanje

1. U vašem Shopify adminu, idite na Postavke → Customer events → Add custom pixel.

2. Imenujte ga (npr. "Styrar conversions") i dodajte kod kao ovaj:

   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,
     });
   });
   

   Pretplatite se na bilo koji događaj koji odgovara konverziji koju vas interesira - checkout_completed, payment_info_submitted, product_added_to_cart, i drugi su svi dostupni.

3. Dopustite mrežni pristup. Shopify zadano blokira izlazne zahtjeve iz prilagođenih piksela. U postavkama istog piksela, dodajte api.styrar.com pod Permissions → Connect to third-party servers, ili će zahtjev iznad tiho neuspjeti.

4. Postavite piksel na Active.

Napomena o tokenu klika

Shopifyjev sandbox piksela ne može čitati localStorage na način na koji normalna stranica može, pa styrar_ck mora još biti prisutan u URL-u (ili prenesen kao atribut košarice) do trenutka kad se okine vaš događaj. Ako vaš checkout tok uklanja query parametar prije checkout_completed, zahvatite token ranije - na page_viewed - i pohranite ga kao atribut košarice da ga možete pročitati kasnije.

Ovo još uvijek koristi potpuno isti javni, neautenticirani POST /v1/pixel/track endpoint kao i svaka druga platforma - nema Shopify-specifične aplikacije za instalaciju na Styrar strani.

Povezano

• Konverzijski piksel - puna referenca