Pixel di conversione su Shopify

Shopify non supporta più l'incollaggio di un tag <script> grezzo nel checkout — il tracciamento di terze parti passa attraverso i Custom Pixel, un ambiente sandbox costruito sulla Customer Events API di Shopify. Questa guida mostra come collegare il pixel di conversione Styrar a un custom pixel.

La sandbox non offre accesso diretto al DOM, quindi invece di incorporare il tag script di Styrar, chiami direttamente l'endpoint di tracciamento con fetch ogni volta che si attiva un evento cliente di Shopify.

Configurazione

1. Nel tuo admin Shopify, vai su Impostazioni → Eventi cliente → Aggiungi custom pixel.

2. Assegna un nome (ad es. "Conversioni Styrar") e aggiungi un codice come questo:

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

   Sottoscrivi qualsiasi evento corrisponda alla conversione che ti interessa — checkout_completed, payment_info_submitted, product_added_to_cart e altri sono tutti disponibili.

3. Consenti l'accesso alla rete. Shopify blocca per impostazione predefinita le richieste in uscita dai custom pixel. Nelle impostazioni dello stesso pixel, aggiungi api.styrar.com sotto Permessi → Connetti a server di terze parti, altrimenti la richiesta sopra fallirà silenziosamente.

4. Imposta il pixel su Attivo.

Una nota sul token di click

La sandbox del pixel di Shopify non può leggere localStorage come farebbe una pagina normale, quindi styrar_ck deve essere ancora presente nell'URL (o trasportato come attributo del carrello) nel momento in cui si attiva il tuo evento. Se il tuo flusso di checkout rimuove il parametro di query prima di checkout_completed, catturalo prima — su page_viewed — e salvalo come attributo del carrello così puoi rileggerlo più tardi.

Questo usa esattamente lo stesso endpoint pubblico e non autenticato POST /v1/pixel/track di ogni altra piattaforma — non c'è un'app specifica per Shopify da installare lato Styrar.

Correlati

• Pixel di conversione — riferimento completo