Creazione del codice del pixel personalizzato

Attenzione

I pixel personalizzati sono una funzionalità avanzata che richiede la conoscenza di JavaScript. Il rispetto delle leggi applicabili, i consensi, la sicurezza del codice, la risoluzione dei problemi e gli aggiornamenti sono di tua responsabilità. I pixel sono soggetti ai Termini e condizioni del servizio di Shopify.

L'aggiunta e l'utilizzo di pixel personalizzati non sono supportati da Shopify. Se hai bisogno di aiuto per aggiungere o utilizzare un pixel personalizzato, puoi incaricare un Partner di Shopify.

Questa pagina include le istruzioni per creare il codice di un pixel personalizzato per un pixel di terze parti, in modo da poter tracciare specifici eventi dei clienti. Dopo aver creato il codice per il pixel personalizzato, puoi aggiungere il pixel al tuo negozio Shopify.

Nota

Prima di creare un pixel personalizzato, dovresti controllare le app disponibili per migliorare stabilità, sicurezza e prestazioni. Tuttavia, se non c'è un'app che soddisfi le tue esigenze, puoi creare un pixel personalizzato.

Preparazione alla creazione di un pixel personalizzato

Prima di creare un pixel personalizzato, consulta le seguenti informazioni per assicurarti di aver compreso come configurare il pixel:

• Rischi associati ai pixel.
• Limitazioni della sandbox dei pixel di Shopify.
• Utilizzo dell'API della sandbox dei pixel di Shopify.
• Schema di tracciamento degli eventi dei clienti.

Quando aggiungi un pixel personalizzato, specifichi le seguenti informazioni:

• Il pixel JavaScript di terze parti.
• Gli eventi comportamentali che desideri tracciare.
• Le impostazioni di consenso per la privacy dei clienti.

Creazione del codice per un pixel personalizzato

Fai crescere la tua attività

Questo è un tutorial avanzato e non è supportato da Shopify. Se hai bisogno di aiuto per aggiungere un pixel personalizzato, puoi incaricare un Partner di Shopify.

La creazione del codice per un pixel personalizzato prevede i seguenti passaggi:

1. Preparare l'SDK Javascript di terze parti.
2. Configurare il pixel per tracciare gli eventi dei clienti.
3. Configurare le impostazioni di consenso per la privacy dei clienti per il pixel.

Preparazione dell'SDK Javascript di terze parti

Il servizio di terze parti con cui stai lavorando ti fornisce il codice integrato con il pixel. Un pixel di solito ha due componenti: un SDK Javascript e il codice di tracciamento. Eventuale codice HTML presente nel codice del servizio di terze parti deve essere rimosso, poiché la sandbox dei pixel di Shopify supporta solo JavaScript.

Ecco un esempio di pixel di Meta. I pixel differiscono leggermente da una terza parte all'altra.

​​<!-- Meta Pixel Code -->
​​<script>
!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');
fbq('init', YOUR_PIXEL_ID);
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=618182112209280&ev=PageView&noscript=1"/></noscript>
<!-- End Meta Pixel Code -->

Dopo aver rimosso l'HTML dal codice di Meta, rimangono l'SDK del pixel di Meta e il codice per inizializzarlo. Anche il codice di tracciamento dell'evento PageView è stato rimosso, perché verrà aggiunto nel passaggio successivo.

​​!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');
fbq('init', YOUR_PIXEL_ID);

L'SDK del pixel di Meta non trasmette automaticamente i dati da un pixel personalizzato di Shopify. Per trasmettere i dati, devi sottoscrivere gli eventi.

Potresti imbatterti in pixel caricati utilizzando script src=. L’HTML non è supportato nei pixel di Shopify, quindi dovrai sostituire script src= con l’equivalente JavaScript.

Ecco un esempio di pixel di Google Analytics che viene caricato tramite script src=:

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

La porzione script src= può essere sostituita dall’equivalente JavaScript. Assicurati sempre che l’attributo src corrisponda alla versione HTML:

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');

L’SDK per i pixel di Google non trasmette automaticamente i dati da un pixel personalizzato di Shopify. Per trasmettere i dati, devi sottoscrivere gli eventi.

Traccia gli eventi dei clienti

Dopo aver caricato e inizializzato l’SDK del pixel, devi passarvi gli eventi per il tracciamento. Questa operazione viene eseguita sottoscrivendo gli eventi e quindi passando i dati dell’evento all’SDK del pixel, affinché vengano elaborati dal servizio di terze parti.

Sottoscrivi gli eventi standard

Shopify offre un set standard di eventi, che permette di assicurarsi facilmente che il pixel raccolga i dati di cui ha bisogno.

Puoi sottoscrivere gli eventi utilizzando l'API Shopify Pixels Extension. Dovrai inserire il codice del pixel di terze parti insieme all’evento che stai sottoscrivendo.

Questo è un esempio dell’evento PageView per il pixel di Meta. Nota che fbq("track") fa parte del codice di Meta e ogni azienda avrà la propria versione, per cui dovrai fare riferimento alla sua documentazione.

analytics.subscribe("page_viewed", async (event) => {
  fbq('track', 'PageView');
});

Alcuni eventi hanno metadati che puoi passare al pixel. Ecco un esempio di come passare alcuni dettagli del prodotto all’evento ViewContent di Meta:

analytics.subscribe("product_viewed", async (event) => {
  fbq('track', 'ViewContent', {
    content_ids: [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price?.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

Sottoscrivi gli eventi dei clienti personalizzati

Se desideri tracciare altri eventi dei clienti, ad esempio quando qualcuno clicca su un pulsante, puoi aggiungere eventi dei clienti personalizzati. Gli eventi personalizzati possono essere sottoscritti nello stesso modo degli eventi standard. Dichiara il nome dell'evento che desideri sottoscrivere e passa le informazioni al pixel del provider di servizi di terze parti.

Questo è un esempio di come un evento personalizzato pubblicato potrebbe apparire nei file Liquid del tema:

<script>Shopify.analytics.publish("special_email_signup", { email_campaign_id: 123});</script>

Questo è un esempio di come potresti configurare il pixel per sottoscrivere quell’evento personalizzato:

analytics.subscribe("special_email_signup", event => {
  window.dataLayer.push({event: emailSignUp, emailCampaignId: event.customData.email_campaign_id});
});

Per maggiori informazioni sugli eventi personalizzati, consulta la documentazione per sviluppatori di Shopify.

Configurazione delle impostazioni relative a consenso e vendita dei dati

Nota

La conformità alle normative sulla privacy è una tua responsabilità e dovresti consultare un consulente legale per stabilire in che modo le leggi della tua area geografica e di quella in cui vendi potrebbero influire sulla tua attività commerciale. Per vendere prodotti utilizzando la piattaforma Shopify, devi rispettare le leggi della giurisdizione della tua attività commerciale e dei tuoi clienti, i Termini e condizioni d'uso del servizio di Shopify, le Condizioni di utilizzo accettabile di Shopify e qualsiasi altra informativa applicabile. Scopri di più sulla privacy dei clienti.

Nei mercati configurati per richiedere il consenso, come lo Spazio economico europeo (SEE) e il Regno Unito, i pixel web vengono eseguiti solo quando i visitatori del sito web hanno fornito le autorizzazioni richieste nella configurazione del pixel.

Per impostazione predefinita, i nuovi pixel personalizzati richiedono le autorizzazioni Marketing e Analisi. Puoi personalizzare le autorizzazioni richieste nella sezione Privacy dei clienti > Autorizzazione dei dettagli del pixel personalizzato.

Allo stesso modo, i pixel configurati come vendita di dati non verranno eseguiti per i clienti che hanno rifiutato esplicitamente la vendita o la condivisione dei dati, a meno che il pixel non supporti l'uso limitato dei dati. Per impostazione predefinita, i nuovi pixel personalizzati sono idonei alla vendita di dati. Puoi personalizzare se i dati raccolti sono idonei alla vendita di dati nella sezione Privacy dei clienti > Vendita dei dati dei dettagli del pixel personalizzato.

Gli sviluppatori di pixel personalizzati possono scoprire di più sulla raccolta e la registrazione del consenso.

Ogni pixel potrebbe avere un nome diverso per ogni finalità. Dovresti consultare la documentazione del pixel di terze parti per capire come si associa alle definizioni di Shopify.

Ad esempio, di seguito viene descritto come le finalità Marketing e Analisi si associano alla modalità di consenso di Google:

gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

Esempio di pixel personalizzato

Di seguito è riportato un esempio del codice per un pixel di Meta. Il codice del pixel varia a seconda del provider di servizi di terze parti e degli eventi che desideri tracciare. Consulta i riferimenti per gli eventi dei clienti per un elenco degli eventi disponibili.

Esempio di pixel personalizzato di Meta

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

// integrate third-party pixel tracking
analytics.subscribe("page_viewed", (event) => {
  fbq('track', 'PageView');
});

analytics.subscribe("product_viewed", (event) => {
  fbq('track', 'ViewContent', {
    content_ids:  [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

analytics.subscribe("search_submitted", (event) => {
  fbq('track', 'Search', {
    search_string: event.searchResult.query
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  fbq('track', 'AddToCart', {
    content_ids: [event.data?.cartLine?.merchandise?.productVariant?.id],
    content_name: event.data?.cartLine?.merchandise?.productVariant?.title,
    currency: event.data?.cartLine?.merchandise?.productVariant?.price?.currencyCode,
    value: event.data?.cartLine?.merchandise?.productVariant?.price.amount,
  });
});

analytics.subscribe("payment_info_submitted", (event) => {
  fbq('track', 'AddPaymentInfo');
});

analytics.subscribe("checkout_started", (event) => {
  fbq('track', 'InitiateCheckout');
});

analytics.subscribe("checkout_completed", (event) => {
  fbq('track', 'Purchase', {
    currency: event.data?.checkout?.currencyCode,
    value: event.data?.checkout?.totalPrice?.amount,
  });
});