Shopify – nuovi tracciamenti FB nel checkout

Come dicevo in quest’articolo, settimana scorsa, i tracciamenti del checkout su Shopify sono cambiati e parecchio.

Ora bisogna accedere alla sezione Impostazioni > Eventi del cliente e di volta in volta creare il pixel che serve.

Oggi vorrei lasciarti il codice corretto per inserire il pixel Meta nel checkout Shopify e più precisamente come inserirlo correttamente negli Eventi del cliente.

Dal pixel Meta normale, come siamo abituati a vederlo normalmente, bisogna rimuovere l’HTML, ti ritrovi con il pixel SDK di Meta e il codice per inizializzarlo. In questo momento la PageView va rimossa, perchè verrà aggiunta 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);

In questo modo il pixel Meta è solo inizializzato. Perchè possa trasmettere anche i dati si deve creare un evento.

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

Per prima cosa devi mandare l’evento PageView, per fargli capire che la pagina è stata visualizzata.

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

E poi traccerai l’evento purchase con valore e valuta, ma dovresti inserire anche l’array dei prodotti acquistati, volendo anche i dati utente per fare l’advanced matching.
Qui puoi trovare il set standard di eventi previsti da Shopify a cui potrai agganciare gli eventi Meta.

Un esempio di tracciamento Meta un po’ più completo è questo:

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

Se devi effettuare dei tracciamenti su un sito Shopify, contattami attraverso questo modulo.