← Todos los artículos

Tutoriales

Depurar GTM sin desarrolladores — registra dataLayer.push en 30 segundos

15 mayo 2026 · por JustZix Team

El analista de marketing pregunta: «¿se ha disparado este evento?». El desarrollador responde: «probablemente, comprueba la vista previa de GTM». La vista previa de GTM, sin embargo, muestra datos distintos de los de producción. Cuatro snippets JS que llevan el dataLayer.push en bruto directamente a la consola — sin tocar el código de producción.

Por qué las herramientas estándar no bastan

La vista previa de Google Tag Manager funciona bien, pero tiene tres límites:

• No todos los eventos aparecen — algunos triggers se disparan en fases tardías, la vista previa de GTM solo captura una parte.
• Requiere acceso como editor del contenedor — los analistas freelance a menudo no tienen el acceso.
• No muestra los objetos en bruto — ves el nombre del evento y los parámetros, pero no el JSON completo que ha llegado al dataLayer.

Tu solución: inyectar JS que envuelva dataLayer.push y registre todo. Sin cambios en el código del sitio, sin despliegue, sin revisión.

Método 1 — logger básico

La versión más sencilla. Envuelve dataLayer.push y vuelca cada llamada a la consola:

// Esperar la inicialización 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 activo');

Abre las DevTools, pulsa cualquier cosa en la página (un botón «Añadir al carrito», login, scroll), y la consola muestra:

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

Cada push en forma completa. Exactamente lo que GTM ve.

Método 2 — filtrar solo los eventos que te interesan

El logger del método 1 produce mucho ruido (el propio GTM empuja gtm.dom, gtm.load, gtm.click, etc.). Si estás depurando un flujo específico — una compra de e-commerce, digamos — 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 sección plegable, console.table renderiza los items como tabla con columnas — más agradable que el JSON en bruto. Perfecto para los eventos de e-commerce con muchos productos.

Método 3 — interceptar gtag()

Algunas integraciones (configuración de GA4) usan la función gtag() en lugar de los push directos al dataLayer. Bajo el capó es lo mismo, pero tienes que capturarla de otra manera:

// Esperar a que gtag esté 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 activo');
}
wrapGtag();

Sondea cada 100ms hasta que gtag esté definido (GTM lo carga de forma asíncrona). Una vez encontrado — lo envuelve. Registra cada gtag('event', '...', {...}) y gtag('config', '...').

Método 4 — feedback visual con toast

La consola está bien, pero a veces quieres ver los eventos sin abrir las DevTools — por ejemplo para demostrarle a un cliente que el tracking funciona. Toast flotante en la esquina superior derecha:

// Contenedor de los 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);
};

Cada evento → toast verde arriba a la derecha, desaparece en 3 segundos. El cliente observa el flujo, ve los eventos «dispararse» — credibilidad sin DevTools.

Trampas que evitar

• Timing vs. inicialización de GTM — si tu wrapper carga después de los primeros eventos GTM (p. ej. gtm.dom), esos no se registrarán. Inyecta lo antes posible (JustZix corre antes de DOMContentLoaded — normalmente basta).
• dataLayer.push puede ser sustituido por otro tag en GTM — si alguien ha sobrescrito el método más tarde, tu wrap se rompe. Comprueba window.dataLayer.push.toString() en la consola — debería contener tu código.
• Un console.log verboso de objetos grandes puede ralentizar el navegador en contextos SPA con 1000+ eventos. En producción limita: if (args[0].event === 'purchase') ....
• No dejes el interruptor en producción — JustZix es una herramienta de desarrollo, no una extensión de analytics. Desactiva la regla después de depurar, no la dejes encendida permanentemente.

Cómo conectarlo a JustZix

1. Instala JustZix.
2. Crea una carpeta «Debug GTM».
3. Regla por entorno: patrón de URL https://mystore.com/* y https://staging.mystore.com/*, JavaScript = Método 1 o 2.
4. Botón flotante → conmuta la regla cuando la necesites. Desactívala después de la sesión de depuración.
5. Sync: pega la clave de sincronización en un segundo dispositivo — también tu compañero de marketing tiene el logger a un clic.

Qué hacer después

El mismo esquema (envolver una función global existente + registrar) te permite registrar fetch, XMLHttpRequest, console.error, los callbacks de los frameworks. Mira Ejemplos → JavaScript y Casos de uso → depurar analytics.

Instala JustZix y ten herramientas de desarrollador cargadas en cada sitio, sin cambios en el código de producción.