Gli Shopify Web Pixels sono la soluzione di Shopify per tracciare i dati sugli acquisti, come i tassi di conversione. Ci sono due modi principali in cui interagirai con essi:

App Web Pixels
Custom Web Pixels

App Web Pixels

Alcuni pixel di app (per esempio Omega Facebook Pixel) si integrano direttamente con i Web Pixels di Shopify. Queste app non richiedono ulteriori configurazioni per funzionare con Aftersell.

Custom Web Pixels

I pixel personalizzati consentono soluzioni su misura se sul marketplace di Shopify non si trova un pixel di app che soddisfi le tue esigenze. Di seguito viene descritto come convertire gli script di tracciamento esistenti della pagina di stato dell’ordine per usare i pixel personalizzati. Prendi nota dei potenziali rischi dei pixel personalizzati prima di procedere. Se usi specificamente Google Tag Manager, Shopify fornisce una documentazione utile per completare questa migrazione. Ci sono 3 passaggi fondamentali per creare un pixel personalizzato per il tracciamento delle conversioni.

Preparare l’SDK JavaScript di terze parti
Configurare il tracciamento delle conversioni usando i web pixel
Collegare il tuo pixel personalizzato

1. Preparare l’SDK JavaScript di terze parti

Dovrai rimuovere qualsiasi HTML presente nel codice del pixel fornito. Qualsiasi JavaScript caricato tramite un tag HTML <script> dovrebbe invece essere caricato con un approccio esclusivamente JavaScript. Questo processo è trattato più in dettaglio qui. Un esempio con Google Tag Manager Codice del pixel originale:

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

Dopo aver rimosso l’HTML e rielaborato i tag <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');

Nota che l’SDK del pixel di Google non trasmette automaticamente i dati da un pixel personalizzato di Shopify. Per trasmettere i dati, devi iscriverti agli eventi.

2. Configurare il tracciamento delle conversioni usando i web pixel

Per tracciare le conversioni con i pixel personalizzati, iscriviti all’evento checkout_completed fornito da Shopify. Questo evento viene attivato sulla pagina post-acquisto, se ne viene mostrata una al cliente, oppure sulla pagina di ringraziamento in caso contrario. In entrambi i casi l’evento si attiva una sola volta, quindi non è necessaria alcuna logica aggiuntiva per evitare il doppio conteggio di un acquisto.

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

Usa questo riferimento per vedere quali dati puoi recuperare dall’event. Evento checkout_completed di Shopify Un esempio di pixel Meta personalizzato Codice di tracciamento che si attiva quando un checkout viene completato:

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

3. Collegare il tuo pixel personalizzato

Prima di aggiungere un pixel personalizzato, rimuovi o modifica eventuali pixel esistenti per assicurarti che gli eventi cliente non vengano conteggiati due volte. Il codice dei pixel esistenti deve essere rimosso manualmente da ogni posizione in cui si trova, come theme.liquid, checkout.liquid (solo merchant Plus) e gli Additional scripts nelle impostazioni del checkout. Fatto questo, segui questi passaggi per collegare un pixel personalizzato al tuo negozio.

Vai su Settings > Customer Events > Custom Pixels > Add Custom Pixel
1. Inserisci un nome per il tuo pixel personalizzato.
Incolla il codice del tuo pixel personalizzato nella sezione “Code”.
Assicurati che le impostazioni sulla privacy dei clienti siano configurate correttamente.
Clicca su “Save” sul tuo pixel personalizzato.
Clicca su “Connect” per mettere in funzione il tuo pixel personalizzato!

Per iniziare

Pagina iniziale

Best practice

Upsell post-acquisto

Upsell al checkout (Shopify Plus)

Pagina di ringraziamento

Upsell nella pagina prodotto

Rokt Thanks

Strategie

Analisi e monitoraggio

Integrazioni

Aftersell MCP

Fatturazione e account

Risoluzione dei problemi

Configurare i web pixel di Shopify

App Web Pixels

Custom Web Pixels

1. Preparare l’SDK JavaScript di terze parti

2. Configurare il tracciamento delle conversioni usando i web pixel

3. Collegare il tuo pixel personalizzato

​App Web Pixels

​Custom Web Pixels

​1. Preparare l’SDK JavaScript di terze parti

​2. Configurare il tracciamento delle conversioni usando i web pixel

​3. Collegare il tuo pixel personalizzato

App Web Pixels

Custom Web Pixels

1. Preparare l’SDK JavaScript di terze parti

2. Configurare il tracciamento delle conversioni usando i web pixel

3. Collegare il tuo pixel personalizzato