Custom Pixel: Iscriversi agli eventi standard
Come iscriversi agli eventi Standard di Shopify tramite l'utilizzo dei Custom Pixel.
Introduzione
Quando ho pubblicato il primo articolo sui Custom Pixel per Shopify, ero nel pieno della fase di test. Oggi, dopo mesi di utilizzo in contesti reali, posso confermare una cosa: sono ancora una delle soluzioni più efficaci per tracciare in modo preciso e pulito. E sì, i risultati si vedono.
Se è la prima volta che capiti qui, ho già trattato i Custom Pixel in un articolo precedente dove trovi una panoramica completa su cosa sono, come funzionano e perché vale la pena considerarli.
Nota Importante
Prima di entrare nel vivo del post, ti ricordo che se hai uno Shop Shopify o conosci qualcuno che lo gestisce e vuoi effettuare il passaggio ai Custom Pixel, ho aperto una pagina dedicata sul mio sito da cui puoi richiedere una chiamata gratuita.
https://enricochiolo.it/custom-pixel-shopify
Dove eravamo rimasti?
Nel precedente articolo della serie sui Custom Pixel, abbiamo esplorato cosa sono e come funzionano. Questa funzionalità di Shopify rappresenta un cambio di paradigma significativo: separa definitivamente le logiche di templating dalle logiche di tracciamento, offrendoti maggiore flessibilità e controllo.
Grazie ai Custom Pixel puoi effettuare un tracciamento e-commerce senza eccessiva interazione con il template del tuo sito web. In questo modo, sei in grado di tracciare tutti gli eventi e-commerce (e non solo) senza DL custom, modifiche al codice o inserimento di script aggiuntivi.
Questo ti garantisce un sistema molto più robusto e soprattutto migliora la quantità e la qualità dei dati condivisi.
Uno dei grandi vantaggi dei Custom Pixel è la capacità di tracciare anche nelle pagine dove non hai accesso al template, come il checkout degli Shopify non Custom. Una funzionalità che ho particolarmente apprezzato durante la fase di implementazione.
Attenzione: cambiamento importante in arrivo
Dal 28 agosto 2025, Shopify disabiliterà qualsiasi codice personalizzato presente nel checkout. Questo significa che tutti i tracking inseriti nelle pagine di conferma ordine smetteranno di funzionare. Ecco perché diventa fondamentale valutare alternative efficaci, e i Custom Pixel rappresentano la soluzione più robusta disponibile.
Per questo motivo, in questo articolo ci concentreremo sul lato più pratico: come raccogliere gli eventi e come funzionano esattamente i Pixel personalizzati.
Cosa imparerai: Alla fine della lettura sarai in grado di creare il tuo pixel personalizzato capace di raccogliere tutti i dati e-commerce ed elaborarli secondo le tue esigenze specifiche.
Iniziamo subito.
La sezione eventi del cliente
La sezione "Eventi del cliente" è il cuore pulsante della nostra implementazione. È raggiungibile direttamente dalle impostazioni di Shopify. Ti lascio qui uno screenshot di riferimento:
Qui, come puoi vedere dallo screenshot, se hai utilizzato o stai utilizzando le integrazioni native di Shopify, dovresti vedere le varie App relative ai canali.
Nello screenshot sopra, ad esempio, è presente il canale Google & Youtube.
Di fatto, anche le integrazioni native vengono oggi trattate al pari di Pixel App, con la sola differenza che queste ultime vengono create e gestite direttamente da Shopify.
Cliccando su Pixel Personalizzati è possibile vedere i custom pixel presenti.
Nel mio caso, risultano presenti un Pixel di nome “Google Tag Manager” e un Pixel di nome “test”. Come puoi notare dallo screenshot, il Custom Pixel chiamato “Google Tag Manager” risulta connesso, mentre il pixel di test risulta "disconnesso".
Se non hai ancora creato alcun Pixel Personalizzato, naturalmente non dovresti trovare nulla, ma è possibile che tu possa vedere alcuni Pixel Personalizzati inizializzati da alcune App installate.
Come si crea un nuovo pixel personalizzato?
Per creare un nuovo pixel personalizzato è sufficiente fare click sul pulsante in alto: "Aggiungi Pixel Personalizzato". Se hai l'interfaccia in inglese, troverai un'opzione simile.
Fatto ciò, Shopify ci chiederà di assegnare un nome identificativo al nostro Pixel:
Una volta inserito il nome, ci basterà cliccare su "Aggiungi pixel" ed il gioco è fatto. Abbiamo appena creato il nostro Custom Pixel.
È vuoto, non fa niente, non è collegato al nostro Shop, ma lo abbiamo creato. A questo punto, possiamo procedere a spiegare meglio alcuni concetti teorici molto importanti.
Ti chiedo di seguirmi con ordine; sto cercando di sintetizzare molte informazioni in un unico post, quindi sarà inevitabilmente piuttosto denso.
Se hai seguito tutti i passaggi fino a qui, dovresti trovarti di fronte a queste due schermate:
La sezione superiore gestisce la privacy del cliente e ci permette di stabilire quando attivare i nostri Custom Pixel e con quali autorizzazioni. Nel prossimo articolo ti mostrerò la strategia specifica che utilizzo per gestire questa parte in modo ottimale.
La sezione inferiore è l'area di sviluppo vera e propria: qui scriviamo il codice del nostro Custom Pixel. In sostanza, i Custom Pixel di Shopify sono un ambiente protetto dove eseguire codice JavaScript in sicurezza.
Non serve essere sviluppatori esperti: se segui questa serie di articoli dall'inizio alla fine, anche con competenze tecniche di base riuscirai a implementare i Custom Pixel nel tuo store.
La sandbox dei Custom Pixel
Come accennato sopra e nel precedente articolo, i Custom Pixel ci consentono di far girare codice Javascript all'interno di un'area protetta. Tecnicamente il concetto di Sandbox non è nuovo ai programmatori, ma se non sei un developer, non preoccuparti, cercherò io di guidarti passo dopo passo.
Puoi immaginarla come un'area militare protetta: alcune persone autorizzate possono entrare ed altre possono uscire, ma da quell'area non passa niente che non sia autorizzato.
Nello specifico, quella dei custom pixel (Web) è una sandbox di tipo LAX. Si tratta di un ambiente implementato come un iframe all'interno della pagina. Anche qui, è possibile che questo concetto, in fin dei conti, non ti dica nulla, non importa. Non devi capire tutto subito, in questo momento, ti basta seguire il flusso del mio ragionamento.
L'utilizzo di una sandbox è molto comodo poiché migliora:
Sicurezza e Stabilità: Migliora la sicurezza e la stabilità del tuo negozio, dando a te (commerciante) e ai tuoi clienti il controllo completo sui dati a cui gli sviluppatori delle app possono accedere
Controllo Dati e Privacy: Ti permette di gestire in modo più efficiente quali dati vengono inviati a servizi di terze parti e di garantire una maggiore conformità alla privacy
Affidabilità: Poiché i pixel non vengono più aggiunti direttamente ai file del tema, diventano più affidabili e stabili
Nonostante questi vantaggi, i Custom Pixel presentano limitazioni significative. E non parliamo di piccoli inconvenienti: sono vincoli strutturali che richiedono strategie specifiche per essere aggirati.
Ho dedicato settimane di test e sperimentazione per trovare soluzioni funzionali, studiando come far funzionare i tracciamenti nonostante l'ambiente sandbox. Perché il problema di fondo è questo: il nostro codice JavaScript viene eseguito completamente isolato dal sito web, e questo può creare complicazioni serie.
Shopify è consapevole di queste limitazioni e ha già implementato alcune correzioni per aiutare noi Digital Analyst a gestire le situazioni più critiche. Tuttavia, esistono vincoli strutturali che, per loro natura, non possono essere risolti completamente.
Non preoccuparti, personalmente ho trovato una soluzione quasi a tutti i problemi che ti farò presente a breve. Quindi, tranquillo.
Ma vediamo quali sono questi limiti:
Nessun accesso al DOM: Questo è il limite più impattante. Se volessi creare un evento di Google Tag Manager che monitora il click su un pulsante specifico, semplicemente non puoi farlo. I Custom Pixel operano in un ambiente completamente isolato, senza alcun accesso alle interazioni dirette dell'utente sul sito.
È Shopify che fa da intermediario: solo lui può intercettare gli eventi e decidere quali informazioni trasmetterci. Noi riceviamo solo ciò che Shopify ritiene opportuno condividere. O come vedremo, ciò che noi vogliamo condividere con gli ambienti sandbox (ma non complichiamoci la vita per ora)
Per capire meglio: è come se i Custom Pixel fossero contenuti in una scatola sigillata. Possono elaborare i dati che ricevono, ma non possono "guardare fuori" per vedere cosa sta realmente accadendo sulla pagina.
Non è possibile eseguire debug in modo classico: GTM non capirà che siamo in debug sul sito web poiché vive in un ambiente separato. Questo significa che le nostre possibilità di effettuare debug sono molto limitate (ma come vedremo più avanti, ho parzialmente risolto anche questo problema, e devo dire che alcuni colleghi hanno fatto anche di meglio).
Non è possibile accedere ad alcuni attributi: la finestra è in esecuzione nella sandbox, quindi se volessimo accedere all'URL della pagina (almeno nella modalità classica), quello che vedremmo da dentro il custom pixel è l'URL della sandbox e non l'effettivo URL del sito web visitato dall’utente.
Nonostante questi vincoli, i Custom Pixel hanno una carta vincente: possono ricevere direttamente da Shopify tutti gli eventi eseguiti dal cliente. È qui che risiede la loro vera forza.
C'è però un passaggio fondamentale da comprendere: il nostro custom pixel non riceve automaticamente i dati. All'interno dei Pixel Personalizzati dobbiamo registrarci esplicitamente agli eventi che vogliamo ricevere. È come sottoscrivere un abbonamento: senza questa registrazione, non arriva nulla.
Iscrizione agli eventi con i Custom Pixel
Come accennato, Shopify non invia automaticamente tutti gli eventi al nostro pixel. Dobbiamo prima "registrarci" per ricevere solo quelli che ci interessano.
Per fare ciò la piattaforma ha messo a disposizione un'API specifica, che ci fornisce il metodo analytics.subscribe(). Questo metodo è il nostro strumento principale per comunicare a Shopify: "Ehi, voglio essere informato quando succede questo evento specifico".
In pratica, per ogni evento standard che vogliamo intercettare - che sia la visualizzazione di una pagina (page_viewed), l'aggiunta al carrello (product_added_to_cart) o l'inizio del checkout (checkout_started) - dobbiamo esplicitamente scrivere del codice che "ascolta" quel determinato evento.
Come ascoltare gli eventi standard?
Bene, ora è arrivato il momento di vedere concretamente come intercettare gli eventi standard (e non solo) forniti da Shopify.
Devo essere onesto: questo è uno di quei casi in cui spiegare il concetto teoricamente è più complicato che mostrarlo in azione. Il codice parla più chiaro delle parole.
Per questo motivo, analizziamo direttamente un esempio reale tratto dal mio Custom Pixel.
Vedrai che una volta osservato il meccanismo in funzione, tutto diventerà molto più chiaro.
//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
window.dataLayer.push({
event: "checkout_completed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
data: event.data,
name: event.name,
context: event.context
});
});
La struttura è basilare: tra parentesi ci va il nome dell'evento a cui vogliamo iscriverci, dopodiché le operazioni che vogliamo effettuare quando Shopify ci informerà che l'evento a cui ci stiamo iscrivendo è stato eseguito dall'utente.
In questo caso, il mio obiettivo è inviare al dataLayer un evento contenente diverse informazioni che Shopify condivide direttamente con noi.
Va precisato che non è obbligatorio inviare un evento nel dataLayer, né è necessario utilizzare il formato che ho scelto io. Nelle varie guide online troverete approcci molto diversi tra loro, ed è perfettamente normale: ogni professionista decide di utilizzare le funzionalità dei Custom Pixel secondo le proprie specifiche esigenze.
Personalmente, ho adottato scelte molto precise di design, che approfondiremo a breve, e per questo motivo preferisco trasmettere quasi in formato grezzo tutte le informazioni che Shopify mi mette a disposizione.
Sì, parlo correttamente di informazioni che Shopify ci fornisce, poiché il bello dei Custom Pixel è che gli eventi vengono automaticamente arricchiti con informazioni sulla pagina, il prodotto coinvolto, il carrello e persino sull'utente.
E di queste informazioni possiamo farne quello che vogliamo:
Mandarle nel dataLayer
Stamparle in console
Fare una chiamata fetch
Questo significa che possiamo inviare, tramite JavaScript, le informazioni dove desideriamo. Si tratta di una funzionalità estremamente potente. Potremmo persino effettuare chiamate che integrano gli eventi in un database personalizzato per costruire una vera e propria Customer Data Platform (CDP).
Insomma, le possibilità sono infinite.
Quali eventi standard possiamo iscriverci?
Shopify offre una lista di eventi standard a cui è possibile iscriversi. Questi includono:
page_viewed: Quando un cliente visita una pagina (disponibile su store online, checkout e pagina di stato dell'ordine).collection_viewed: Quando un cliente visita una pagina di collezione di prodotti.product_viewed: Quando un cliente visita una pagina di dettaglio prodotto.product_added_to_cart: Quando un cliente aggiunge un prodotto al carrello.cart_viewed: Quando un cliente visita la pagina del carrello.search_submitted: Quando un cliente esegue una ricerca nello store.Eventi di Checkout:
checkout_started: Quando un cliente inizia il processo di checkout.checkout_contact_info_submitted: Quando un cliente invia le informazioni di contatto.checkout_address_info_submitted: Quando un cliente invia l'indirizzo di spedizione (disponibile con Checkout Extensibility).checkout_shipping_info_submitted: Quando il cliente sceglie una tariffa di spedizione (disponibile con Checkout Extensibility).payment_info_submitted: Quando un cliente invia le informazioni di pagamento.checkout_completed: Quando un visitatore completa un acquisto (tipicamente sulla pagina di ringraziamento).
Per la lista completa e sempre aggiornata di tutti gli eventi cui possiamo iscriverci, consiglio sempre di dare un occhio alla documentazione ufficiale.
Quello che mi preme sottolineare a questo punto è che questi eventi vengono monitorati in automatico da Shopify ed è la piattaforma stessa che ci avvisa quando gli eventi si verificano. Questo è estremamente importante. Questo significa che è molto improbabile che ci perdiamo degli eventi, a meno che non sia Shopify stesso che se li perda.
I dati aggiuntivi e l’oggetto “Event”
Dall'esempio sopra, avrai notato che per il push nel dataLayer, utilizzo l'oggetto "event". Quest'oggetto viene compilato automaticamente da Shopify ed è sempre dinamico. A seconda dell'evento, riporta diverse informazioni:
Informazioni sui prodotti
Informazioni sulle pagine visualizzate
Informazioni sul browser e molto altro
Quando ho iniziato a esplorare i Custom Pixel, la prima cosa che ho fatto è stata proprio analizzare l'oggetto event per ogni evento standard a cui mi sono iscritto.
Ho dedicato intere giornate ad esaminare l'oggetto in ogni sua sfaccettatura, mappando su GTM i vari elementi per poterli utilizzare efficacemente.
Di questo parleremo più approfonditamente nei prossimi post. Ciò che è importante capire è che Shopify non ci fornisce solo informazioni sugli eventi, ma anche sui prodotti e sulle pagine coinvolte in quegli eventi.
Con questi dati possiamo realizzare praticamente qualsiasi cosa.
Non intendo elencare tutti i dati recuperabili, ma voglio fornirti uno schema utile per comprendere la struttura dell'oggetto event.
Context
Come accennavo sopra, l’oggetto Event è composto da vari Elementi. Context nonostante possa sembrare irrilevante contiene in realtà tantissime informazioni utili per bypassare i problemi relativi ai Custom Pixel.
In particolare, contiene informazioni rilevanti su:
Pagina
Finestra
Lingua
Tutte informazioni che all’interno della Sandbox non siamo in grado di recuperare. Cerchiamo di fare un’esempio praticissimo.
Immagina di aver installato Google Tag Manager all’interno del codice del tuo Custom Pixel. Benissimo, adesso sei pronto a far partire un’evento ad ogni visualizzazione di pagina.
Imposti tutto a dovere ed utilizzi la variabile d’ambiente di GTM “Page URL” pensando che quest’ultima contenga l’indirizzo della pagina.
Ti sbagli. Come ho spiegato all'inizio, il codice del tuo Custom Pixel viene eseguito all'interno di un iframe sul sito web. Non è direttamente presente sulla pagina e, di conseguenza, le variabili d'ambiente di GTM potrebbero non funzionare correttamente.
È qui che Shopify, con l'oggetto Context, ci viene in aiuto. Probabilmente hanno compreso anche loro questo limite e, per aggirarlo, hanno pensato: "Non potete accedere a queste informazioni, ma possiamo inviarle noi insieme agli eventi".
L'oggetto Context contiene tutte queste informazioni essenziali. So che può sembrare noioso approfondire questi dettagli, ma ci tengo che tu possa padroneggiare i custom pixel al meglio, avendo accesso a tutte le informazioni necessarie.
Comprendere questi meccanismi è cruciale: se non vengono gestiti correttamente, potresti ritrovarti con dati completamente errati sulla piattaforma.
Vuoi vedere un caso concreto? Ecco cosa è accaduto a un cliente che non ha utilizzato correttamente l'oggetto Context durante la configurazione di Google Analytics 4.
In pratica, analizzando il report relativo alle pagine di destinazione, si è ritrovato sommerso di URL riferiti alla Sandbox e con una durata media di visualizzazione pari a 0 secondi su numerose pagine visitate..
Un disastro, sol perché non ha compreso bene il funzionamento della Sandbox.
Bene, chiarito questo, ti mostro un export dell oggetto Context così da verificare insieme quali informazioni possiamo estrarre. Nel mio caso sto recuperando l’oggetto Context per l’evento di visualizzazione prodotto, ma tale oggetto viene inviato per tutti gli eventi standard, ed anche, eventualmente, per gli eventi custom che deciderai di inviare.
{
"document": {
"location": {
"href": "https://gioco-enrico-9-gennaio.myshopify.com/products/the-complete-snowboard",
"hash": "",
"host": "gioco-enrico-9-gennaio.myshopify.com",
"hostname": "gioco-enrico-9-gennaio.myshopify.com",
"origin": "https://gioco-enrico-9-gennaio.myshopify.com",
"pathname": "/products/the-complete-snowboard",
"port": "",
"protocol": "https:",
"search": ""
},
"referrer": "https://gioco-enrico-9-gennaio.myshopify.com/",
"characterSet": "UTF-8",
"title": "Complete Snowboard – Gioco Enrico - 9 Gennaio"
},
"navigator": {
"language": "it-IT",
"cookieEnabled": true,
"languages": [
"it-IT",
"it",
"en-US",
"en"
],
"userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36"
},
"window": {
"innerHeight": 872,
"innerWidth": 1920,
"outerHeight": 993,
"outerWidth": 1920,
"pageXOffset": 0,
"pageYOffset": 0,
"location": {
"href": "https://gioco-enrico-9-gennaio.myshopify.com/products/the-complete-snowboard",
"hash": "",
"host": "gioco-enrico-9-gennaio.myshopify.com",
"hostname": "gioco-enrico-9-gennaio.myshopify.com",
"origin": "https://gioco-enrico-9-gennaio.myshopify.com",
"pathname": "/products/the-complete-snowboard",
"port": "",
"protocol": "https:",
"search": ""
},
"origin": "https://gioco-enrico-9-gennaio.myshopify.com",
"screen": {
"height": 1080,
"width": 1920
},
"screenX": 0,
"screenY": 25,
"scrollX": 0,
"scrollY": 0
}
}
Come puoi notare dal codice sopra, queste sono informazioni che generalmente non siamo abituati a gestire, ma che dovremo utilizzare correttamente nei nostri strumenti di Web Analytics.
Ora che abbiamo chiarito questo punto, passiamo all'oggetto data.
Data
L’oggetto Data contiene informazioni importanti sui prodotti coinvolti. La sua struttura non è fissa, ma cambia in base all’evento che ci stiamo trovando a trattare. Le strutture più importanti che devi conoscere sono:
Quella della visualizzazione di un prodotto
Quella relativa al checkout (per tutti gli eventi del checkout)
Quella relativa all’aggiunta al carrello
Dopo di ché, il mio consiglio è sempre quello di esplorare per filo e per segno tutte le informazioni che Shopify ci condivide in modo da comprendere come tale oggetto cambi struttura durante i vari eventi.
Al solito, come esempio, ti condivido lo stato dell’oggetto su un evento di visualizzazione di pagina sul mio store di prova.
{
"productVariant": {
"price": {
"amount": 699.95,
"currencyCode": "EUR"
},
"product": {
"title": "The Complete Snowboard",
"vendor": "Snowboard Vendor",
"id": "6983858913357",
"untranslatedTitle": "The Complete Snowboard",
"url": "/products/the-complete-snowboard",
"type": "snowboard"
},
"id": "40368475537485",
"image": {
"src": "//gioco-enrico-9-gennaio.myshopify.com/cdn/shop/products/Main_589fc064-24a2-4236-9eaf-13b2bd35d21d.jpg?v=1704819048"
},
"sku": "",
"title": "Dawn",
"untranslatedTitle": "Dawn"
}
}
La struttura è super semplice, contiene tutte le informazioni relative al prodotto, alla sua variante e a relative informazioni utili.
Altri dati
Ok, gli oggetti Context e Event sono i più importanti, tuttavia, l'oggetto Event contiene anche altre informazioni utili, come ad esempio:
Client ID
Event Name
Event ID
Timestamp
Questi, tuttavia, non sono gli unici dati presenti. In base alla tipologia di evento possiamo avere informazioni differenti.
Esplorare i dati degli eventi standard
Ora, compreso come funzionano gli eventi standard è utile conoscere sapere dove recuperare le informazioni. In questo caso, la documentazione ufficiale è il luogo perfetto in cui esplorare.
https://shopify.dev/docs/api/web-pixels-api/standard-events
Cliccando su uno qualsiasi degli eventi, è possibile osservare tutte le proprietà disponibili per quell’oggetto.
L’articolo ti è piaciuto e vuoi valutare l’implementazione dei Custom Pixel per il tuo store?