← Tous les articles

Tutoriels

Déboguer GTM sans développeurs — journaliser dataLayer.push en 30 secondes

15 mai 2026 · par JustZix Team

L'analyste marketing demande : « cet événement s'est-il déclenché ? ». Le développeur répond : « probablement, vérifie l'aperçu GTM ». L'aperçu GTM, pourtant, montre des données différentes de la production. Quatre snippets JS qui font remonter le dataLayer.push brut directement dans la console — sans toucher au code de production.

Pourquoi l'outillage standard ne suffit pas

L'aperçu de Google Tag Manager fonctionne bien, mais a trois limites :

• Tous les événements n'apparaissent pas — certains déclencheurs s'activent en phases tardives, l'aperçu GTM n'en capte qu'une partie.
• Nécessite une connexion en tant qu'éditeur du conteneur — les analystes freelance n'ont souvent pas l'accès.
• N'affiche pas les objets bruts — vous voyez le nom de l'événement et les paramètres, mais pas le JSON complet arrivé dans le dataLayer.

Votre solution : injecter du JS qui encapsule dataLayer.push et journalise tout. Sans modifier le code du site, sans déploiement, sans revue.

Méthode 1 — logger basique

La version la plus simple. Encapsule dataLayer.push et déverse chaque appel dans la console :

// Attendre l'initialisation de 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 actif');

Vous ouvrez les DevTools, cliquez sur quoi que ce soit (un bouton « Ajouter au panier », connexion, scroll), et la console affiche :

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

Chaque push sous forme complète. Exactement ce que GTM voit.

Méthode 2 — filtrer seulement les événements qui vous intéressent

Le logger de la méthode 1 produit beaucoup de bruit (GTM lui-même pousse gtm.dom, gtm.load, gtm.click, etc.). Si vous déboguez un flux précis — un achat e-commerce, disons — filtrez :

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 crée une section repliable, console.table affiche les items en tableau avec colonnes — plus agréable que du JSON brut. Parfait pour les événements e-commerce avec beaucoup de produits.

Méthode 3 — intercepter gtag()

Certaines intégrations (configuration GA4) utilisent la fonction gtag() au lieu de pushes directs vers le dataLayer. Sous le capot c'est pareil, mais il faut l'attraper différemment :

// Attendre que gtag devienne disponible
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 actif');
}
wrapGtag();

Sonde toutes les 100ms jusqu'à ce que gtag soit défini (GTM le charge en asynchrone). Une fois trouvé — l'encapsule. Journalise chaque gtag('event', '...', {...}) et gtag('config', '...').

Méthode 4 — retour visuel par toast

La console c'est bien, mais parfois vous voulez voir les événements sans ouvrir les DevTools — par exemple démontrer à un client que le tracking fonctionne. Toast flottant dans le coin supérieur droit :

// Conteneur des toasts
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);
};

Chaque événement → toast vert en haut à droite, disparaît en 3 secondes. Le client observe le flux, voit les événements « se déclencher » — de la crédibilité sans DevTools.

Pièges à éviter

• Timing vs. initialisation de GTM — si votre wrapper se charge après les premiers événements GTM (p. ex. gtm.dom), ceux-ci ne seront pas journalisés. Injectez le plus tôt possible (JustZix s'exécute avant DOMContentLoaded — généralement suffisant).
• dataLayer.push peut être remplacé par un autre tag dans GTM — si quelqu'un a surchargé la méthode plus tard, votre wrap casse. Vérifiez window.dataLayer.push.toString() dans la console — elle devrait contenir votre code.
• Un console.log verbeux de gros objets peut ralentir le navigateur dans des SPA à 1000+ événements. En production, limitez : if (args[0].event === 'purchase') ....
• Ne committez pas l'interrupteur en production — JustZix est un outil de dev, pas une extension d'analytics. Désactivez la règle après le débogage, ne la laissez pas allumée en permanence.

Comment brancher dans JustZix

1. Installez JustZix.
2. Créez un dossier « Débogage GTM ».
3. Règle par environnement : motif d'URL https://mystore.com/* et https://staging.mystore.com/*, JavaScript = Méthode 1 ou 2.
4. Bouton flottant → basculez la règle quand vous en avez besoin. Désactivez-la après la session de débogage.
5. Sync : collez la clé de synchronisation sur un second appareil — votre collègue marketing a aussi le logger à un clic.

Et ensuite

Le même motif (encapsuler une fonction globale existante + journaliser) permet de journaliser fetch, XMLHttpRequest, console.error, les callbacks de framework. Voyez Exemples → JavaScript et Cas d'usage → débogage analytics.

Installez JustZix et ayez des outils de développeur chargés sur chaque site, sans modifier le code de production.