Creazione del codice del pixel personalizzato

Questa pagina è stata stampata il Jul 27, 2024. Per la versione aggiornata, visita https://help.shopify.com/it/manual/promoting-marketing/pixels/custom-pixels/code.

Questa pagina include istruzioni per la creazione del codice di un pixel personalizzato di terze parti, in modo da poter monitorare eventi dei clienti specifici. Dopo aver creato il codice del pixel personalizzato, puoi aggiungerlo al tuo negozio Shopify.

Su questa pagina

Preparazione alla creazione di un pixel personalizzato

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

Quando aggiungi un pixel personalizzato, specifica le informazioni seguenti:

  • Il pixel JavaScript di terze parti
  • Gli eventi comportamentali che desideri monitorare

Creazione del codice per un pixel personalizzato

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

  1. Prepara l'SDK JavaScript di terze parti.
  2. Configura il pixel per monitorare gli eventi dei clienti.

Preparazione dell'SDK JavaScript di terze parti

Il servizio di terze parti con cui collabori ti fornisce il codice integrato con il pixel. Di solito, un pixel ha due componenti: un SDK JavaScript e il codice di tracking. L'eventuale codice HTML presente nel codice del servizio di terze parti deve essere rimosso, poiché la modalità di prova del pixel di Shopify supporta solo JavaScript.

Ecco l'esempio di un pixel di Meta. I pixel di terze parti saranno leggermente diversi tra loro.

​​<!-- 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, restano l'SDK del pixel e il codice di Meta per inizializzarlo. Anche il codice di monitoraggio dell'evento PageView relativo alle pagine visualizzate è stato rimosso, perché verrà aggiunto durante il 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);

Meta's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

Potresti trovare pixel caricati tramite script src=. L'HTML non è supportato nei pixel di Shopify, quindi dovrai sostituire script src= con l'equivalente JavaScript.

Ecco l'esempio di un pixel di Google Analytics:

<!-- 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 parte script src= può essere sostituita dall'equivalente JavaScript. Verifica 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');

Google's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

Monitoraggio degli eventi dei clienti

Dopo aver caricato e inizializzato l'SDK del pixel, devi trasmettergli gli eventi da monitorare. Questa operazione viene eseguita tramite l'iscrizione agli eventi e la trasmissione dei dati corrispondenti all'SDK del pixel in modo che siano elaborati dal servizio di terze parti.

Iscrizione agli eventi standard

Shopify offre un set standard di eventi per aiutarti a garantire che il pixel stia raccogliendo i dati necessari.

Puoi iscriverti agli eventi utilizzando l'API dell'estensione del pixel di Shopify. Dovrai inserire il codice del pixel di terze parti insieme all'evento a cui effettui l'iscrizione.

Ecco un esempio dell'evento PageView per il pixel di Meta. Tieni presente che fbq("track") fa parte del codice di Meta e che ogni azienda avrà la propria versione per la quale dovrai fare riferimento alla documentazione corrispondente.

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

Alcuni eventi dispongono di metadati che puoi trasmettere al pixel. Ecco un esempio della trasmissione di alcuni dettagli di 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,
  });
});

Iscrizione agli eventi dei clienti personalizzati

Se desideri monitorare ulteriori eventi dei clienti, ad esempio quando qualcuno clicca su un pulsante, puoi aggiungere eventi dei clienti personalizzati. È possibile iscriversi agli eventi personalizzati allo stesso modo degli eventi standard. Dichiara il nome dell'evento a cui desideri iscriverti e trasmetti le informazioni al pixel del provider di servizi di terze parti.

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

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

Questo è un esempio di come puoi configurare il pixel per iscriverti a quell'evento personalizzato:

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

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

Nei mercati configurati per richiedere il consenso, come lo Spazio economico europeo 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 richiedono le autorizzazioni per il marketing e le analisi.

Allo stesso modo, i pixel configurati come vendita dei dati non saranno visibili ai clienti che hanno scelto di non vendere o condividere i dati, a meno che il pixel non supporti un utilizzo limitato dei dati.

Gli sviluppatori di pixel personalizzati possono ottenere maggiori informazioni sulla raccolta e sulla registrazione del consenso.

Ogni pixel potrebbe avere un nome diverso per ogni scopo. Consulta la documentazione relativa ai pixel di terze parti per capire come viene mappata alle definizioni di Shopify.

Ad esempio, di seguito è riportato il modo in cui gli scopi di Marketing e Analisi vengono mappati 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 di codice per un pixel di Meta. Il codice del pixel varierà in base al provider di servizi di terze parti e agli eventi che desideri monitorare. Consulta il riferimento all'evento cliente per un elenco degli eventi disponibili.

Pixel di Meta personalizzato

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

Sei pronto per iniziare a vendere con Shopify?

Provalo, è gratis