Guía completa para configurar el seguimiento de comercio electrónico con Google Tag Manager

¿Quieres ver el contenido de la página? Mostrar

Actualizado: 13 de mayo de 2020. Aunque Google Analytics proporciona una variedad de funciones de seguimiento listas para usar (como vistas de página, sesiones, fuentes de tráfico, etc.), la verdadera magia comienza cuando implementas características personalizadas, como eventos o el seguimiento de comercio electrónico. Solo entonces podrás ver qué realmente importa: las conversiones y los ingresos.

Al rastrear interacciones importantes, podrás combinar esos datos con las funcionalidades predeterminadas de Google Analytics y descubrir qué impulsa realmente las ventas, así como cuáles son las fuentes de tráfico más efectivas.

Sin embargo, antes de poder analizar toda esa información, es esencial que se establezca un seguimiento adecuado. En esta guía, te mostraré cómo implementar el seguimiento de comercio electrónico estándar de Google Analytics utilizando Google Tag Manager.

Requisitos previos

Al escribir esta guía sobre el seguimiento de comercio electrónico con Google Tag Manager (GTM), asumo que ya estás familiarizado con qué es GTM y cuál es su propósito. Si nunca has oído hablar de él o no lo has utilizado, considera revisar primero los siguientes recursos:

Además, debo suponer que ya conoces algunos conceptos básicos de Google Analytics y estás familiarizado con su interfaz.

¿Qué es el seguimiento de comercio electrónico en Google Analytics?

Con una configuración adicional, puedes comenzar a rastrear las ventas utilizando Google Analytics gracias a las características de seguimiento de comercio electrónico. Al implementarlas, podrás medir el número de transacciones, los ingresos que genera tu sitio web, entre otros.

Una vez que un usuario completa una compra y es redirigido a la página de confirmación de pedido, este momento puede ser capturado por Google Analytics. Al enviar datos de transacción a GA (como total del pedido o productos comprados), desbloquearás nuevas posibilidades de informes y comenzarás a ver cómo tus esfuerzos de marketing impactan en las ventas en línea.

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

Informes de comercio electrónico estándar: Estos te permiten analizar la actividad de compra en tu sitio web o aplicación. Puedes ver información sobre productos y transacciones, el valor promedio de pedidos, la tasa de conversión de comercio electrónico, el tiempo hasta la compra y otros datos relevantes.
Comercio electrónico mejorado: Esta opción agrega funcionalidades a tus informes de Google Analytics. Muestra cuándo los clientes agregaron artículos a sus carritos, cuándo comenzaron el proceso de pago y cuándo completaron una compra. También te permite identificar segmentos de clientes que abandonan el embudo de compra.

¿Cuál opción de informes de comercio electrónico es la adecuada para ti?

Si deseas ver solo los datos de ventas y cómo se desempeña cada producto, así como qué fuentes de tráfico generan ventas, entonces la funcionalidad de comercio electrónico estándar es la adecuada para ti.

Si quieres observar no solo las compras, sino también el recorrido del visitante (datos relacionados con la actividad de Agregar al carrito, Pasos de pago, etc.), entonces el comercio electrónico mejorado debería ser tu opción preferida.

No obstante, ten en cuenta que implementar la funcionalidad de comercio electrónico mejorado es significativamente más complejo y requiere más tiempo de desarrollo. Por lo tanto, debes sopesar tus opciones: con comercio electrónico mejorado obtendrás más información, pero el costo de implementación será mayor.

Esta guía se centrará exclusivamente en la implementación de informes de comercio electrónico estándar. Un proceso detallado y práctico se describe en mi curso intermedio de Google Tag Manager (+ temas avanzados).

Plan de seguimiento de comercio electrónico con Google Tag Manager

Aunque Google Tag Manager generalmente se promociona como la herramienta que permite a los especialistas en marketing y analistas web controlar el seguimiento sin la intervención de un desarrollador, en esta ocasión probablemente necesitarás su ayuda. Comparado con el seguimiento de comercio electrónico mejorado, el seguimiento de comercio electrónico estándar requiere una cantidad relativamente pequeña de tiempo por parte del desarrollador para implementar el seguimiento de ventas con éxito.

A continuación, el plan que deberás seguir en esta guía:

Primero, habilita los informes de comercio electrónico en Google Analytics.
Luego, solicita a un desarrollador que empuje los datos de transacción al Data Layer (o utiliza un plugin para ese propósito, si es posible).
Envía los datos de transacción de comercio electrónico a Google Analytics (a través de Google Tag Manager).
Prueba si todo funciona correctamente.

¿Listo para implementar el seguimiento de comercio electrónico con Google Tag Manager? ¡Empecemos!

#1. Habilitar informes de comercio electrónico en Google Analytics

Inicia sesión en tu cuenta de Google Analytics y dirígete a la sección de administración. Puedes acceder haciendo clic en el ícono de engranaje en la esquina inferior izquierda:

Luego, selecciona Configuración de comercio electrónico en el nivel de vista y activa el botón para habilitar las funciones de comercio electrónico. Deja desactivadas las funciones de comercio electrónico mejorado (pues están fuera del alcance de esta guía).

¡Listo! Esto es sencillo. Los próximos pasos del seguimiento de comercio electrónico con Google Tag Manager no serán tan simples 🙂

#2. Datos de transacción en el Data Layer

Si aún no estás familiarizado, el Data Layer es uno de los componentes clave de Google Tag Manager, que puede contener información útil que luego se utiliza en las etiquetas, activadores y variables de GTM. Si no estás familiarizado con él o deseas aprender más, lee esta guía.

Para que el seguimiento de comercio electrónico en Google Analytics funcione correctamente con Google Tag Manager, primero necesitamos que los datos de transacción se envíen al Data Layer. Luego, le indicaremos a GTM que lea esos datos y los transfiera a Google Analytics. Este proceso siempre sigue estos pasos:

Un desarrollador (o un plugin) agrega los datos de transacción al Data Layer (después de que se completa con éxito una compra).
GTM se configura para reconocer la compra exitosa.
GTM (con la ayuda de la etiqueta de Universal Analytics) transfiere esos datos desde el Data Layer a Google Analytics.

A continuación, se muestra el código que debe añadirse al Data Layer (también me referiré a este código como el código GA Ecommerce dataLayer.push):

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
 'transactionId': '1234',
 'transactionAffiliation': 'Acme Clothing',
 'transactionTotal': 38.26, 
 'transactionTax': 1.29,
 'transactionShipping': 5,
 'transactionProducts': [{
   'sku': 'DD44',
   'name': 'T-Shirt',
   'category': 'Apparel',
   'price': 11.99,  
   'quantity': 1 
 },{
   'sku': 'AA1243544',
   'name': 'Socks',
   'category': 'Apparel',
   'price': 9.99,
   'quantity': 2
 }]
});
</script>

No todos los parámetros son obligatorios. De hecho, la mayoría de ellos son opcionales. Pero cuanto más datos envíes, más información verás en los informes de comercio electrónico.

En cuanto a los parámetros de transacción, solo transactionId y transactionTotal son obligatorios. Si pasas transactionProducts con cada venta, el fragmento de código dataLayer.push debe incluir también name, sku, price y quantity.

Si deseas ver la lista completa de parámetros admitidos, dirígete a la documentación oficial de Google y expande la sección de Comercio Electrónico Estándar.

#2.1. Varias cosas a tener en cuenta

Antes de copiar el código mencionado y enviárselo al desarrollador, hay varias cosas adicionales que debes saber:

Copiar y pegar el código anterior en una «página de agradecimiento» no funcionará. El desarrollador debe reemplazar los valores de cada parámetro con datos significativos. Si el total del pedido es $30, entonces el valor de transactionTotal en ese código debe ser 30.00. En otras palabras, los valores de todos los parámetros deben ser reemplazados dinámicamente por las funciones escritas por el desarrollador.
Los nombres de esos parámetros y la estructura completa del código deben ser idénticos a los que se muestran en el código anterior y en la documentación de Google. Puedes omitir parámetros opcionales, pero no puedes renombrar transactionTotal como orderTotal. Los parámetros personalizados no son compatibles en el código, por lo que el desarrollador debe seguir la convención de nombres exacta utilizada en ese código de transacción de comercio electrónico en JS.
Si estás utilizando una plataforma de comercio electrónico popular, como WooCommerce, es muy probable que exista un plugin listo que pueda enviar los datos de transacción de comercio electrónico a Data Layer (en el formato adecuado) después de una compra exitosa. En el caso de WooCommerce, dicho plugin se llama GTM4WP. Puedes habilitar el seguimiento de comercio electrónico estándar yendo a la configuración del plugin > Integración > WooCommerce y haciendo clic en Habilitar seguimiento de comercio electrónico clásico.

#2.2. ¿Dónde colocar el código GA Ecommerce dataLayer.push?

Para saber dónde debe añadirse el código dataLayer.push, primero necesitas reflexionar sobre lo que sucede después de una compra exitosa:

¿El cliente es redirigido a una «página de agradecimiento»?
¿O la página permanece igual y solo se muestra un mensaje de «Éxito» (pero la URL de esa página permanece igual)?

Si el cliente es redirigido a una «página de agradecimiento», entonces el código GA Ecommerce dataLayer.push debe colocarse por encima del código del contenedor GTM. Es muy importante colocar el código por encima. ¿Por qué? Porque así los datos de transacción de comercio electrónico estarán disponibles para Google Tag Manager al comenzar a cargar.

Cuanto antes se empuje esa información al Data Layer, antes podrás enviar esos datos a Google Analytics.

¿Has notado que cada vez que se carga una página y se habilita el modo de vista previa y depuración de GTM, se muestran tres eventos: Vista de página, DOM listo y Ventana cargada? Si un desarrollador coloca el código GA Ecommerce dataLayer.push por encima del contenedor GTM, podrás enviar los datos de transacción a GA con el evento de Vista de página. Este evento es el momento más temprano en el que puedes activar etiquetas.

Si, por alguna razón, un desarrollador coloca el código dataLayer.push de comercio electrónico por debajo del contenedor GTM, entonces el momento más temprano en que puedes enviar esos datos de comercio electrónico a GA será con el activador de DOM listo.

Si la página no se recarga cuando se completa la compra, el desarrollador puede colocar el código donde desee, pero en ese caso se requiere una modificación adicional. El desarrollador debe agregar un parámetro adicional llamado event (su valor puede ser cualquier cosa que desees, como “purchase”, “sale”, “ecommerce” o cualquier otro término que tenga sentido para ti).

A continuación, se muestra cómo sería el código dataLayer.push una vez que se ha añadido esa línea adicional (ver la línea 4):

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
 'event': 'purchase',
 'transactionId': '1234',
 'transactionAffiliation': 'Acme Clothing',
 'transactionTotal': 38.26,
 'transactionTax': 1.29,
 'transactionShipping': 5,
 'transactionProducts': [{
   'sku': 'DD44',
   'name': 'T-Shirt',
   'category': 'Apparel',
   'price': 11.99,
   'quantity': 1
 },{
   'sku': 'AA1243544',
   'name': 'Socks',
   'category': 'Apparel',
   'price': 9.99,
   'quantity': 2
 }]
});
</script>

En este caso, necesitarás crear un activador personalizado en GTM para capturar esta interacción. Más adelante explicaré eso.

Veamos en acción lo que ocurre cuando un desarrollador implementa el código GA Ecommerce dataLayer.push en un sitio web (o instala un plugin para ese propósito).

#2.3. Prueba del código GA Ecommerce dataLayer.push con Google Tag Manager

Una vez que el desarrollador te informe que el código dataLayer.push de transacción está implementado, es hora de probarlo. Lo que debes hacer es:

Activar el modo de vista previa y depuración.
Ir al sitio web/tienda en línea donde deseas rastrear transacciones y completar una compra.
Finaliza la compra.

Escenario #1. El código dataLayer.push de comercio electrónico se agrega por encima del contenedor GTM (en una “página de agradecimiento”). Dado que este dataLayer.push no tiene un parámetro event, se mostrará como un “Mensaje” (ver captura de pantalla a continuación). Tal empuje (“Mensaje”) no puede ser utilizado como un activador en GTM (condición de activación que luego activa etiquetas), por lo que el momento más temprano en que podemos enviar los datos de transacción a Google Analytics es en el evento de Vista de página.

Pero dado que nuestro dataLayer.push de comercio electrónico ya se ha iniciado antes de que se cargue todo GTM, sus datos ya están en el Data Layer, por lo tanto, podemos continuar utilizando esos datos de transacción en todos los eventos subsiguientes, incluida Vista de página.

Escenario #2. El código dataLayer.push de comercio electrónico se agrega por debajo del contenedor GTM (en una “página de agradecimiento”). Este dataLayer.push también se mostrará como un “Mensaje”. Sin embargo, esta vez el dataLayer.push se completó un poco más tarde (porque está colocado debajo del contenedor GTM), por lo tanto, con el evento de Vista de página no podemos acceder a los datos almacenados en el “Mensaje”.

Solo todos los eventos subsiguientes (DOM listo, Ventana cargada) pueden acceder a los datos de transacción. Por eso, en este caso, usaremos el evento DOM listo como activador.

Escenario #3. El código dataLayer.push de comercio electrónico se activa en una página que no se recarga (es decir, se ha añadido el parámetro “event”). En este caso, un desarrollador añadió un parámetro adicional “event” cuyo valor es “purchase”.

Para utilizar este momento como condición para activar una etiqueta, necesitarás crear un activador de eventos personalizados.

En el contenedor de GTM, ve a Activadores > Nuevo > Evento personalizado.

Asegúrate de que en el campo “Nombre del evento” escribas purchase exactamente (este campo es sensible a mayúsculas). Lo que acabamos de hacer es instruir a Google Tag Manager para que capture todos los eventos de “purchase” en el Data Layer y los convierta en un activador.

En otras palabras, cuando se realiza una compra → se empuja el evento purchase al Data Layer → GTM captura ese evento y lo utiliza como un activador de evento personalizado → el activador dispara una etiqueta que envía los datos a Google Analytics.

El siguiente paso es asignar un activador (que acabas de crear) a la etiqueta de transacción de Universal Analytics. Solo para asegurarte, después de leer esta guía, deberás crear solo un activador de activación, no tres. Solo expliqué las tres opciones posibles según varias situaciones específicas.

#3. Configurar Google Tag Manager para enviar los datos de comercio electrónico a Google Analytics

En este capítulo, deberás completar los siguientes pasos:

Crear una etiqueta de transacción en Google Analytics que enviará los datos de compra a los servidores de Google.
Crear un activador que activará esa etiqueta de transacción (el p.s. la configuración del activador depende de cómo se implementó el dataLayer.push).

Comencemos con la parte más sencilla: la etiqueta. En tu contenedor de Google Tag Manager, ve a Etiquetas > Nuevo y elige la plantilla de etiqueta de Universal Analytics. En Configuración de etiqueta, introduce los siguientes ajustes:

Si no sabes qué elegir en el campo de configuración de Google Analytics, consulta la guía sobre la Variable de configuración de Google Analytics. Guarda la etiqueta sin el activador (por ahora). Volveremos aquí más tarde.

Ahora, los activadores. Recordemos los tres escenarios del capítulo anterior.

Escenario #1. El código dataLayer.push de comercio electrónico se agrega por encima del contenedor GTM (en una “página de agradecimiento”).
Escenario #2. El código dataLayer.push de comercio electrónico se agrega por debajo del contenedor GTM (en una “página de agradecimiento”).
Escenario #3. El código dataLayer.push de comercio electrónico se activa en una página que no se recarga (después de una compra exitosa).

Dependiendo de las características de tu proyecto/sitio web, deberás elegir uno de estos escenarios y crear un activador correspondiente.

Escenario #1. El código dataLayer.push de comercio electrónico se agrega por encima del contenedor GTM

En este caso, sabemos que los datos de transacción se empujan al Data Layer antes de que ocurra el evento de Vista de página, por lo que podemos elegir el tipo de activador Vista de página.

Por eso, deberías ir a Activadores (en tu contenedor GTM) y hacer clic en Nuevo, luego elegir el activador de tipo Vista de página.

Pero no queremos que este activador se dispare en todas las páginas, solo en algunas. Observemos la URL de la página de confirmación del pedido (dirección web). ¿Es única de alguna manera en comparación con otras páginas?

Al decir “única”, me refiero a si es posible distinguir (a partir de la URL de la página) que la compra se ha completado con éxito. Un buen ejemplo sería www.ejemplo.com/pedido/compra-exitosa.

Si es así, utilizaremos una fracción de esa URL de página en nuestro activador. Esta técnica se llama “seguimiento de página de agradecimiento”. Imaginemos que la dirección de nuestra “página de agradecimiento” es: www.ejemplo.com/pedido/compra-exitosa/23749372. El último dígito es el ID de pedido. /pedido/compra-exitosa/ es un buen indicador de que el pedido se completó con éxito.

Introduzcámoslo en nuestro activador. Elegí la variable de URL de página pero Ruta de página también funcionaría bien.

Escenario #2. El código dataLayer.push de comercio electrónico se agrega por debajo del contenedor GTM

Si un desarrollador no pudo agregar el dataLayer.push por encima del contenedor GTM, entonces deberías crear un activador de DOM listo. Su condición será la misma que en el activador anterior, excepto que el tipo de activador debe ser DOM listo.

Escenario #3. El código dataLayer.push de comercio electrónico se activa en una página que no se recarga (el dataLayer.push contiene un parámetro “event”)

De hecho, el parámetro “event” también puede utilizarse en los escenarios #1 y #2. Pero quiero enfatizar que es imprescindible si la página no se recarga después de que se completa la compra (por lo tanto, los eventos Vista de página y DOM listo no son muy útiles).

Recordemos rápidamente lo que sucede en el modo de vista previa y depuración en este escenario:

Como el valor del parámetro “event” es “purchase”, su nombre se mostrará en el lado izquierdo del modo P&D de GTM y gracias a esto podemos utilizar este dataLayer.push como un activador. Lo que necesitaremos hacer es crear un activador de evento personalizado.

En el contenedor de GTM, ve a Activadores > Nuevo > Evento personalizado.

Asegúrate de que en el campo “Nombre del evento” ingreses purchase exactamente (este campo es sensible a mayúsculas). Lo que acabamos de hacer es instruir a Google Tag Manager para que capture todos los eventos de “purchase” en el Data Layer y los convierta en un activador.

#4. Probemos nuestro seguimiento de comercio electrónico con Google Tag Manager

Estamos casi allí. Ahora es el momento de las pruebas. Guarda todos los cambios en el contenedor (en la etiqueta de Universal Analytics y en el activador), actualiza el modo de vista previa y depuración, y completa una compra. En mi caso, un cliente es redirigido a una “página de agradecimiento” y el dataLayer.push se agrega por encima del contenedor GTM.

Aquí está lo que veo:

La etiqueta de transacción de GA se disparó como se esperaba y envió los datos a Google Analytics. Pero, ¿cómo podemos asegurarnos de que los datos se enviaron correctamente a GA? Utilicemos la extensión Tag Assistant y la GA Debugger. Si aún no lo has hecho, instálalo en tu navegador. P.D. Recomiendo usar el navegador Chrome al trabajar con Google Tag Manager porque hay un montón de otras extensiones útiles de GTM.

Una vez que hayas instalado Tag Assistant, aparecerá un ícono azul en la esquina superior derecha. Haz clic en él mientras estás en el sitio web donde estás trabajando y luego activa la opción.

Actualiza la página. Ahora, Tag Assistant comienza a monitorear lo que sucede en la página. Completa la compra nuevamente y observa más de cerca el ícono de TA; debe aparecer un número allí. Haz clic en el ícono nuevamente para ver la lista de productos de Google instalados en tu sitio web (GTM, GA, Optimize, etc.).

Haz clic en Google Analytics para obtener más información. En la captura de pantalla a continuación, hay una solicitud de vista de página (porque tengo una etiqueta de vista de página activada) y algunas Otras solicitudes.

Hagamos clic en Otras solicitudes. ¡Bingo! Aquí está nuestra transacción enviada a Google Analytics. Un círculo verde indica que todo se envió correctamente. Colores amarillos o rojos significarían que algo no está bien.

Si deseas aprender más sobre Tag Assistant y cómo usarlo correctamente, lee esta guía.

Realicemos una prueba adicional. Esta vez con otra extensión llamada GA Debugger. Instálala y haz clic en su ícono para que aparezca la insignia “ON”.

Luego, activa la consola de desarrollador de tu navegador (aquí hay un tutorial rápido sobre cómo hacerlo), actualiza la página y completa la compra una vez más. Comenzarás a ver información de apariencia inusual en la consola. GA Debugger está revisando el sitio web e imprimiendo toda la información relacionada con GA en la consola (para que puedas verificar si todo funciona correctamente).

Primero, sigue buscando hitType: transaction. Esta es la compra que se envió a Google Analytics. ec:id, ec: revenue y ec:tax son puntos de datos que se transfirieron junto con la solicitud.

Desplázate hacia abajo y sigue buscando otro bloque de datos que contenga información del producto (si el desarrollador ha empujado los datos del producto al Data Layer).

Sigue navegando por la consola y verifica si se muestran errores. Si es así, corrígelos, consulta con un desarrollador o utiliza otros medios para encontrar la solución.

Si no se encuentran problemas, ¡felicitaciones! Has implementado el seguimiento de comercio electrónico de Google Analytics utilizando Google Tag Manager.

Evitar transacciones duplicadas

¿Te has dado cuenta de lo que sucede si un cliente aterriza en una “página de agradecimiento” y la actualiza después de un tiempo? Lo más probable es que la etiqueta de transacción de GA se dispare nuevamente. ¿Qué significa esto? Pedidos duplicados e inflar las cifras en tus informes de comercio electrónico.

¿Cómo se puede prevenir esto? Principalmente hay dos opciones:

Puedes pedir a un desarrollador que ejecute el código dataLayer.push solo una vez. Si la página se recarga, no debería hacerse de nuevo. Esta solución es la más robusta.
Si la opción anterior no es posible, Simo Ahava ha publicado una solución que almacena los IDs de pedidos en una cookie. Cuando se vuelve a cargar la “página de agradecimiento”, GTM verificará la cookie. Si la cookie ya contiene el ID de pedido de la página de “página de agradecimiento” actual, se bloquea la etiqueta de transacción.

Para esta solución, necesitarás completar 6 pasos:

Crear una variable de Data Layer que lea el ID de transacción (ya tenemos esos datos en el Data Layer, solo necesitamos acceder a ellos).
Crear una variable de cookie de primera parte que almacene la lista de todos los IDs de transacciones que un visitante/cliente ha completado.
Crear una variable de JavaScript personalizada que verificará si el ID de transacción del pedido actual ya está almacenado en una cookie o no.
Crear una variable de JavaScript personalizada que almacene el ID de transacción en una cookie.
Actualizar tu etiqueta de transacción de Universal Analytics y añadir la variable #4 en el campo de hitCallback.
Actualizar tu activador que dispara la etiqueta de transacción de Universal Analytics. A partir de ahora, deberá activarse solo si la tercera variable (de esta lista) no es igual a true. Esto significa que si el ID de transacción del pedido actual ya está almacenado en una cookie, tu etiqueta de transacción no se disparará nuevamente, evitando así la transacción duplicada.

#1. Crear una variable de Data Layer “ID de Transacción”

En tu contenedor de GTM, ve a Variables > Nuevo > Variable de Data Layer e introduce transactionId.

#2. Crear una variable de cookie de primera parte “ID de Transacción”

En tu contenedor de GTM, ve a Variables > Nuevo > Cookie de primera parte y configura los siguientes ajustes:

#3. Crear una variable de JavaScript personalizada que verifica si el ID de transacción ya está almacenado en una cookie

Ve a Variables > Nuevo > JavaScript personalizado y pega el siguiente código:

function() {
return /(,|^){{dlv - Transaction ID}}/.test({{Cookie - User Transactions}});
}

El código es un poco diferente en comparación con el código de Simo debido a que utilicé nombres de variables diferentes.

#4. Crear una variable de JavaScript personalizada que almacena el ID de transacción en una cookie

Crea otra variable de JavaScript personalizada con el siguiente código:

function() {
  return function() {
   var d, expires;
   var cvalue = '';
   // Ejecutar este código solo si se encuentra una transacción en el Data Layer
   if ({{dlv - Transaction ID}}) {
     d = new Date();
     d.setTime(d.getTime() + (2*365*24*60*60*1000));
      expires = 'expires='+d.toUTCString();
      // Si la cookie ya existe, agregar en lugar de sobrescribir
      if ({{Cookie - User Transactions}}) {
        cvalue = {{Cookie - User Transactions}} + ',';
      } 
      document.cookie = 'user_transaction_ids=' + 
        cvalue + {{dlv - Transaction ID}} + '; ' + expires + '; path=/';
    }
  };
}

Nombra esta variable CJS – establecer ID de transacción en una cookie.

#5. Actualizar la etiqueta de transacción de Universal Analytics con hitCallback

En tu etiqueta de transacción de GA, marca la casilla Habilitar la sobreescritura de la configuración en esta etiqueta, luego haz clic en Más configuraciones > Campos a establecer e introduce hitCallback (sensible a mayúsculas) y en su campo de Valor inserta la variable de JavaScript personalizada que almacena el ID de transacción en una cookie.

El hitCallback es una función que se activa cuando una etiqueta de Universal Analytics se ha disparado correctamente y se han enviado los datos a Google Analytics. Cuando todo esto sucede con éxito, la función hitCallback puede invocar una variable que está insertada en su campo Valor. En nuestro caso, esa variable es JavaScript personalizado que almacena el ID de transacción en una cookie.

En resumen:

La etiqueta de transacción de GA se activa correctamente y envía los datos de compra a Google Analytics.
hitCallback se activa e invoca nuestra variable de JavaScript personalizada.
Esa variable almacena el valor en una cookie que se utilizará como condición adicional en nuestro activador de compra. Continúa leyendo y lo explicaré.

#6. Actualizar el activador de transacción

Abre el activador que estás utilizando para la etiqueta de transacción de GA y añade la siguiente condición: CJS – El ID de transacción está en una cookie no es igual a true. Esto significa que si el ID de transacción (o la compra actual) ya se encuentra en una cookie, el activador de transacción no se activará, evitando así la transacción duplicada.

¡Eso es todo! Ahora llega el momento de las pruebas. Completa un pedido ==> la etiqueta de transacción debería dispararse normalmente. Luego, actualiza la página de agradecimiento y verifica si la etiqueta de transacción se activó nuevamente. En este caso, no debería hacerlo.

El mismo resultado se puede lograr también con customTask. Simo Ahava ha publicado otra guía que también puedes consultar.

Verificación de informes de comercio electrónico en GA

Después de un tiempo, tus datos de ventas aparecerán en los informes de comercio electrónico de Google Analytics. En tu cuenta de GA, ve a Conversiones > Comercio electrónico > Resumen. No te alarmes si aún están vacíos. Puede tardar un tiempo en procesar y aparecer en esos informes. Ten paciencia. Normalmente, esa información aparece en unas pocas horas (generalmente, incluso más rápido). Sin embargo, si tarda más, por favor, ten paciencia hasta 24 horas.

¿Faltan transacciones en los informes de comercio electrónico?

Una vez que hayas implementado correctamente el seguimiento de comercio electrónico de Google Analytics a través de Google Tag Manager, necesitarás seguir monitoreando tus informes y compararlos con las ventas reales que estás generando.

Probablemente notarás que faltan algunas transacciones. Si te enfrentas a tal situación, lee este artículo. Se puede aplicar a cualquier plataforma de análisis que estés utilizando para rastrear ventas.

Avance: probablemente nunca alcanzarás el 100% de precisión, pero definitivamente deberías intentar mejorar lo más posible.

Seguimiento de comercio electrónico con Google Tag Manager: palabras finales

Ahí lo tienes: la guía sobre el seguimiento de comercio electrónico con Google Tag Manager. Aquí hay algunos puntos clave que debes recordar:

Un desarrollador o un plugin de terceros debe empujar los datos de transacción al Data Layer (con la ayuda de dataLayer.push).
El dataLayer.push debe tener la estructura exacta que se muestra en la documentación oficial de Google.
Siéntete libre de omitir parámetros opcionales (como transactionAffiliation o transactionTax), pero bajo ninguna circunstancia renombres los nombres de los parámetros o su estructura/tipo. Si el tipo de transactionID es cadena (a.k.a. “texto”), debe permanecer así. No intentes usar tus propios nombres para los parámetros; no funcionará.
Se recomienda que el código dataLayer.push esté por encima del contenedor GTM. Si eso no es posible, colócalo por debajo y utiliza el activador de DOM listo para activar la etiqueta de transacción. También puedes pedirle a un desarrollador que añada el parámetro “event” al dataLayer.push y luego usarlo como condición de activación (en el activador de eventos personalizados).
La información de transacción de comercio electrónico puede ser enviada a GA con la ayuda de la etiqueta de Universal Analytics (Tipo de seguimiento: Transacción).
Para evitar transacciones duplicadas, almacena sus IDs en una cookie de primera parte y utiliza esa cookie para bloquear transacciones repetidas.

¿Faltó algo relacionado con el seguimiento de comercio electrónico de Google Analytics con Google Tag Manager? ¡Déjamelo saber en los comentarios!