← Все статьи

Туториалы

Отладка GTM без разработчиков — логируй dataLayer.push за 30 секунд

15 мая 2026 · автор JustZix Team

Маркетинг-аналитик спрашивает: «это событие сработало?». Разработчик отвечает: «наверное, проверь превью GTM». А превью GTM показывает данные, отличные от продакшена. Четыре JS-сниппета, которые выводят сырой dataLayer.push прямо в консоль — не трогая продакшен-код.

Почему стандартных инструментов недостаточно

Превью Google Tag Manager работает хорошо, но у него три ограничения:

• Не все события появляются — некоторые триггеры срабатывают на поздних этапах, превью GTM ловит только часть.
• Требует доступ редактора контейнера — у фриланс-аналитиков часто нет доступа.
• Не показывает сырые объекты — ты видишь имя события и параметры, но не полный JSON, попавший в dataLayer.

Твоё решение: внедрить JS, который оборачивает dataLayer.push и логирует всё. Без изменений в коде сайта, без деплоя, без ревью.

Способ 1 — базовый логгер

Самая простая версия. Оборачивает dataLayer.push и выводит каждый вызов в консоль:

// Ждём инициализации 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 активен');

Открой DevTools, кликни что угодно на странице (кнопку «Добавить в корзину», логин, прокрутку), и консоль покажет:

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

Каждый push в полной форме. Ровно то, что видит GTM.

Способ 2 — фильтровать только нужные события

Логгер способа 1 даёт много шума (сам GTM пушит gtm.dom, gtm.load, gtm.click и т.д.). Если ты отлаживаешь конкретный поток — скажем, покупку в e-commerce — отфильтруй:

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 создаёт сворачиваемую секцию, console.table рендерит товары как таблицу с колонками — приятнее, чем сырой JSON. Идеально для e-commerce-событий с множеством товаров.

Способ 3 — перехват gtag()

Некоторые интеграции (настройка GA4) используют функцию gtag() вместо прямых push в dataLayer. Под капотом это то же самое, но ловить нужно по-другому:

// Ждём, пока gtag станет доступен
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] логгер активен');
}
wrapGtag();

Опрашивает каждые 100 мс, пока gtag не определён (GTM загружает его асинхронно). Найдя — оборачивает. Логирует каждый gtag('event', '...', {...}) и gtag('config', '...').

Способ 4 — визуальная обратная связь через toast

Консоль — это хорошо, но иногда хочется видеть события без открытия DevTools — например, чтобы показать клиенту, что трекинг работает. Плавающий toast в правом верхнем углу:

// Контейнер 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);
};

Каждое событие → зелёный toast в правом верхнем углу, исчезает через 3 секунды. Клиент наблюдает поток, видит, как события «срабатывают» — доверие без DevTools.

Ловушки, которых стоит избегать

• Тайминг против инициализации GTM — если твой враппер загружается после первых событий GTM (например, gtm.dom), они не будут залогированы. Внедряй как можно раньше (JustZix работает до DOMContentLoaded — обычно этого достаточно).
• dataLayer.push может быть заменён другим тегом в GTM — если кто-то переопределил метод позже, твоя обёртка ломается. Проверь window.dataLayer.push.toString() в консоли — там должен быть твой код.
• Многословный console.log больших объектов может тормозить браузер в SPA-контекстах с 1000+ событий. В продакшене ограничь: if (args[0].event === 'purchase') ....
• Не коммить переключатель в продакшен — JustZix это инструмент разработки, не аналитическое расширение. Отключи правило после отладки, не оставляй его включённым навсегда.

Как подключить это к JustZix

1. Установи JustZix.
2. Создай папку «Отладка GTM».
3. Правило для окружения: URL-паттерн https://mystore.com/* и https://staging.mystore.com/*, JavaScript = способ 1 или 2.
4. Плавающая кнопка → переключай правило, когда нужно. Отключи его после сессии отладки.
5. Sync: вставь ключ синхронизации на второе устройство — у твоего коллеги из маркетинга тоже есть логгер в один клик.

Что делать дальше

Тот же приём (обернуть существующую глобальную функцию + логировать) позволяет логировать fetch, XMLHttpRequest, console.error, колбэки фреймворков. Смотри Примеры → JavaScript и Сценарии применения → отладка аналитики.

Установи JustZix и получи инструменты разработчика, загруженные на каждом сайте, без изменений в продакшен-коде.