Pixel Custom per Shopify: come funzionano e cosa ho capito dopo mesi di test

Come funzionano davvero i Custom Pixel per Shopify? Migliorano davvero le performance? In che modo

Eccoci qui. Dopo diversi mesi dall’ultimo numero di questa newsletter, torno a scrivere di un argomento che avevo già annunciato su LinkedIn: i pixel custom per Shopify.

Mi sono preso del tempo, lo ammetto, ma questo mi ha permesso di testare con calma questa tecnologia. Inoltre, ho avuto modo di provarla su progetti di tracciamento reali.

Negli ultimi mesi, infatti, ho configurato decine di custom pixel e mi sono anche occupato di misurare l’impatto e la precisione dei tracciamenti. I risultati sono stati buoni, ottimi in alcuni casi.

Ecco perché mi sono seduto alla scrivania per scrivere questa serie di post.

Quello che stai per leggere è il primo articolo; i prossimi saranno pubblicati a distanza di circa una settimana l’uno dall’altro (questa volta ho giocato di anticipo per lo meno)

Alla fine di questo percorso vorrei anche condividerti il template del container e gli script che attualmente utilizzo.

Se non vuoi perderti nulla e non sei ancora iscritto, ti consiglio di farlo ora!

Se invece vuoi pagarmi una birra per questo sforzo, puoi abbonarti al mio Substack. Metto pure uno sconto di inizio anno ❤️

Cosa sono i Pixel Personalizzati

I Pixel Custom sono una nuova tecnologia elaborata da Shopify che ci consente di raccogliere informazioni sul comportamento utente in modo semplificato e soprattutto scollegato dalle logiche di template.

L’argomento ti sembra già troppo tecnico? Non preoccuparti, facciamo un passo indietro.

I custom pixel rispondono a un’esigenza di base: fornisci la possibilità di raccogliere informazioni sul comportamento degli utenti in modo semplificato.

Prima dell’introduzione di questa tecnologia, l’unica soluzione, per assolvere a questo compito, consisteva nell’inserire codice JS o Liquid direttamente nel template del sito.

Naturalmente, sto parlando di tracciamento custom e non di utilizzo delle integrazioni native.

Tuttavia, modificare il codice del template può risultare problematico per diversi motivi:

• Si rischia di perdere il codice custom con gli aggiornamenti del template

• Il codice Liquid o JS inserito può interferire con il corretto funzionamento del sito

• In caso di modifiche al Layout del sito il tracciamento potrebbe smettere di funzionare

I custom pixel risolvono questo problema poiché, come vedremo, operano in modo indipendente dal tema di Shopify. Questo ci permette di monitorare il comportamento degli utenti senza preoccuparci delle modifiche al template.

È una soluzione decisamente liberatoria, ed il suo funzionamento è davvero interessante.

Web Pixel VS App Pixel

Prima di procedere con altre spiegazioni tecniche, dobbiamo soffermarci sulle differenze tra Web Pixel e App Pixel.

Nonostante si tratti infatti di strumenti simili tra di loro presentano delle sostanziali differenze che è necessario chiarire fin da subito.

Entrambi gli strumenti ci consentono di raccogliere dati sul comportamento utente grazie alle funzioni di Shopify.

Nel caso delle APP Pixel, tuttavia, parliamo di vere e proprie applicazioni che operano all’interno di una sandbox (concetto che chiariremo tra poco) con meno restrizioni.

I Web Pixel, invece, sono veri e propri script che possiamo inserire direttamente dall’interfaccia di Shopify. Questi ultimi possono essere scritti utilizzando semplice codice javascript e rispetto alle APP Pixel sono più semplici da sviluppare e usare.

Spesso all’interno della documentazione di Shopify questa distinzione non è chiarissima, ecco perché ho preferito chiarire quest’aspetto fin da subito.

In questa mail e nelle successive ci concentreremo sui custom pixel di tipo Web. Per quanto riguarda le APP Pixel, le ho esplorate un po’, ma non ho ancora avuto modo di utilizzarli in un progetto reale.

Per questo motivo, per ora li metteremo da parte. Tuttavia, non escludo che potrebbe essere interessante sviluppare un APP Pixel insieme, magari in live!

Come funzionano esattamente i Pixel Personalizzati?

I custom pixel operano all’interno di un ambiente isolato, che non può accedere al sito web direttamente. Questo approccio consente ai custom pixel di funzionare in modo indipendente dal template, garantendo maggiore flessibilità e sicurezza.

Tuttavia, dato che come vedremo è Shopify a condividergli le informazioni sugli eventi, siamo in grado di aumentare anche la precisione.

La sezione eventi del cliente

Per creare un Pixel Personalizzato è necessario andare nella sezione “Eventi del Cliente” di Shopify.

Una volta creato e collegato, il custom pixel inizierà a raccogliere dati sul comportamento degli utenti in base alla configurazione impostata.

Tuttavia, il custom pixel non ha accesso diretto al sito web e non può monitorare il comportamento utente in modo diretto.

Quando un cliente visita il sito ed esegue delle azioni, Shopify raccoglie queste informazioni e le rende disponibili ai custom pixel tramite il Bus Eventi.

I Custom Pixel sfruttano il bus eventi per leggere le informazioni raccolte.

Customer Event

Shopify definisce di default una serie di eventi standard, gestiti automaticamente dalla piattaforma.

A ciascuno di questi eventi vengono associate informazioni aggiuntive che ne arricchiscono il contesto, come dettagli sui prodotti, informazioni sulle pagine e molto altro.

Tramite lo script del custom pixel possiamo decidere a quali eventi collegarci e come utilizzare le informazioni inviate da Shopify.

Di seguito, ad esempio, trovi un estratto del mio codice relativo ai custom pixel. La struttura è molto semplice: grazie alla funzione analytics.subscribe(), possiamo iscriverci ai vari eventi.

analytics.subscribe("payment_info_submitted", (event) => {
      window.dataLayer.push({
        event: "payment_info_submitted",
        timestamp: event.timestamp,
        id: event.id,
        client_id: event.clientId,
        data: event.data,
        name: event.name,
        context: event.context,
        fired_from: "custom_pixel"
      });
    });

Successivamente, nel mio caso, utilizzo le informazioni raccolte per generare un evento per il dataLayer, che viene poi sfruttato con GTM.

Tutto questo senza dover scrivere codice Liquid, cicli complessi, JavaScript o altre implementazioni manuali.

Quali sono i vantaggi di utilizzare i Custom Pixel?

Il principale vantaggio dei custom pixel risiede nella possibilità di operare in modo completamente indipendente dalle logiche di templating, grazie alla sandbox. Questo permette di intervenire sia sul template sia sul tracciamento in maniera autonoma, evitando problemi comuni come:

• Modifiche al template che compromettono il tracciamento.

• Interventi sugli script di tracciamento che danneggiano le funzionalità del sito.

Lavorare in uno spazio separato rende il tracciamento più stabile, scalabile e funzionale.

Un ulteriore punto di forza dei custom pixel è la loro capacità di standardizzare il tracciamento degli eventi. Questo è possibile perché gli eventi standard sono già definiti e gestiti direttamente da Shopify, rendendo il lavoro quasi plug-and-play.

Personalmente, ho collaborato con i colleghi per sviluppare una struttura facilmente replicabile in pochissimi minuti. Alla fine di questo percorso, vorrei condividerla con gli iscritti al mio Substack.

Naturalmente, ci sono situazioni in cui i custom pixel richiedono qualche aggiustamento, come quando:

• Vengono utilizzate app che non trasmettono correttamente i dati.

• Il sito è pesantemente personalizzato o presenta integrazioni software particolari.

Questi scenari, seppur meno frequenti, risultano comunque gestibili.

Un altro grande vantaggio dei custom pixel è il miglioramento delle performance. Lo script dei custom pixel è più leggero (rispetto al popolare manualmente tutti gli eventi), contiene meno codice e opera all’interno della sandbox, riducendo così l’impatto diretto sulle performance di caricamento della pagina.

Da non sottovalutare, infine, è la possibilità di accedere a eventi che avvengono durante il checkout di Shopify, come l’inizio del processo di checkout o l’inserimento delle informazioni di pagamento.

Grazie ai custom pixel, è possibile monitorare questi eventi, che sarebbero altrimenti inaccessibili attraverso semplici modifiche al template.

Quali sono i limiti della Sandbox?

Dopo aver esplorato cosa sono i custom pixel, come funzionano e i loro principali vantaggi, è arrivato il momento di analizzarne i limiti.

Questi limiti derivano direttamente dalla natura stessa dei custom pixel e dal modo in cui operano.

Come abbiamo già sottolineato, i custom pixel operano all’interno di una sandbox, un ambiente isolato che li separa dal resto della pagina web.

Questa struttura di funzionamento garantisce stabilità e sicurezza, ma allo stesso tempo comporta anche notevoli limiti, che possono rivelarsi particolarmente insidiosi in determinate situazioni.

Per chiarire meglio questi aspetti, procederò con alcuni esempi pratici.

Assenza di Accesso al DOM

La sandbox impedisce ai custom pixels di interagire con gli elementi della pagina (DOM). Questo significa che:

• Non è possibile tracciare azioni basate sull’interazione dell’utente con il sito, come il click su un pulsante.

• Non si può raccogliere dati direttamente dagli elementi visibili sulla pagina.

Incompatibilità con la Debug View di Google Tag Manager (GTM)

Un’altra limitazione si manifesta quando si tenta di utilizzare Google Tag Manager per tracciamenti avanzati: quando si attiva la Debug View di GTM, i custom pixel non riescono a rilevare che il sito è in modalità di debug.

Questo avviene perché l’ambiente sandbox in cui operano li isola dal contesto della pagina, impedendo loro di riconoscere lo stato della debug.

Di conseguenza, questa limitazione rende più complesso testare e ottimizzare i tracciamenti direttamente, riducendo l’efficienza dei processi di verifica.

Mancato accesso a dati recuperati automaticamente

Un altro grande problema è che molti dati, normalmente recuperati in modo automatico dai sistemi di tracciamento, non sono direttamente accessibili all’interno dei custom pixel.

Ad esempio, su Google Analytics 4, i dati relativi alla pagina non possono essere acquisiti automaticamente, ma devono essere sovrascritti manualmente utilizzando le informazioni condivise dai custom pixel.

In sintesi, il principale svantaggio dei custom pixel risiede nel compromesso imposto dalla sandbox. Pur garantendo flessibilità e sicurezza, questa scelta architettonica limita significativamente la loro applicabilità in alcuni scenari.

Più vantaggi o svantaggi?

E’ difficile dire se i vantaggi superano gli svantaggi e per una decisione sensata non andrei a soppesare queste cose. I Custom Pixel rappresentano una delle migliori alternative all’utilizzo delle integrazioni native.

Hanno praticamente zero costi e non richiedono competenze tecniche avanzate. Per questo motivo, consiglio davvero di esplorare questa metodologia di tracciamento, anche perché è Shopify stessa a scoraggiare ormai da tempo l’inserimento di script di monitoraggio direttamente nel sito.

Naturalmente, le implicazioni tecniche sono parecchie e nei prossimi numeri di questa newsletter ne esploreremo alcuni, tuttavia, rimango fermo nel dire che sono assolutamente da studiare.

E con questo, direi per ora di fermarci, non vorrei costringerti a leggere una mail lunga chilometri.

Se ti è piaciuta condividila con qualcuno a cui potrebbe interessare e facciamo crescere questa newsletter.

Grazie infinite.