Shopify Pixel Custom: innovazione per i tracciamenti ecommerce

Tracking Custom per Shopify

Realizzare un tracciamento personalizzato su Shopify non è mai stato semplice. Fino a poco tempo fa, le uniche opzioni erano:

1. Utilizzare app di tracciamento come Elevar o simili, accollandosi i costi ricorrenti di queste applicazioni.
2. Inserire script per generare il dataLayer e utilizzare Google Tag Manager (GTM) per configurare i vari eventi.

Tra queste due soluzioni, ho sempre preferito inserire codici custom per il dataLayer, per due motivi: i costi ridotti e la possibilità di una personalizzazione estrema.

Ma diciamocelo, inserire codice nel template è sempre stato rischioso. Ogni volta che c’era un aggiornamento o una modifica al template, il tracciamento rischiava di smettere di funzionare.

E se Shopify cambiava gli oggetti Liquid?
Beh, era un disastro: bisognava aggiornare il codice in tutti gli store che utilizzavano quell’oggetto (e sì, è capitato anche questo!).

Senza contare che, anche solo per un piccolo aggiornamento del dataLayer, dovevo intervenire su tutti i negozi.

Lavorare con un dataLayer personalizzato era una buona soluzione – probabilmente la migliore in termini di costi e benefici fino a qualche mese fa – ma non era certo la più efficiente. Sì, permetteva di sfruttare al massimo i dati di Shopify, creando dataLayer molto più ricchi, ma i costi di manutenzione iniziavano a salire.

Inoltre, se parliamo di performance, garantire la stabilità del tracciamento era importante quanto assicurarne l’efficacia.

Per questo, quando Shopify ha introdotto i Pixel Custom, non mi sono fatto sfuggire l’occasione di testarli. Ho iniziato subito a implementarli su alcuni progetti interni per valutarne il potenziale. E devo dire che i primi risultati sono stati incoraggianti.

Certo, come vedremo, ci sono ancora delle limitazioni, soprattutto con i Web Pixel, ma in termini di performance e potenzialità, i risultati sono stati positivi.

Che cosa sono i Pixel Custom per Shopify

I Pixel Custom (App e Web) sono sostanzialmente porzioni di codici javascript eseguite tramite una tecnologia messa a disposizione da Shopify che possiamo utilizzare per tracciare gli eventi dei clienti (tutte le azioni che un cliente compie sul nostro store) in modo indipendente dalle logiche di templating, sfruttando le API di Shopify.

Per capire meglio come funziona questa tecnologia, possiamo partire dalla sezione “Eventi del cliente”, che da qualche tempo è disponibile nelle impostazioni di Shopify. Se non sai di cosa parlo, guarda lo screenshot qui sotto:

Nel mio caso, puoi vedere le app Elevar, Stape e l’integrazione ufficiale con Google & YouTube. Le prime due sono app esterne che uso per il tracciamento, mentre l’ultima è il collegamento ufficiale tra Shopify e Google.

Oltre a queste, c’è anche un pixel personalizzato chiamato “Google Tag Manager”. Questo è un Pixel Custom in cui ho inserito una porzione di codice JavaScript che si occupa di generare il dataLayer per gli eventi, che poi gestirò tramite GTM.

Il codice di installazione di GTM e quello del template sono contenuti in questo Web Pixel personalizzato, che funziona in modo indipendente rispetto a qualsiasi logica legata al template.

Se in questo momento hai le idee un po’ confuse, non preoccuparti. Tra poco ti guiderò passo dopo passo nel funzionamento dei Pixel Custom. Per ora, spero di averti dato almeno un’idea di cosa stiamo parlando e perché è importante.

Come funzionano i Pixel Custom per Shopify

Chiarito cosa sono, vediamo ora di capire, almeno a grandi linee (senza scendere troppo nel tecnico), come funzionano.

Il meccanismo di base è piuttosto semplice: tramite i Pixel Custom possiamo collegarci a una serie di eventi già gestiti da Shopify (e possiamo anche crearne di nuovi, se necessario).

Quando un utente attiva uno di questi eventi, Shopify invia una notifica al nostro pixel, includendo tutte le informazioni relative a quell’evento.

Per fare un esempio: immaginiamo di voler tracciare la visualizzazione della scheda prodotto. Con una semplice funzione, possiamo iscrivere il nostro pixel a questo evento.

Così, quando un utente visita una scheda prodotto, Shopify notificherà a tutti i pixel personalizzati collegati a quell’evento che è stato attivato. Insieme alla notifica, Shopify invierà anche ulteriori dettagli, come le informazioni sul prodotto, sulla pagina e altre simili.

È un po’ come se il nostro pixel fosse iscritto a un feed RSS, che Shopify riempie di volta in volta con gli eventi attivati dai clienti.

Puoi trovare la lista completa degli eventi standard a cui è possibile iscriversi nella documentazione ufficiale di Shopify, ma in pratica si tratta di tutti gli eventi tipici di un e-commerce.

Per collegarsi a questi eventi, si utilizza l’API Analytics di Shopify all’interno del proprio Custom Pixel.

Qui, ad esempio, c’è una porzione di codice che inserisce nel dataLayer l’evento di acquisto, già presente nel mio Custom Pixel.

Come puoi vedere, il codice è davvero molto semplice. Utilizziamo la funzione subscribe di Analytics per agganciarci ad un evento, quindi sparo nel dataLayer tutte le informazioni passate da shopify utilizzando un semplice dataLayer.push().

Io utilizzo questo metodo perché voglio gestire poi tutti gli eventi tramite GTM, tuttavia, per capirci, potrei anche chiaramente direttamente la funzione fbq() di Meta, effettuare chiamate fetch o scrivere funzioni custom che scattino quando avviene l’evento purchase.

In questo senso, i Pixel Custom sono davvero versatili, anche se come vedremo, hanno comunque delle limitazioni.

Se invece volessi agganciarmi ad eventi che non sono compresi tra quelli standard? Beh, in questo caso è necessario inserire ancora nel codice del template creando un nuovo evento personalizzato.

Una volta fatto, potrai iscrivere tutti i tuoi Custom Pixel a quell’evento. Purtroppo abbiamo ancora il problema della fragilità, ma direi che avendo svincolato gli eventi e-commerce principali è un problema bypassabile.

Quali sono i vantaggi dell’utilizzo dei Pixel Custom

Rispetto al tracciamento classico, che si basa sull’inserimento di codici nel template, i Pixel Custom offrono diversi vantaggi. Vediamoli nel dettaglio.

Indipendenza tra codici di tracciamento e template

Prima di tutto, con i Pixel Custom possiamo finalmente separare le logiche del template da quelle del tracciamento.

I Pixel Custom vengono inseriti nella sezione eventi del cliente e, come vedremo, operano all’interno di sandbox, ossia spazi isolati che non interagiscono con il front-end (il che, come vedremo, rappresenta anche un limite).

Tuttavia, questa separazione costituisce un notevole vantaggio.

Recupero semplificato delle informazioni sugli eventi

Rispetto al metodo tradizionale di inserire informazioni direttamente nel template, con i Pixel Custom non c’è più bisogno di gestire gli oggetti Liquid per recuperare i dati.

Tutte le informazioni relative agli eventi e ai prodotti vengono inseriti in un oggetto JSON, che risulta molto più facile da gestire.

Inoltre, questo oggetto ha una struttura simile per molti eventi, il che semplifica notevolmente il recupero delle informazioni. Non è necessario creare cicli in Liquid o capire la struttura di vari oggetti.

Di conseguenza, il recupero delle informazioni sugli eventi diventa molto più semplice e lineare.

Miglioramento delle performance

Poiché tutto il codice viene eseguito all’interno di una sandbox, separata dalle pagine principali del sito, non corriamo il rischio di rallentamenti dovuti al sovraccarico di codice JavaScript nelle nostre pagine.

Inoltre, dal momento che il Pixel all’interno della sandbox non può interagire con il DOM della pagina, il caricamento del template risulta più veloce. Abbiamo potuto verificare direttamente come il tempo di caricamento delle pagine di alcuni store sia migliorato grazie al passaggio ai Custom Pixel.

Web Pixel App, Pixel Custom e il concetto di Sandbox

Se a questo punto dell’articolo non vedi l’ora di scoprire i Pixel Custom e approfondire il loro funzionamento, mi fa piacere! Tuttavia, ti chiedo ancora qualche minuto di attenzione per spiegarti alcuni concetti fondamentali che ti saranno utili nelle tue ricerche.

Questi concetti, inoltre, saranno cruciali per comprendere le limitazioni legate all’uso dei Custom Pixel.

Per cominciare, possiamo distinguere i Pixel Custom in due categorie: Web Pixel App e Custom Web Pixel. La differenza tra queste due opzioni è notevole.

Le Web Pixel App sono applicazioni personalizzate, sviluppate in modo simile a tutte le altre app che trovi nello Shopify App Store. Sviluppare una Web Pixel App è più complesso, richiede competenze di programmazione avanzate, ma offre la possibilità di operare in una “sandbox” più flessibile.

I Custom Web Pixel, invece, sono codici JavaScript che possiamo inserire nella sezione eventi del cliente e che, grazie alle API di Shopify, possono eseguire diverse funzionalità. Rispetto alle app, operano in un ambiente un po’ più ristretto, ma si tratta di una limitazione accettabile considerando i vantaggi di cui abbiamo parlato finora.

Il concetto di sandbox

Come accennato sopra, sia i Custom Web Pixel che le Web Pixel App operano all’interno di sandbox. Questo significa che tutto il nostro codice di tracciamento si esegue in un ambiente chiuso, che non ha accesso diretto al nostro sito web.

Ma cosa comporta questo? Significa che il nostro tracciamento non interagisce direttamente con il sito. Funziona grazie alle chiamate di Shopify, ma agisce in modo indipendente rispetto al contenuto della pagina.

Questo ci permette di slegare il tracciamento dal contenuto della pagina, ma allo stesso tempo introduce una limitazione significativa: con i Pixel Custom non possiamo interagire con il DOM della pagina.

Il meccanismo delle sandbox è ciò che consente a Shopify di separare le logiche di tracciamento da quelle del template. Tuttavia, è una limitazione di cui dobbiamo essere consapevoli.

Sarò sincero: io considero questa limitazione accettabile. Se mai dovessi aver bisogno di maggiore flessibilità, posso sempre tornare a “sporcare” il template, creando eventi custom senza troppi problemi.

I contro di utilizzare i Pixel Custom

Finora abbiamo esplorato i principali vantaggi di questo nuovo sistema di tracciamento. Tuttavia, come per ogni tecnologia, ci sono anche degli svantaggi.

Sebbene i Pixel Custom offrano una serie di benefici, esistono alcune limitazioni che possono rendere il loro utilizzo fastidioso o addirittura controproducente in alcune situazioni.

Vediamo insieme quali sono i principali punti critici da considerare prima di decidere se adottarli. Dopo di che, sarai tu stesso a capire se è il caso di testare questa tecnologia oppure no.

Impossibile accedere al DOM

A causa della sandbox, il nostro tracciamento non può interagire in alcun modo con il DOM. Questo significa che non possiamo aggiungere listener ai form né eseguire altre operazioni che richiedono l’interazione con gli elementi della pagina.

Si tratta di una limitazione importante da considerare. Possiamo aggirarla aggiungendo eventi custom direttamente nel template, ma questo ci riporta nella situazione di dipendere nuovamente dal template, con tutti gli svantaggi che l’utilizzo dei Pixel Custom dovrebbe risolvere.

Chiaramente, gli eventi standard di e-commerce rimarrebbero scollegati, e perdere alcuni eventi custom non ha lo stesso impatto che perdere il funzionamento degli eventi e-commerce. Tuttavia, il problema è reale e va tenuto in considerazione.

Nessun accesso agli oggetti Liquid

All’interno dei Pixel Custom, non è possibile accedere agli oggetti Liquid che eravamo abituati a usare direttamente nel template. In pratica, non possiamo sfruttare le variabili o i dati che Liquid fornisce normalmente, come informazioni sui prodotti, carrelli, o utenti, in modo diretto.

Possiamo invece fare affidamento solo sulle informazioni che Shopify ci condivide automaticamente insieme agli eventi. Questo crea una limitazione importante: se abbiamo bisogno di dati aggiuntivi, non inclusi in questi eventi standard, dovremo trovarli in modo manuale, ad esempio inserendo manualmente eventi custom nel template o utilizzando altre soluzioni di tracciamento.

Questo significa che, in alcune situazioni, il processo potrebbe richiedere più tempo e sforzo rispetto all’approccio tradizionale. Dovremo quindi valutare attentamente quando i vantaggi dei Pixel Custom superano questi potenziali ostacoli.

Impossibile usare la Debug di GTM

Se volessimo testare il nostro tracciamento impostato tramite Custom Pixel, non potremmo utilizzare la classica interfaccia di debug di GTM. Questa è una delle cose più fastidiose legate alla sandbox.

Il problema è che la modalità di debug di GTM viene avviata all’interno della sandbox, e non nel nostro percorso di navigazione reale. In pratica, la debug di GTM non restituisce alcuna informazione utile, perché non può interagire con ciò che accade effettivamente sul sito.

Per testare i tracciamenti, dobbiamo quindi ricorrere a metodi alternativi, come il push delle informazioni nella console del browser.

Sì, lo so, all’inizio può sembrare una scocciatura, e lo è. Ma ti assicuro che, dopo averci preso un po’ la mano, diventa più facile e meno frustrante. All’inizio, però, ammetto che è stato parecchio complicato capire come fare un debug decente.

Per capirci, dopo aver impostato i Pixel Custom, mandando in debug il container e navigando sul sito, Tag Assistant ci comunicherà che la debug non è attiva sul sito web. Bella seccatura, ma bypassabile!

Molti dati custom vanno sovrascritti

Dato che tutto il codice si muove all’interno della sandbox, alcune informazioni di base utilizzate dalle piattaforme di tracciamento (come GA4) potrebbero non corrispondere ai dati reali del sito web. Facciamo un esempio pratico per capirci.

Supponiamo di voler far scattare l’evento di visualizzazione di pagina in GA4. Shopify comunica alla sandbox un evento chiamato “page_view”. Questo evento rappresenta la visualizzazione della pagina e possiamo usarlo per triggerare l’evento page_view su GA4.

Tuttavia, dato che la sandbox opera in un contesto isolato rispetto al sito web, alcune informazioni che GA4 recupera automaticamente potrebbero non corrispondere, come ad esempio l’URL della pagina.

Per risolvere questo problema, Shopify include queste informazioni insieme all’evento. Questo significa che, all’interno del tag di GA4, dovremo sostituire il parametro dell’evento con l’URL corretto fornito da Shopify, così che corrisponda alla pagina reale.

So che tutto questo può sembrare complicato, ma una volta compresi i meccanismi, ti assicuro che è molto più semplice di quanto sembri da impostare.

Conclusioni

Bene, siamo arrivati alla fine di questo post, e spero di averti fornito una panoramica chiara e utile sui Pixel Custom per Shopify.

Abbiamo visto cosa sono, come funzionano, e quali vantaggi e limiti portano con sé. Abbiamo parlato di come questa tecnologia consenta di separare il tracciamento dalle logiche del template, rendendo il tutto più stabile e performante, ma anche delle sfide che si presentano, come l’impossibilità di interagire con il DOM o di utilizzare la classica debug di GTM.

In definitiva, i Pixel Custom rappresentano una soluzione interessante per migliorare il tracciamento su Shopify, ma come sempre, è importante valutare i pro e i contro in base alle tue specifiche esigenze.

Ti ringrazio per essere arrivato fin qui! Se ti piacerebbe vedere un tutorial pratico su come implementare un tracciamento completo con i Custom Pixel, fammelo sapere nei commenti. Potrei dedicare un secondo post interamente alla parte tecnica, guidandoti passo nell’implementazione.

Non esitare a farmi sapere cosa ne pensi o se hai domande! A presto, e buon lavoro con i tuoi tracciamenti!