Aggiunta di pixel personalizzati

Se non esiste un'app per monitorare gli eventi del cliente specifici per cui desideri raccogliere i dati, puoi aggiungere un pixel personalizzato eseguito in un ambiente di prova lax.

Quando aggiungi un pixel personalizzato, specifica le informazioni seguenti:

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

Preparazione del codice del pixel 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 e il codice di monitoraggio. 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. Tieni presente che i pixel delle diverse aziende 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);

Potresti trovare pixel caricati tramite script src=. L'HTML non è supportato nei pixel di Shopify, quindi dovrai sostituire questo elemento 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 indicato di seguito. 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');

Iscrizione agli eventi standard

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.

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", 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", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
  });
});

Aggiunta di un pixel personalizzato

Prima di aggiungere un pixel personalizzato, rimuovi gli eventuali pixel esistenti per assicurarti che gli eventi del cliente non siano conteggiati due volte. Il codice del pixel esistente deve essere rimosso manualmente da ogni luogo in cui è presente, ad esempio theme.liquid, checkout.liquid (solo per i merchant Plus) e altri script relativi al check-out.

  1. Dal pannello di controllo Shopify vai su Impostazioni > Eventi del cliente.
  2. Assegna al pixel un nome univoco. Se inserisci il nome di un pixel personalizzato già esistente, ti verrà richiesto di assegnare al pixel un nome diverso.
  3. Clicca su Aggiungi pixel per aprire l'editor dell'evento.
  4. Incolla il pixel JavaScript di terze parti nella finestra Codice.
  5. Aggiungi gli eventi che desideri monitorare nello schema appropriato.
  6. Facoltativo: clicca su Altre azioni per modificare il nome del pixel o visualizzare le informazioni su come contattare un Esperto Shopify per ricevere assistenza con i pixel personalizzati.
  7. Clicca su Salva per salvare il pixel personalizzato. Se tutto è pronto per collegare il pixel personalizzato, ora puoi cliccare su Collega pixel e iniziare a monitorare gli eventi.

Collegamento di un pixel personalizzato

Dopo aver aggiunto un pixel personalizzato, devi collegarlo al tuo negozio.

  1. Dalla pagina Eventi del cliente nel pannello di controllo Shopify clicca su Pixel personalizzati.
  2. I pixel personalizzati al momento non collegati vengono visualizzati all'intestazione Pixel scollegati. Clicca su Collega sulla riga del pixel personalizzato appropriato.
  3. Controlla i Termini e condizioni del servizio Shopify. Se il pixel soddisfa i requisiti del servizio, clicca su Collega.

Esempi di pixel personalizzati

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

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

analytics.subscribe("product_viewed", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

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

analytics.subscribe("product_added_to_cart", event => {
  fbq('track', 'AddToCart', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

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

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

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

Scollegamento di pixel personalizzati

Se desideri interrompere il monitoraggio degli eventi per cui hai aggiunto un pixel personalizzato, scollega manualmente il pixel dal tuo negozio online.

Procedura:

  1. Dalla pagina Eventi del cliente nel pannello di controllo Shopify clicca su Pixel personalizzati.
  2. I pixel personalizzati che al momento sono collegati vengono visualizzati nella parte superiore dell'elenco dei pixel personalizzati. Clicca su Scollega sulla riga del pixel personalizzato appropriato. Quando scolleghi un pixel, questo non viene eliminato.

Eliminazione di pixel personalizzati

Puoi eliminare i pixel personalizzati di cui non hai più bisogno.

Procedura:

  1. Dalla pagina Eventi del cliente nel pannello di controllo Shopify clicca su Pixel personalizzati.
  2. Clicca sul pulsante ... sulla riga del pixel personalizzato appropriato.
  3. Clicca su Elimina. Conferma l'eliminazione e il pixel personalizzato verrà rimosso dal gestore dei pixel.

L'eliminazione di un pixel personalizzato non può essere annullata, quindi assicurati di eliminare il pixel corretto.

Sei pronto per iniziare a vendere con Shopify?

Provalo, è gratis