[Guía] Implementar Comercio electrónico en Google Tag Manager para sitios web

Índice

Este contenido se actualizará en la sección Tutoriales

Los eventos de Comercio Electrónico o e-commerce para Google Analytics, siempre ha dado problemas y confusión a la hora de configurarlo correctamente,

especialmente si queremos realizarlo integramente en proyectos personalizados, sitios web ad-hoc donde no utilizan especificamente plugin o módulos free, ejemplo un híbrido de Magento, Prestashop o similar.

La cuestión es ir explicar paso a paso como grabar los eventos más utilizados de un comercio electrónico, y no solo transacciones. Además, las mismas podemos “reciclar” los mismos eventos para otras etiquetas de terceros: AdWords, Remarketing, Facebook, Doubleclick principalmente, además de otras más especificas como TradeDoubler etc.

Esta guía proporcionará solo y exclusivamente los pasos a implementar en Google Tag Manager en sitios web, sin utilizar mucho código dentro de nuestro site, excepto el enviar informaciones con el dataLayer

Conceptos generales del comercio electrónico en Tag Manager

Comercio electrónico clásico de Google Analytics

Existen dos métodos principales para implementar el comercio electrónico de Google Analytics:

En los informes de comercio electrónico estándar de Google Analytics puede analizar la actividad de compra que se ha registrado en su aplicación o sitio web. Entre otros datos, puede ver información sobre productos y transacciones, el valor de pedido medio, la tasa de conversión de comercio electrónico y el tiempo hasta la compra.

Comercio electrónico mejorado de Google Analytics

El comercio electrónico mejorado amplía las funciones de sus informes de Google Analytics. Con este método puede ver cuándo añadieron los clientes productos al carrito, cuándo iniciaron el proceso de tramitación de compra correspondiente y cuándo completaron la transacción. El comercio electrónico mejorado también se puede usar para identificar segmentos de clientes que se quedan fuera del embudo de compras.

Ambos métodos pueden implementarse con Tag Manager:

Comercio electrónico estándar

Para crear una etiqueta de comercio electrónico estándar de Google Analytics:

Habilite el comercio electrónico en sus informes de Google Analytics. Cree una etiqueta de Universal Analytics y seleccione Transacción en Tipo de seguimiento. Configure la etiqueta con los campos obligatorios. Especifique cuándo debe activarse la etiqueta. Toda la información de la transacción debe transferirse a través de la capa de datos, con los nombres de variable que se muestran a continuación:

Datos de la transacción

Nombre de la variable Descripción Tipo
transactionId (obligatorio) Identificador de transacción único cadena
transactionAffiliation (opcional) Partner o tienda cadena
transactionTotal (obligatorio) Valor total de la transacción numérico
transactionShipping (opcional) Gastos de envío correspondientes a la transacción numérico
transactionTax (opcional) Impuestos correspondientes a la transacción numérico
transactionProducts (opcional) Lista de artículos comprados en la transacción matriz de productos


Datos del producto

Nombre de la variable Descripción Tipo
name (obligatorio) Nombre del producto cadena
sku (obligatorio) Código SKU de producto cadena
category (opcional) Categoría del producto cadena
price (obligatorio) Precio unitario numérico
quantity (obligatorio) Número de elementos numérico


A continuación, se muestra un ejemplo de cómo implementar el código de la capa de datos en JavaScript:

<script>
window.dataLayer = window.dataLayer || []
dataLayer.push({
   'transactionId': '1234',
   'transactionAffiliation': 'Moda Filomena',
   'transactionTotal': 38.26,
   'transactionTax': 1.29,
   'transactionShipping': 5,
   'transactionProducts': [{
       'sku': 'DD44',
       'name': 'Camiseta',
       'category': 'Indumentaria',
       'price': 11.99,
       'quantity': 1
   },{
       'sku': 'AA1243544',
       'name': 'Calcetines',
       'category': 'Indumentaria',
       'price': 9.99,
       'quantity': 2
   }]
});
</script>

Incluya este código encima del fragmento de contenedor de Tag Manager, de modo que la capa de datos esté lista cuando Tag Manager active la etiqueta de Google Analytics.

Si, por algún motivo, no puede incluir los datos de comercio electrónico encima del fragmento de contenedor de Tag Manager, también puede probar una de las siguientes soluciones:

Haga que la etiqueta se active según un evento personalizado más abajo en la página (p. ej., combine el envío de eventos y datos, tal como se describe en la [documentación para desarrolladores.])(https://developers.google.com/tag-manager/devguide#events) Seleccione el tipo de activador “DOM preparado”. Más información sobre el comercio electrónico de Google Analytics

Comercio electrónico mejorado

Existen dos métodos para implementar el comercio electrónico mejorado con Tag Manager:

  • Capa de datos: es el método recomendado. Envíe los datos de comercio electrónico a la capa de datos desde el código.
  • JavaScript personalizado: cree una variable de JavaScript personalizada en Tag Manager. Esta variable debería devolver un objeto con la información que, en el método anterior, se enviaría a la capa de datos.

Importante: Al implementar el comercio electrónico mejorado, puede utilizar varios tipos de información específicos. Consulte la documentación para desarrolladores si quiere obtener una lista completa de los tipos de datos admitidos.

Implementación de capa de datos

  1. En el código, añada la información de comercio electrónico a un objeto de capa de datos denominado “ecommerce”. Consulte la documentación para desarrolladores de Tag Manager si quiere obtener información sobre cómo implementar una capa de datos.
  2. En Tag Manager, cree una etiqueta de Universal Analytics y seleccione Página vista o Evento en Tipo de seguimiento.
  3. En Más opciones a continuación Publicidad, seleccione True en Habilitar funciones de comercio electrónico mejorado.
  4. Seleccione Usar capa de datos.

Usar variables

  1. Cree una variable de JavaScript personalizada. Esta variable debe devolver un objeto que contenga el objeto de comercio electrónico, de un modo similar al ejemplo de código siguiente:

    function() {
    var ecommerceData = {
    'ecommerce' : {
     currencyCode : 'EUR',
     // añada parámetros adicionales según sea necesario…
    }
    };
    return ecommerceData;
    }
    

    <En esta variable, use la misma sintaxis que usaría para enviar estos datos a la capa de datos. Consulte la documentación para desarrolladores si quiere obtener más información.

  2. Cree una etiqueta de Universal Analytics y seleccione Página vista o Evento en Tipo de seguimiento.

  3. En Más opciones a continuación Publicidad, seleccione True en Habilitar funciones de comercio electrónico mejorado.

  4. Seleccione Usar capa de datos.

comments powered by Disqus