← Wszystkie wpisy

Poradniki

Debugowanie GTM bez devów — loguj dataLayer.push w 30 sekund

15 maja 2026 · autor JustZix Team

Analityk marketingowy pyta: „czy ten event się wysłał?". Programista odpowiada: „pewnie tak, sprawdź w GTM Preview". GTM Preview pokazuje jednak inne dane niż produkcja. Cztery snippety JS, które pokazują surowy dataLayer.push bezpośrednio w konsoli — bez dotykania produkcyjnego kodu.

Dlaczego standardowe narzędzia nie wystarczają

Google Tag Manager Preview działa świetnie, ale ma 3 ograniczenia:

• Nie wszystkie eventy widać w Preview — niektóre triggery odpalają w późnym phase, GTM Preview łapie tylko część.
• Wymaga zalogowania jako edytor kontenera GTM — analityk freelance nie zawsze ma dostęp.
• Nie pokazuje surowych obiektów — widzisz nazwę eventu i jego parametry, ale nie pełen JSON który poszedł do dataLayer.

Twoje rozwiązanie: wstrzyknięty JS, który wrapuje dataLayer.push i loguje wszystko. Bez zmian w kodzie strony, bez deploya, bez review.

Metoda 1 — podstawowy logger

Najprostsza wersja. Wrapuje dataLayer.push i wyrzuca każde wywołanie do konsoli:

// Czekamy na inicjalizację 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] dataLayer logger aktywny');

Otwierasz DevTools, klikasz na stronie cokolwiek (przycisk „Dodaj do koszyka", login, scrol), a w konsoli widzisz:

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

Każdy push w pełnej formie. Dokładnie to, co GTM widzi.

Metoda 2 — filtruj tylko interesujące eventy

Logger z metody 1 produkuje dużo szumu (GTM sam pusha gtm.dom, gtm.load, gtm.click itd). Jeśli debugujesz konkretny flow — np. e-commerce purchase — filtruj:

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 robi zwijaną sekcję, console.table wyświetla items jako tabelę z kolumnami — wygodniej niż surowy JSON. Idealne dla e-commerce eventów z wieloma productami.

Metoda 3 — przechwytuj gtag()

Niektóre integracje (GA4 setup) używają funkcji gtag() zamiast bezpośredniego push do dataLayer. Pod spodem to samo, ale event łapać trzeba inaczej:

// Czekamy aż gtag będzie dostępny
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 aktywny');
}
wrapGtag();

Polluje co 100ms aż gtag się zdefiniuje (GTM go ładuje async). Po znalezieniu — wrapuje. Loguje każde gtag('event', '...', {...}) i gtag('config', '...').

Metoda 4 — visual toast feedback

Konsola jest fajna, ale czasami chcesz widzieć eventy bez wchodzenia w DevTools — np. demonstrując klientowi że tracking działa. Floating toast w prawym górnym rogu:

// Stwórz container dla toastów
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);
};

Każdy event → zielony toast w prawym górnym rogu, znika po 3 sekundach. Klient ogląda flow, widzi że eventy „strzelają" — wzrost wiarygodności bez DevTools.

Pułapki, których warto unikać

• Timing względem inicjalizacji GTM — jeśli Twój wrapper załaduje się po pierwszych GTM eventach (np. gtm.dom), te się nie zalogują. Wstrzyknij jak najwcześniej (JustZix robi to przed DOMContentLoaded — zwykle wystarczy).
• dataLayer.push może być zastąpiony przez inny tag w GTM — jeśli ktoś nadpisał metodę później, Twój wrap przestaje działać. Sprawdź window.dataLayer.push.toString() w konsoli — powinien zawierać Twój kod.
• console.log z dużych obiektów może spowolnić przeglądarkę w kontekście SPA z 1000+ eventami. W produkcji ogranicz: if (args[0].event === 'purchase') ....
• Nie commituj toggle-a do produkcji — JustZix to dev tool, nie analytics extension. Wyłącz regułę po debugowaniu, nie zostawiaj na stałe.

Jak wpiąć w JustZix

1. Zainstaluj JustZix.
2. Utwórz katalog „GTM debug".
3. Reguła per środowisko: wzorzec URL https://mojsklep.com/* i https://staging.mojsklep.com/*, JavaScript = Metoda 1 lub 2.
4. Pływający przycisk → toggle reguły gdy potrzebujesz. Po sesji debug wyłącz.
5. Synchronizacja: klucz sync wgrasz na drugim urządzeniu — i kolega z marketingu też ma logger jednym klikiem.

Co dalej

Tym samym wzorcem (wrap istniejącej globalnej funkcji + log) zlogujesz fetch, XMLHttpRequest, console.error, callbacki frameworków. Zobacz Przykłady → JavaScript i Zastosowania → debugowanie analityki.

Zainstaluj JustZix i miej tools deweloperskie wgrane na każdej stronie, bez zmian w produkcyjnym kodzie.