Tooldata Academia
Lección 25 de 31•GA4 para E-commerce

Configurar Enhanced Ecommerce en GA4

Setup completo de tracking de e-commerce.

15 minutos

Enhanced Ecommerce en GA4 te permite rastrear cada interaccion del usuario con tus productos: desde que los ve por primera vez hasta que completa la compra. Esta implementacion es fundamental para entender el comportamiento de compra y optimizar la conversion de tu tienda.

Por que Enhanced Ecommerce es diferente en GA4

Si vienes de Universal Analytics, notaras cambios significativos:

Aspecto Universal Analytics GA4
Modelo de datos Plugin de ecommerce separado Eventos nativos integrados
Configuracion Activar Enhanced Ecommerce Ya incluido por defecto
Eventos Nombres personalizados Nombres estandarizados
Parametros de producto product arrays items array estandarizado
Reportes Seccion dedicada Integrado en Monetizacion

En GA4, el tracking de ecommerce es simplemente un conjunto de eventos con parametros especificos. No hay que "activar" nada, solo implementar los eventos correctamente.

Arquitectura de la implementacion

Los tres componentes clave

┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│   Tu sitio web  │ --> │  Google Tag     │ --> │  Google         │
│   (dataLayer)   │     │  Manager        │     │  Analytics 4    │
└─────────────────┘     └─────────────────┘     └─────────────────┘
  1. dataLayer: Estructura de datos en tu sitio que contiene la informacion del ecommerce
  2. Google Tag Manager (GTM): Captura los datos del dataLayer y los envia a GA4
  3. GA4: Recibe, procesa y reporta los datos

Paso 1: Preparar el dataLayer

Que es el dataLayer

El dataLayer es un array de JavaScript que actua como intermediario entre tu sitio y las herramientas de analytics. Tu sitio web "empuja" datos al dataLayer, y GTM los "escucha".

Implementacion basica del dataLayer

Asegurate de que el dataLayer exista antes de que cargue GTM:

<!-- Esto va ANTES del codigo de GTM -->
<script>
  window.dataLayer = window.dataLayer || [];
</script>

<!-- Aqui va tu codigo de GTM -->
<script>
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXXX');
</script>

Estructura del objeto items

Todos los eventos de ecommerce en GA4 usan un array llamado items con esta estructura:

{
  item_id: "SKU_12345",           // Requerido
  item_name: "Camiseta Azul",     // Requerido
  affiliation: "Tienda Principal",
  coupon: "VERANO20",
  discount: 5.00,
  index: 0,
  item_brand: "MiMarca",
  item_category: "Ropa",
  item_category2: "Camisetas",
  item_category3: "Manga Corta",
  item_category4: "Algodon",
  item_category5: "Casual",
  item_list_id: "productos_destacados",
  item_list_name: "Productos Destacados",
  item_variant: "Azul / M",
  location_id: "ChIJxxxxxxx",
  price: 29.99,
  quantity: 1
}

Importante: item_id e item_name son obligatorios. El resto son opcionales pero muy recomendados para analisis mas profundo.

Paso 2: Configurar Google Tag Manager

Crear la etiqueta de configuracion de GA4

Antes de trackear eventos de ecommerce, necesitas una etiqueta base de GA4:

  1. En GTM, ve a Etiquetas > Nueva
  2. Selecciona Configuracion de Google Analytics: GA4
  3. Ingresa tu ID de medicion (G-XXXXXXXXXX)
  4. Activador: All Pages
  5. Guarda la etiqueta

Crear variables de dataLayer

Para capturar los datos de ecommerce, crea estas variables:

Variable: DLV - ecommerce.items

  • Tipo: Variable de capa de datos
  • Nombre de variable: ecommerce.items

Variable: DLV - ecommerce.transaction_id

  • Tipo: Variable de capa de datos
  • Nombre de variable: ecommerce.transaction_id

Variable: DLV - ecommerce.value

  • Tipo: Variable de capa de datos
  • Nombre de variable: ecommerce.value

Variable: DLV - ecommerce.currency

  • Tipo: Variable de capa de datos
  • Nombre de variable: ecommerce.currency

Crear activadores personalizados

Crea activadores para cada evento de ecommerce:

Activador: CE - view_item_list

  • Tipo: Evento personalizado
  • Nombre del evento: view_item_list

Activador: CE - view_item

  • Tipo: Evento personalizado
  • Nombre del evento: view_item

Activador: CE - add_to_cart

  • Tipo: Evento personalizado
  • Nombre del evento: add_to_cart

Repite para cada evento que necesites trackear.

Paso 3: Crear etiquetas de eventos GA4

Etiqueta para view_item

Tipo: Evento de GA4
Etiqueta de configuracion: [tu etiqueta de configuracion]
Nombre del evento: view_item
Parametros del evento:
  - currency: {{DLV - ecommerce.currency}}
  - value: {{DLV - ecommerce.value}}
  - items: {{DLV - ecommerce.items}}
Activador: CE - view_item

Etiqueta para add_to_cart

Tipo: Evento de GA4
Nombre del evento: add_to_cart
Parametros del evento:
  - currency: {{DLV - ecommerce.currency}}
  - value: {{DLV - ecommerce.value}}
  - items: {{DLV - ecommerce.items}}
Activador: CE - add_to_cart

Etiqueta para purchase

Tipo: Evento de GA4
Nombre del evento: purchase
Parametros del evento:
  - transaction_id: {{DLV - ecommerce.transaction_id}}
  - currency: {{DLV - ecommerce.currency}}
  - value: {{DLV - ecommerce.value}}
  - tax: {{DLV - ecommerce.tax}}
  - shipping: {{DLV - ecommerce.shipping}}
  - coupon: {{DLV - ecommerce.coupon}}
  - items: {{DLV - ecommerce.items}}
Activador: CE - purchase

Paso 4: Implementar eventos en tu sitio

Estructura general de un push al dataLayer

// Primero, limpia el ecommerce anterior
dataLayer.push({ ecommerce: null });

// Luego, envia el nuevo evento
dataLayer.push({
  event: "nombre_del_evento",
  ecommerce: {
    // parametros del evento
    items: [
      // array de productos
    ]
  }
});

Mejor practica: Siempre limpia el objeto ecommerce antes de enviar un nuevo evento. Esto evita que datos de eventos anteriores contaminen el nuevo.

Ejemplo completo: Pagina de producto

// Cuando el usuario ve un producto
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: "view_item",
  ecommerce: {
    currency: "MXN",
    value: 599.00,
    items: [{
      item_id: "SKU_001",
      item_name: "Laptop Gamer Pro",
      item_brand: "TechBrand",
      item_category: "Electronica",
      item_category2: "Computadoras",
      item_category3: "Laptops",
      item_variant: "16GB RAM / 512GB SSD",
      price: 599.00,
      quantity: 1
    }]
  }
});

Ejemplo completo: Agregar al carrito

// Cuando el usuario hace clic en "Agregar al carrito"
function agregarAlCarrito(producto, cantidad) {
  dataLayer.push({ ecommerce: null });
  dataLayer.push({
    event: "add_to_cart",
    ecommerce: {
      currency: "MXN",
      value: producto.precio * cantidad,
      items: [{
        item_id: producto.sku,
        item_name: producto.nombre,
        item_brand: producto.marca,
        item_category: producto.categoria,
        item_variant: producto.variante,
        price: producto.precio,
        quantity: cantidad
      }]
    }
  });
}

Validar la implementacion

Usar el modo Preview de GTM

  1. En GTM, haz clic en Vista previa
  2. Ingresa la URL de tu sitio
  3. Navega por tu sitio y realiza acciones de ecommerce
  4. Verifica que:
    • Los eventos aparecen en el panel de Tag Assistant
    • Las variables tienen los valores correctos
    • Las etiquetas se disparan en el momento correcto

Verificar en GA4 DebugView

  1. En GA4, ve a Configurar > DebugView
  2. Navega por tu sitio con el Tag Assistant activo
  3. Observa los eventos en tiempo real
  4. Haz clic en cada evento para ver sus parametros

Lista de verificacion

  • El dataLayer existe antes de que cargue GTM
  • Los eventos se disparan en el momento correcto
  • Los parametros item_id e item_name siempre tienen valor
  • El currency usa formato ISO 4217 (USD, MXN, EUR)
  • El value es un numero, no un string
  • El transaction_id es unico para cada compra

Errores comunes y soluciones

Error: Eventos duplicados

Problema: El mismo evento se registra multiples veces.

Solucion: Verifica que el push al dataLayer solo se ejecuta una vez. Usa flags o eventos del DOM:

let viewItemFired = false;

function trackViewItem() {
  if (viewItemFired) return;
  viewItemFired = true;

  dataLayer.push({ ecommerce: null });
  dataLayer.push({
    event: "view_item",
    ecommerce: { /* ... */ }
  });
}

Error: Items array vacio

Problema: Los reportes muestran eventos pero sin datos de productos.

Solucion: Asegurate de que la variable en GTM apunta a ecommerce.items, no solo a items.

Error: Valores de moneda inconsistentes

Problema: Algunos eventos usan "MXN" y otros "$" o "pesos".

Solucion: Estandariza el codigo de moneda usando ISO 4217 en toda la implementacion.

Integracion con plataformas populares

Shopify

Shopify tiene integracion nativa con GA4. Para Enhanced Ecommerce:

  1. Ve a Configuracion > Checkout > Integraciones adicionales
  2. Agrega tu codigo de GTM
  3. Usa apps como "Elevar" o "Analyzify" para dataLayer completo

WooCommerce

Instala el plugin "GTM4WP" o "MonsterInsights":

  1. Instala y activa el plugin
  2. Configura tu container ID de GTM
  3. Activa el tracking de ecommerce en la configuracion
  4. El plugin generara automaticamente los pushes al dataLayer

Magento / Adobe Commerce

Usa la extension "Google Tag Manager Enhanced Ecommerce":

  1. Instala la extension via Composer
  2. Configura el container ID en el admin
  3. La extension gestiona todos los eventos de ecommerce

Mejores practicas de implementacion

1. Mantener consistencia en item_id

Usa siempre el mismo identificador (SKU, ID de producto) en todos los eventos. Esto permite trackear el journey completo del producto.

2. Implementar categorias jerarquicas

Aprovecha los 5 niveles de categoria para analisis profundo:

item_category: "Ropa",           // Nivel 1
item_category2: "Hombre",        // Nivel 2
item_category3: "Camisetas",     // Nivel 3
item_category4: "Manga Corta",   // Nivel 4
item_category5: "Deportivas"     // Nivel 5

3. Trackear promociones y cupones

Incluye siempre datos de promociones cuando apliquen:

{
  item_id: "SKU_001",
  item_name: "Producto X",
  coupon: "VERANO20",
  discount: 10.00,
  price: 90.00  // precio ya con descuento
}

4. Documentar tu implementacion

Crea un documento con:

  • Todos los eventos implementados
  • Parametros enviados en cada evento
  • Donde se dispara cada evento
  • Responsable del mantenimiento

Puntos clave de esta leccion

  • Enhanced Ecommerce en GA4 usa eventos nativos con el array items estandarizado
  • El dataLayer es el intermediario entre tu sitio y GTM
  • Siempre limpia el objeto ecommerce antes de enviar un nuevo evento
  • item_id e item_name son parametros obligatorios en cada producto
  • Valida tu implementacion con el modo Preview de GTM y DebugView de GA4
  • Documenta tu implementacion para facilitar mantenimiento

Proxima leccion

Aprenderemos en detalle los eventos estandar de ecommerce en GA4: view_item, add_to_cart, purchase y todos los demas, con sus parametros especificos y casos de uso.

Quiz de autoevaluacion

1. Cual es el orden correcto de flujo de datos en Enhanced Ecommerce?

  • a) GTM -> dataLayer -> GA4
  • b) dataLayer -> GTM -> GA4
  • c) GA4 -> GTM -> dataLayer
  • d) dataLayer -> GA4 -> GTM

2. Por que es importante limpiar el objeto ecommerce antes de cada push?

  • a) Para mejorar el rendimiento del sitio
  • b) Para evitar que datos de eventos anteriores contaminen el nuevo
  • c) Es un requisito de Google
  • d) Para reducir el tamano del dataLayer

3. Cuales parametros son obligatorios en el array items?

  • a) item_id y price
  • b) item_name y quantity
  • c) item_id e item_name
  • d) price y currency

4. Donde verificas en tiempo real si los eventos de GA4 estan llegando correctamente?

  • a) Reportes de Monetizacion
  • b) Google Search Console
  • c) DebugView en GA4
  • d) Reportes de Tiempo Real

Respuestas: 1-b, 2-b, 3-c, 4-c

¿Completaste esta lección?

Marca esta lección como completada. Tu progreso se guardará en tu navegador.

Anterior
Interpretar cohorts y tomar acciones
Siguiente
Eventos de e-commerce: view_item, add_to_cart, purchase