Tag Manager con Analytics GA4 Eventos - Bsale-IO/template-docs GitHub Wiki

Habilitado desde la versión 5.5 de Bsale

Para poder registrar eventos en google analytics 4 (GA4) desde Tag Manager debes:

  1. Tener una cuenta en google analytics

  2. Tener una cuenta en Tag Manager

  3. Poner el código de Tag Manager Configuración de la Tienda de Bsale

    //Ejemplo
GTM-TNVZZ22

  4. Configurar la etiqueta de Analytics GA4 en Tag Manager

  5. Configurar cada eventos dentro de Tag Manager

Configuración de Etiqueta Analytics 4

Crear una etiqueta tipo Google Analytics: Configuración de GA4

Configuración de la Etiqueta

Configuración de la Etiqueta Valor
Nombre de la etiqueta GA4
Tipo de etiqueta *Google Analytics: Configuración de GA4
ID de seguimiento tu código de Analytics GA4 Debe comenzar con G-

Campos que configurar (Opcional)

Nombre de campo Valor
debug_mode true

* configuración opcional para probar eventos en analytics GA4

Activación

  • All Pages (Página Vista)

Variables

Para leer la capa de datos (dataLayer) en GA4 es necesario generar una seria de variables que luego serán consumidas en los eventos

Nombre Tipo de variable Nombre de variable en capa de datos versión de la capa de datos
Ecommerce Trasaction ID Variable de capa de datos ecommerce.transaction_id Versión 2
Ecommerce Currency Variable de capa de datos ecommerce.currency Versión 2
Ecommerce Items Variable de capa de datos ecommerce.items versión 2
Ecommerce Shipping Variable de capa de datos ecommerce.shipping Versión 2
Ecommerce Value Variable de capa de datos ecommerce.value Versión 2

Configuración de Eventos

  1. Purchase (venta)
  2. Add to cart (Agregar al carro)
  3. Remove from cart (Eliminar del carro)

1. Purchase (Venta)

  • Se registra cada vez que un cliente finaliza un proceso de compra, cuando se carga una url /checkout/success/
  • No se diferencia entre ventas por pagar (transferencias) y ventas pagadas

Configuración Purchase

Crea una nueva etiqueta

Configuración de la Etiqueta Valor
Nombre de la etiqueta Venta
Tipo de etiqueta Google Analytics: evento de GA4
Etiqueta de configuración Selecciona tu etiqueta GA4
Nombre del evento purchase

Parámetros del evento

¡Importante!
  • Cuando los valores van entre llaves ({{valor}}) significa que son variables que debe ser creada en tag manager
  • Para agregar una variable necesitas hacer clic en el icono que parece una pieza de lego
Nombre del parámetro valor
transaction_id {{Ecommerce Transaction ID}}
items {{Ecommerce Items}}
value {{Ecommerce Value}}
currency {{Ecommerce Currency}}
shipping {{Ecommerce Shipping}}

Activación

Configuración valor
Tipo de activador Evento personalizado
Nombre del Evento purchase
Este activador de activa en Event es igual a purchase

Evento enviado

{
    event: 'purchase',
    ecommerce:{
        transaction_id: id, // ID de la transacción
        value: 30,          // costo total de la venta (incluye costo de despacho)
        shipping: 5,        // costo de despacho
        currency: "USD",    // Formato de moneda según la moneda configurada en la lista de precio
        items:[
            {
                item_id: 1234,                      // sku del producto 
                item_name: "Camisa Negra Talla L",  // nombre del producto
                quantity: 2,                        // cantidad de unidades del producto
                price: 7.5                          // costo unitario del producto
            },{
                item_id: 6658,                        // sku del producto 
                item_name: "Pantalon Azul Talla 42",  // nombre del producto
                quantity: 1,                          // cantidad de unidades del producto
                price: 10                             // costo unitario del producto
            }
        ]
    }
}

2. add_to_cart (Agregar al carro)

Se gatilla cada vez que un cliente agrega un producto al carro de compra

  • Al hacer click en un botón de "agregar al carro" con data-bs="card.add" o data-bs="card.add.collection"
  • Al hacer click dentro del carro en un botón de aumentar cantidad del producto con data-bs="cart.quantity.plus"
  • Cuando cambia la cantidad de un producto de forma positiva (+1) en un input con data-bs="cart.quantity"

Configuración add_to_cart

Crea una nueva etiqueta

Configuración de la Etiqueta Valor
Nombre de la etiqueta Agregar al carro
Tipo de etiqueta Google Analytics: evento de GA4
Nombre del evento add_to_cart

Parámetros del evento

¡Importante!
  • Cuando los valores van entre llaves ({{valor}}) significa que son variables que debe ser creada en tag manager
  • Para agregar una variable necesitas hacer clic en el icono que parece una pieza de lego
Nombre del parámetro valor
items {{Ecommerce Items}}

Activación

Configuración valor
Tipo de activador Evento personalizado
Nombre del Evento add_to_cart
Este activador de activa en Event es igual a add_to_cart

Evento enviado

{
    event: 'add_to_cart',
    ecommerce:{
        items: [{
            item_id: 1234,                     // sku del producto
            item_name: "Camisa Negra Talla M", // nombre del producto
            quantity: 1,                       // cantidad agregada
            price: 1000                        // precio del producto
        }]
      
    }
}

3. remove_from_cart (Eliminar del carro)

Se gatilla cada vez que un cliente borra un producto o disminuye la cantidad de este en el carro

  • Al hacer clic dentro del carro en un botón de "Eliminar" con data-bs="cart.remove"
  • Al hacer clic dentro del carro en un botón de aumentar cantidad del producto con data-bs="cart.quantity.minus"
  • Cuando cambia la cantidad de un producto de forma negativa (-1) en un input con data-bs="cart.quantity"

Configuración add_to_cart

Crea una nueva etiqueta

Configuración de la Etiqueta Valor
Nombre de la etiqueta Eliminar del carro
Tipo de etiqueta Google Analytics: evento de GA4
Nombre del evento remove_from_cart

Parámetros del evento

¡Importante!
  • Cuando los valores van entre llaves ({{valor}}) significa que son variables que debe ser creada en tag manager
  • Para agregar una variable necesitas hacer clic en el icono que parece una pieza de lego
Nombre del parámetro valor
items {{Ecommerce Items}}

Activación

Configuración valor
Tipo de activador Evento personalizado
Nombre del Evento remove_from_cart
Este activador de activa en Event es igual a remove_from_cart

Evento enviado

{
    event: 'remove_from_cart',
    ecommerce:{
        items: [{
            item_id: 1234,                     // sku del producto
            item_name: "Camisa Negra Talla M", // nombre del producto
            quantity: 1,                       // cantidad agregada
            price: 1000                        // precio del producto
        }]
      
    }
}