SEM (Search Engine Marketing)SEO (Search Engine Optimization)

Actualizar Datalayer de Universal Analytics a GA4

Es posible que tengas configurado la mejora del comercio electrónico en Universal Analytics a través de Google Tag Manager.

En caso de que así sea, la página web estará configurada con un datalayer que envía a Analytics toda la información necesaria para cada evento de nuestro comercio electrónico.

En GA4, la información enviada para cada evento ha cambiado en comparación con Universal Analytics. Los módulos y complementos se están actualizando para incluir estos nuevos eventos dentro del datalayer de la página web, pero podemos reutilizar el datalayer existente para GA4.

Esto será útil si no deseamos actualizar un módulo, si el módulo no se actualiza o si tenemos un comercio electrónico personalizado donde se ha realizado toda la programación necesaria. En esta última situación podremos ahorrar los costos de un nuevo desarrollo en nuestra página web.

Tabla de contenidos

Eventos de comercio electrónico en GA4

En Google Analytics 4 hay varios eventos que podemos configurar para que el sistema reconozca que recibirá datos del comercio electrónico:

  • add_payment_info: Cuando un usuario proporciona sus datos de pago.
  • add_shipping_info: Cuando un usuario proporciona su información de envío.
  • add_to_cart: Cuando un usuario agrega elementos a su carrito.
  • add_to_wishlist: Cuando un usuario agrega artículos a una lista de deseos.
  • begin_checkout: Cuando un usuario inicia el proceso de compra.
  • generate_lead: Cuando un usuario completa un formulario o una solicitud de información.
  • purchase: Cuando un usuario finaliza una compra.
  • refund: Cuando se realiza un reembolso.
  • remove_from_cart: Cuando un usuario elimina artículos de su carrito.
  • select_item: Cuando un usuario selecciona un artículo.de una serie.
  • elegir_promo: Cuando un usuario selecciona una promoción.
  • ver_carrito: Cuando un usuario visualiza su cesta.
  • ver_articulo: Cuando un usuario observa un objeto.
  • ver_lista_articulos: Cuando un usuario visualiza un catálogo de productos u ofertas.
  • ver_promo: Cuando se muestra una promoción a un usuario.

Estos sucesos guardan gran similitud con los datos que se envían al sistema de análisis de datos de comercio electrónico de Universal Analytics, la distinción principal radica en los datos que se requiere enviarle. 

A simple vista, la estructura de los datos es bastante parecida pero existen variaciones en los nombres de las variables que generan la incompatibilidad con el datalayer preexistente.

Una ventaja de GA4 es que se basa completamente en eventos, y cada evento manda los parámetros de manera individual, a diferencia de Universal Analytics, donde algunos eventos de comercio electrónico se transmiten a través del evento ‘pageview’.

Conociendo este hecho, nuestro deber es generar todas las variables necesarias utilizando nuestro datalayer para asignárselas a cada suceso que deseemos transmitir.

No es imprescindible transmitir todos estos sucesos para acceder a los informes de comercio electrónico en GA4, pero sí es aconsejable transmitir la mayor cantidad posible, especialmente los sucesos ‘ver_articulo’, ‘agregar_al_carrito’, ‘comenzar_compra’ y ‘comprar’ para disponer de un embudo de ventas.

Si deseamos informarnos sobre cómo debe estructurarse el datalayer para los sucesos de comercio electrónico en GA4, podemos consultar la documentación de Google donde se detallan los datos necesarios por cada suceso.

Generación de variables y etiquetas

La elaboración de estas variables dependerá de la configuración del datalayer en el sitio web, en este caso nos basaremos en el datalayer estándar solicitado por Google para Universal Analytics.

Una vez que conocemos los sucesos que debemos transmitir, será necesario crear todas las variables correspondientes. En esta ocasión, tendremos que generar dos tipos de variables:

Variables directas del datalayer

Casi todas las variables que debemos enviar a GA4 pueden extraerse directamente del datalayer sin necesidad de realizar ajustes.

Variables Javascript personalizadas

Dentro de los datos que debemos enviar a GA4, hay uno que engloba la información sobre los productos. Este es el único dato que precisaremos modificar mediante Javascript.

Realizaremos un ejemplo práctico con el suceso de compra. 

En el lado izquierdo, observamos el datalayer actual del sitio web que emplea Universal Analytics y, en el lado derecho, el datalayer que se solicita para GA4.

Datalayer Universal Analytics – GA4

Como se puede apreciar, los nombres de los parámetros son idénticos en su mayoría excepto en la información.de los productos que añaden el prefijo “item_”.

Tal como mencioné previamente, en GA4 todo se maneja a través de eventos y se pueden enviar los parámetros de manera independiente, por lo tanto lo que haremos es enviar la información requerida basada en lo que ya disponemos.

En primer lugar, vamos a definir las siguientes variables tipo datalayer (capa de datos):

Gestor de Etiquetas - Variable capa de datosGestor de Etiquetas - Variable capa de datos
Gestor de Etiquetas – Variable capa de datos

transaction_id:  ecommerce.purchase.actionField.id

moneda: ecommerce.currencyCode

valor: ecommerce.purchase.actionField.revenue

cupón: ecommerce.purchase.actionField.coupon

envío: ecommerce.purchase.actionField.shipping

impuesto: ecommerce.purchase.actionField.tax

afiliación: ecommerce.purchase.actionField.affiliation

elementos: ecommerce.purchase.products

Una vez que hayamos creado todas estas variables, obtendremos un resultado similar a la imagen:

Gestor de Etiquetas - Variables GA4Gestor de Etiquetas - Variables GA4
Gestor de Etiquetas – Variables GA4

Solo queda por crear la variable elementos que debemos generar a través de javascript.

Voy a compartir el código JS que convierte el objeto productos del datalayer de Universal Analytics al formato necesario para GA4:

Gestor de Etiquetas - Variable JavascriptGestor de Etiquetas - Variable Javascript
Gestor de Etiquetas – Variable Javascript
 function() { 
var productos = {{ DLV - Gracias - Productos }} || [];
return productos.map(function (p) {
return {
'nombre_elemento': p.nombre,
'id_elemento': p.id,
'precio': p.precio,
'marca_elemento': p.marca,
'categoria_elemento': p.categoria,
'variante_elemento': p.variante,
'cantidad': p.cantidad,
'cupón_elemento': p.cupón,
}
});
}

Una vez tengamos todas las variables creadas, solo nos restará configurar la etiqueta del evento de compra en GA4.

Simplemetele mostramos los nombres de los parámetros solicitados por GA4 y les asignamos las variables previamente creadas.

Tag Manager - GA4 - PurchaseTag Manager - GA4 - Purchase
Tag Manager – GA4 – Purchase

Es necesario repetir este procedimiento para todos los eventos que deseamos implementar en GA4

Verificación de los eventos desde GTM

Ahora que hemos completado todas las tareas, solo resta comprobar si todo está operando correctamente.

Para lograrlo, vamos a usar la función de vista previa de Google Tag Manager y llevar a cabo en el sitio web todos los eventos que deseamos verificar.

GTM - Vista Previa - GA4 PurchaseGTM - Vista Previa - GA4 Purchase
GTM – Vista Previa – GA4 Purchase

Icrono Magazine

¡Hola! Soy Icrono Avatar, responsable de todo el contenido de ICRONO Magazine. Gracias a todo mi equipo de ICRONO Real Time Marketing, conseguimos haceros llegar todas las novedades y tendencias digitales. ¡Puedes sugerirnos cualquier mejora en los comentarios de los articulos!
Botón volver arriba