Come implementare un Data Layer su Shopify per un tracciamento avanzato con Google Tag Manager

Per chi gestisce un eCommerce su Shopify, tracciare correttamente i comportamenti degli utenti è fondamentale per ottimizzare campagne, misurare vendite e migliorare la customer experience.
Google Tag Manager (GTM) è lo strumento ideale per centralizzare i tag di tracciamento, ma per funzionare al meglio ha bisogno di una base solida: il data layer.

In questo articolo ti mostro una risorsa open source trovata su GitHub che semplifica enormemente la creazione di un data layer personalizzato per Shopify, pronta per l’integrazione con GTM e GA4.
Vedremo come funziona, come installarla e come adattarla alle tue esigenze.

Durante le ricerche sul tema, ho trovato un progetto GitHub davvero utile: un data layer custom già strutturato per Shopify, pensato per raccogliere automaticamente informazioni su prodotti, carrello, e ordini.

Il progetto fornisce un set completo di eventi come:

• view_item
• add_to_cart
• begin_checkout
• purchase

 

E organizza i dati secondo lo schema e-commerce GA4, così GTM può leggerli senza dover riscrivere la logica di tracciamento.

Dopo aver trovato la risorsa open source Ultimate DataLayer for Shopify su GitHub, vediamo insieme come implementarla nel tuo store Shopify per abilitare un tracciamento avanzato e compatibile con Google Tag Manager (GTM) e GA4.

L’integrazione si suddivide in due fasi principali, più una terza dedicata al debug.

🔹 Fase 1: Inserimento del Data Layer nel tema Shopify

1. Accedi al tuo pannello Shopify e vai su Negozio online → Temi
2. Sulla riga del tema pubblicato, clicca sui tre puntini (…) e seleziona Modifica codice (Edit code)
3. Nella sezione Snippets, crea un nuovo file .liquid (puoi assegnare qualsiasi nome).
   Nell’esempio, lo chiameremo: dataLayer-custom.liquid
4. Apri il file appena creato e incolla al suo interno il codice presente nel repository GitHub:
   👉 ultimate-datalayer.liquid
5. Clicca su Salva.
6. Ora dobbiamo includere lo snippet nel layout principale del tema:
7. Nella cartella Layout, apri il file theme.liquid.
8. Subito sotto lo script di Google Tag Manager, aggiungi la seguente riga di codice: {% include ‘dataLayer-custom’ %}
9. 🔸 Sostituisci ‘dataLayer-custom’ con il nome esatto del file snippet che hai creato nel passaggio precedente (senza l’estensione .liquid).
10. Salva le modifiche.
    Con questo hai completato la prima fase: il data layer è ora disponibile su tutte le pagine del tuo store.

🔹 Fase 2: Creazione del pixel personalizzato in Shopify

1. Clicca sull’icona ingranaggio in basso a sinistra per accedere a Impostazioni.
2. Seleziona Eventi del cliente (Customer events).
3. Clicca su Aggiungi pixel personalizzato (Add custom pixel).
4. Inserisci un nome per il pixel, ad esempio: DataLayer | Checkout
   
   
5. Nella sezione Autorizzazioni, puoi lasciare le impostazioni predefinite (non obbligatorio, non costituisce vendita di dati).
6. Nel box di codice in basso, incolla il contenuto del file GitHub:
   👉 checkout-webpixel.js
   
7. All’interno del codice, sostituisci l’ID del contenitore GTM alla riga seguente:
   const GTM_container_id = ‘GTM-00000000’;
8. Inserisci tra gli apici il tuo vero ID del container GTM (esempio: GTM-AB12C34).
9. Clicca su Salva, quindi su Collega (Connect) per attivare il pixel.

A questo punto il pixel personalizzato è operativo e può inviare eventi del checkout (come begin_checkout e purchase) al tuo data layer, anche sui piani base di Shopify dove il checkout non è modificabile direttamente.

🔹 Fase 3: Verifica e debug con Google Tag Manager

In questo articolo non entriamo nel dettaglio della creazione di tag, trigger e variabili in GTM, ma è fondamentale sapere come testare il tracciamento per assicurarsi che il Data Layer e il pixel personalizzato funzionino correttamente.

1. Vai su tagassistant.google.com
2. Clicca su Preview e inserisci l’URL del tuo store Shopify.
3. Naviga sul sito e verifica che gli eventi vengano visualizzati correttamente nel pannello di Tag Assistant.

Tuttavia, c’è un aspetto importante da considerare:
👉 Il Customer Pixel di Shopify viene eseguito in modalità sandbox.
Questo significa che, durante i test, Tag Assistant potrebbe restituire errori o non visualizzare gli eventi generati nel checkout, soprattutto per i piani base di Shopify dove il checkout è condiviso e non modificabile.

Per ovviare a questa limitazione, puoi utilizzare un’estensione dedicata per Chrome:

🧩 Estensione consigliata:
LeoMeasure – DataLayer Checker & GTM Injector

Una volta installata:

1. Inserisci l’URL del tuo store.
2. Copia e incolla lo snippet del tuo container GTM.
   
   
3. Attiva l’opzione in basso “GTM Preview for Shopify Custom Pixel”.
   

In questo modo potrai visualizzare correttamente gli eventi anche in modalità sandbox e utilizzare Tag Assistant per monitorare il flusso di dati in tempo reale, inclusi quelli del checkout.

Hai bisogno di supporto tecnico sul tuo store? Scopri il nostro servizio di sviluppo e-commerce Shopify.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event': 'page_view',
  'page_type': 'product',
  'product_id': 12345,
  'product_name': 'Sneakers Uomo Air',
  'product_price': 89.90
});