← Tutti gli articoli

Tutorial

Debug di GTM senza sviluppatori — registra dataLayer.push in 30 secondi

15 maggio 2026 · di JustZix Team

L'analista marketing chiede: «questo evento è scattato?». Lo sviluppatore risponde: «probabilmente, controlla l'anteprima di GTM». L'anteprima di GTM, però, mostra dati diversi dalla produzione. Quattro snippet JS che portano il dataLayer.push grezzo direttamente nella console — senza toccare il codice di produzione.

Perché gli strumenti standard non bastano

L'anteprima di Google Tag Manager funziona bene, ma ha tre limiti:

• Non tutti gli eventi compaiono — alcuni trigger scattano in fasi tardive, l'anteprima di GTM ne cattura solo una parte.
• Richiede l'accesso come editor del container — gli analisti freelance spesso non hanno l'accesso.
• Non mostra gli oggetti grezzi — vedi il nome dell'evento e i parametri, ma non il JSON completo finito nel dataLayer.

La tua soluzione: iniettare JS che avvolge dataLayer.push e registra tutto. Senza modifiche al codice del sito, nessun deploy, nessuna review.

Metodo 1 — logger di base

La versione più semplice. Avvolge dataLayer.push e riversa ogni chiamata nella console:

// Attendere l'inizializzazione di GTM
window.dataLayer = window.dataLayer || [];

const origPush = window.dataLayer.push;
window.dataLayer.push = function(...args) {
  console.log(
    '%c[GTM]', 'color:#16a34a;font-weight:bold;font-size:13px',
    args
  );
  return origPush.apply(window.dataLayer, args);
};

console.log('[GTM] logger dataLayer attivo');

Apri i DevTools, clicchi qualsiasi cosa nella pagina (un pulsante «Aggiungi al carrello», login, scroll), e la console mostra:

[GTM] [{event: 'add_to_cart', ecommerce: {items: [...]}}]
[GTM] [{event: 'gtm.click', gtm.element: button, ...}]

Ogni push in forma completa. Esattamente ciò che GTM vede.

Metodo 2 — filtrare solo gli eventi che ti interessano

Il logger del metodo 1 produce molto rumore (GTM stesso pusha gtm.dom, gtm.load, gtm.click ecc.). Se stai debuggando un flusso specifico — un acquisto e-commerce, diciamo — filtra:

const TARGET_EVENTS = [
  'purchase', 'add_to_cart', 'begin_checkout',
  'view_item', 'select_item', 'add_payment_info'
];

window.dataLayer = window.dataLayer || [];
const origPush = window.dataLayer.push;
window.dataLayer.push = function(...args) {
  const eventName = args[0]?.event;
  if (TARGET_EVENTS.includes(eventName)) {
    console.group(
      `%c[GTM] ${eventName}`,
      'color:#16a34a;font-weight:bold;font-size:14px'
    );
    console.log('Payload:', args[0]);
    if (args[0].ecommerce) {
      console.table(args[0].ecommerce.items);
    }
    console.groupEnd();
  }
  return origPush.apply(window.dataLayer, args);
};

console.group crea una sezione richiudibile, console.table rende gli item come tabella con colonne — più gradevole del JSON grezzo. Perfetto per gli eventi e-commerce con molti prodotti.

Metodo 3 — intercettare gtag()

Alcune integrazioni (configurazione GA4) usano la funzione gtag() invece dei push diretti al dataLayer. Sotto il cofano è la stessa cosa, ma devi catturarla in modo diverso:

// Attendere che gtag diventi disponibile
function wrapGtag() {
  if (typeof window.gtag !== 'function') {
    setTimeout(wrapGtag, 100);
    return;
  }
  const origGtag = window.gtag;
  window.gtag = function(...args) {
    console.log(
      '%c[gtag]', 'color:#2563eb;font-weight:bold',
      args[0] /* 'event' | 'config' | 'set' */,
      args.slice(1)
    );
    return origGtag.apply(this, args);
  };
  console.log('[gtag] logger attivo');
}
wrapGtag();

Sonda ogni 100ms finché gtag non è definito (GTM lo carica in modo asincrono). Una volta trovato — lo avvolge. Registra ogni gtag('event', '...', {...}) e gtag('config', '...').

Metodo 4 — feedback visivo con toast

La console va bene, ma a volte vuoi vedere gli eventi senza aprire i DevTools — ad esempio per dimostrare a un cliente che il tracciamento funziona. Toast flottante nell'angolo in alto a destra:

// Contenitore dei toast
const container = document.createElement('div');
container.style.cssText = `
  position: fixed; top: 16px; right: 16px;
  z-index: 999999; display: flex; flex-direction: column;
  gap: 6px; max-width: 320px;
`;
document.body.appendChild(container);

function showToast(text) {
  const t = document.createElement('div');
  t.style.cssText = `
    background: #16a34a; color: white;
    padding: 8px 12px; border-radius: 6px;
    font: 12px ui-monospace, monospace;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
  `;
  t.textContent = text;
  container.appendChild(t);
  setTimeout(() => t.remove(), 3000);
}

const origPush = window.dataLayer.push;
window.dataLayer.push = function(...args) {
  const name = args[0]?.event || 'unknown';
  showToast('GTM: ' + name);
  return origPush.apply(window.dataLayer, args);
};

Ogni evento → toast verde in alto a destra, sparisce in 3 secondi. Il cliente osserva il flusso, vede gli eventi «scattare» — credibilità senza DevTools.

Trappole da evitare

• Timing vs. inizializzazione di GTM — se il tuo wrapper carica dopo i primi eventi GTM (es. gtm.dom), quelli non verranno registrati. Inietta il prima possibile (JustZix gira prima di DOMContentLoaded — di solito basta).
• dataLayer.push può essere sostituito da un altro tag in GTM — se qualcuno ha sovrascritto il metodo più tardi, il tuo wrap si rompe. Controlla window.dataLayer.push.toString() nella console — dovrebbe contenere il tuo codice.
• Un console.log verboso di oggetti grandi può rallentare il browser in contesti SPA con 1000+ eventi. In produzione limita: if (args[0].event === 'purchase') ....
• Non committare l'interruttore in produzione — JustZix è uno strumento di sviluppo, non un'estensione di analytics. Disattiva la regola dopo il debug, non lasciarla accesa in permanenza.

Come collegarlo a JustZix

1. Installa JustZix.
2. Crea una cartella «Debug GTM».
3. Regola per ambiente: pattern URL https://mystore.com/* e https://staging.mystore.com/*, JavaScript = Metodo 1 o 2.
4. Pulsante flottante → commuta la regola quando ti serve. Disattivala dopo la sessione di debug.
5. Sync: incolla la chiave di sincronizzazione su un secondo dispositivo — anche il tuo collega del marketing ha il logger a un clic.

Cosa fare dopo

Lo stesso schema (avvolgere una funzione globale esistente + registrare) ti permette di registrare fetch, XMLHttpRequest, console.error, i callback dei framework. Vedi Esempi → JavaScript e Casi d'uso → debug analytics.

Installa JustZix e abbi strumenti da sviluppatore caricati su ogni sito, senza modifiche al codice di produzione.