> ## 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.

# Configurare i web pixel di Shopify

> Configurare il tracciamento delle conversioni usando i Web Pixels con gli upsell post-acquisto

Gli [Shopify Web Pixels](https://help.shopify.com/en/manual/promoting-marketing/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

<div id="app-web-pixels">
  # App Web Pixels
</div>

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.

<div id="custom-web-pixels">
  # Custom Web Pixels
</div>

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](https://help.shopify.com/en/manual/promoting-marketing/pixels/overview#potential-risks) prima di procedere.

Se usi specificamente Google Tag Manager, Shopify fornisce [una documentazione utile per completare questa migrazione](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial).

Ci sono 3 passaggi fondamentali per creare un pixel personalizzato per il tracciamento delle conversioni.

1. Preparare l'SDK JavaScript di terze parti
2. Configurare il tracciamento delle conversioni usando i web pixel
3. Collegare il tuo pixel personalizzato

<div id="1-preparing-the-3rd-party-javascript-sdk">
  ## 1. Preparare l'SDK JavaScript di terze parti
</div>

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](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/code#third-party-sdk).

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.

<div id="2-setting-up-conversion-tracking-using-web-pixels">
  ## 2. Configurare il tracciamento delle conversioni usando i web pixel
</div>

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](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_completed)

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

<div id="3-connecting-your-custom-pixel">
  ## 3. Collegare il tuo pixel personalizzato
</div>

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.

1. Vai su Settings > Customer Events > Custom Pixels > Add Custom Pixel

   1. Inserisci un nome per il tuo pixel personalizzato.
2. Incolla il codice del tuo pixel personalizzato nella sezione "Code".
3. Assicurati che le impostazioni sulla privacy dei clienti siano configurate correttamente.
4. Clicca su "Save" sul tuo pixel personalizzato.
5. Clicca su "Connect" per mettere in funzione il tuo pixel personalizzato!