← Alle Beiträge

Anleitungen

GTM ohne Entwickler debuggen — dataLayer.push in 30 Sekunden loggen

15 Mai 2026 · von JustZix Team

Der Marketing-Analyst fragt: „Ist dieses Event gefeuert?". Der Entwickler sagt: „wahrscheinlich, prüf die GTM-Vorschau". Die GTM-Vorschau zeigt jedoch andere Daten als die Produktion. Vier JS-Snippets, die das rohe dataLayer.push direkt in die Konsole bringen — ohne den Produktionscode anzufassen.

Warum die Standard-Tools zu kurz greifen

Die Vorschau des Google Tag Manager funktioniert gut, hat aber drei Grenzen:

• Nicht alle Events tauchen auf — manche Trigger feuern in späten Phasen, die GTM-Vorschau erfasst nur einige.
• Erfordert Login als Container-Editor — freiberufliche Analysten haben oft keinen Zugriff.
• Zeigt keine rohen Objekte — du siehst den Event-Namen und die Parameter, aber nicht das vollständige JSON, das im dataLayer gelandet ist.

Deine Lösung: JS injizieren, das dataLayer.push umhüllt und alles loggt. Ohne Änderung am Seitencode, kein Deploy, kein Review.

Methode 1 — einfacher Logger

Die einfachste Version. Umhüllt dataLayer.push und kippt jeden Aufruf in die Konsole:

// Auf die GTM-Initialisierung warten
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] dataLayer-Logger aktiv');

Du öffnest die DevTools, klickst irgendwas auf der Seite (einen „In den Warenkorb"-Button, Login, Scroll), und die Konsole zeigt:

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

Jeder Push in voller Form. Genau das, was GTM sieht.

Methode 2 — nur die Events filtern, die dich interessieren

Der Logger aus Methode 1 erzeugt viel Rauschen (GTM selbst pusht gtm.dom, gtm.load, gtm.click usw.). Wenn du einen konkreten Flow debuggst — etwa einen E-Commerce-Kauf — filtere:

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 erzeugt einen einklappbaren Abschnitt, console.table rendert die Items als Tabelle mit Spalten — schöner als rohes JSON. Perfekt für E-Commerce-Events mit vielen Produkten.

Methode 3 — gtag() abfangen

Manche Integrationen (GA4-Setup) nutzen die Funktion gtag() statt direkter dataLayer-Pushes. Unter der Haube ist es dasselbe, aber du musst es anders abfangen:

// Warten, bis gtag verfügbar wird
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 aktiv');
}
wrapGtag();

Prüft alle 100ms, bis gtag definiert ist (GTM lädt es asynchron). Sobald gefunden — umhüllt es. Loggt jedes gtag('event', '...', {...}) und gtag('config', '...').

Methode 4 — visuelles Toast-Feedback

Die Konsole ist gut, aber manchmal willst du Events sehen, ohne die DevTools zu öffnen — etwa um einem Kunden zu zeigen, dass das Tracking funktioniert. Schwebende Toasts in der oberen rechten Ecke:

// Toast-Container
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);
};

Jedes Event → grüner Toast oben rechts, verschwindet nach 3 Sekunden. Der Kunde beobachtet den Flow, sieht Events „feuern" — Glaubwürdigkeit ohne DevTools.

Fallstricke, die du vermeiden solltest

• Timing vs. GTM-Initialisierung — wenn dein Wrapper nach den ersten GTM-Events lädt (z. B. gtm.dom), werden diese nicht geloggt. Injiziere so früh wie möglich (JustZix läuft vor DOMContentLoaded — meist ausreichend).
• dataLayer.push kann von einem anderen Tag ersetzt werden in GTM — wenn jemand die Methode später überschrieben hat, bricht dein Wrap. Prüfe window.dataLayer.push.toString() in der Konsole — sie sollte deinen Code enthalten.
• Ausführliches console.log großer Objekte kann den Browser in SPA-Kontexten mit 1000+ Events verlangsamen. In der Produktion begrenzen: if (args[0].event === 'purchase') ....
• Committe den Schalter nicht in die Produktion — JustZix ist ein Dev-Tool, keine Analytics-Erweiterung. Deaktiviere die Regel nach dem Debuggen, lass sie nicht dauerhaft an.

So bindest du es in JustZix ein

1. Installiere JustZix.
2. Erstelle einen Ordner „GTM-Debug".
3. Regel pro Umgebung: URL-Muster https://mystore.com/* und https://staging.mystore.com/*, JavaScript = Methode 1 oder 2.
4. Schwebender Button → Regel umschalten, wenn du sie brauchst. Nach der Debug-Session deaktivieren.
5. Sync: füge den Sync-Schlüssel auf einem zweiten Gerät ein — auch dein Marketing-Kollege hat den Logger einen Klick weit entfernt.

Was kommt als Nächstes

Dasselbe Muster (eine bestehende globale Funktion umhüllen + loggen) erlaubt dir, fetch, XMLHttpRequest, console.error, Framework-Callbacks zu loggen. Siehe Beispiele → JavaScript und Anwendungsfälle → Analytics-Debugging.

Installiere JustZix und habe Entwickler-Tools auf jeder Seite geladen, ohne Änderungen am Produktionscode.