Algo que me traía de cabeza hasta hace poco era la implementación del comercio electrónico en Google Analytics 4 partiendo de una configuración de Universal Analytics de los dataLayers y, aunque no es complicado, sí resulta bastante tedioso. Así que, paciencia.
Aunque existen diferentes formas de implementar el comercio electrónico de GA4, en estos momentos en los que la herramienta sigue evolucionando, siempre es recomendable partir de una instalación dual con Universal Analytics, por lo que la implementación partirá de los dataLayers de nuestro amigo más longevo.
Antes de entrar en materia, esta implementación se podría resumir en buscar las equivalencias de cada uno de los eventos del comercio electrónico mejorado de Universal Analytics con los eventos de Google Analytics 4 y, una vez vistos, ver qué parámetros requiere este segundo y de dónde los podemos extraer. Por lo que, como te habrás imaginado, sí, deberemos navegar por los dataLayers haciendo uso de variables de capa de datos para poder asignar los valores.
Aunque más adelante seguro que partiremos de implementaciones limpias, con dataLayers puros de GA4, de momento, esta parece la opción más segura, pues todavía deberán convivir ambas versiones unos meses más.
Pero antes de nada…
Vamos a hablar de...
Formas de implementar el comercio electrónico en GA4
Como decía antes, existen diferentes formas de implementar el ecommerce de GA4 actualmente en nuestros sitios web. Todas son válidas y deberemos abordarla en función de las necesidades que tengamos.
- Implementación limpia: como su nombre indica, se trata de la implementación de los dataLayers de GA4 directamente en nuestro sitio web. Para ello, podemos hacer uso de su guía para desarrolladores, que se va a convertir en nuestra página más visitada durante unos días.
- Implementación mixta: sobre una implementación de los dataLayers de Universal Analytics, podemos incluir también los de GA4. Con esto hacemos, en muchos casos, que se lance información duplicada, pero estaremos preparados para abandonar UA cuando llegue el momento y la convirtamos en una implementación limpia.
- Implementación heredada: la que trabaja sobre una implementación de dataLayers de Universal Analytics. Es perfectamente compatible con la información que necesita Google Analytics 4, sin embargo, deberemos actuar de traductores para que sepa interpretar correctamente los datos desde Google Tag Manager.
Como ya he indicado, en este artículo voy a explicar cómo realizar una implementación heredada, que será la más común. Ahora bien, si tienes la oportunidad de realizar una implementación limpia porque te has decidido a trabajar únicamente con GA4, ¡adelante, valiente! Echa un vistazo a su documentación, porque al final será la mejor opción.
Estructura del ecommerce en GA4
Antes de ponernos a jugar con Google Tag Manager, toca repaso teórico sobre cuáles son las dimensiones y métricas que necesita el ecommerce de GA4 para funcionar de esta manera.
Cómo veis, vamos a acabar empachados del items, que es el parámetro que generalmente aportará la mayor cantidad de información a la herramienta (productos, creatividades, etc.)
Para cada uno de los eventos de la izquierda deberemos recoger todos o casi todos los parámetros de la derecha. Habrá casos en los que un coupon o un affiliation van a estar vacíos, sin embargo conviene igualmente recoger la información del dataLayer. De igual modo, un item_list_id no nos aportará mucho si ya tenemos el item_list_name. Atentos también a recoger correctamente los value.
Implementación de etiquetas de GA4 en Google Tag Manager
Si llegados a este punto todavía no lo habéis entendido, pues no pasa nada. Ahora sí lo vais a entender. Es la hora de abrir Google Tag Manager y empezar a jugar.
Ahora bien, doy por hecho que ya tenéis instalado el snippet de GA4 para hacer una lectura de eventos general y mejorados, ya que tendremos que tenerlo sí o sí, puesto que los eventos depende de él.
Eventos de impresión (view_promotion) y click de promoción (select_promotion)
Para empezar, voy a hablaros de los eventos de Google Analytics 4 que se encargan de medir las impresiones y clics en las promociones del sitio web.
Para no alargar el artículo inútilmente, en lugar de copiar el dataLayer de UA, os dejaré un enlace a la documentación para que podáis consultarlo y aquí me centraré en explicar cómo traducirlo en GTM para que GA4 pueda interpretarlo.
- Evento de GA4: view_promotion
- DataLayer: Documentación de dataLayer de UA
- Parámetros que debemos incluir: items
- Definición de variables de capa de datos para cada parámetro:
- items: ecommerce.promoView.promotions (el resto de parámetros se incluyen dentro del items)
- Activación: será el evento que dispare el PromoView (tipo evento personalizado). Es posible que deba dispararse al cargar las páginas donde se muestren esas listas, por lo que podríamos establecer un pageview con condiciones como activador.
- Evento de GA4: select_promotion
- DataLayer: Documentación de dataLayer de UA
- Parámetros que debemos incluir: items, promotion_id, promotion_name, creative_name, creative_slot, location_id
- Definición de variables de capa de datos para cada parámetro:
- items: ecommerce.promoClick.promotions
- promotion_id: ecommerce.promoClick.promotions.0.id
- promotion_name: ecommerce.promoClick.promotions.0.name
- creative_name: ecommerce.promoClick.promotions.0.creative
- creative_slot: ecommerce.promoClick.promotions.0.position
- location_id: ecommerce.promoClick.promotions.0.position
- Activación: será el evento que dispare el promotionClick (tipo evento personalizado), generalmente cuando se hace clic en una de las promociones.
Eventos de impresión (item_list_name) y clic en producto (select_item)
Es el turno de los eventos de GA4 que se encargan de avisar a la herramienta de las impresiones y clics de productos.
- Evento de GA4: item_list_name
- DataLayer: Documentación de dataLayer de UA
- Parámetros que debemos incluir: items, item_list_name, item_list_id
- Definición de variables de capa de datos para cada parámetro:
- items: ecommerce.impressions
- item_list_name: ecommerce.impressions.0.list
- item_list_id: ecommerce.impressions.0.list
- Activación: será el evento que dispare el Product Impression (tipo evento personalizado). Es posible que deba dispararse al cargar las páginas donde se muestren esas listas, por lo que podríamos establecer un pageview con condiciones como activador.
- Evento de GA4: select_item
- DataLayer: Documentación de dataLayer de UA
- Parámetros que debemos incluir: items, item_list_name, item_list_id
- Definición de variables de capa de datos para cada parámetro:
- items: ecommerce.click.products
- item_list_name: ecommerce.click.actionField.list
- item_list_id: ecommerce.click.actionField.list
- Activación: será el evento que dispare el productClick (tipo evento personalizado), es decir, cuando se hace clic sobre un producto de un listado.
Eventos de visualización de ficha de producto (view_item)
Empezamos con los eventos que suceden dentro de la ficha de producto. En primer lugar tenemos la visualización de la propia ficha, que se convierte en un view_item y puede causarnos algo de confusión con las impresiones de producto. También es posible que debamos implementar en la propia ficha los item_list_name y select_item si tenemos variantes o productos relacionados.
- Evento de GA4: view_item
- DataLayer: Documentación de dataLayer de UA
- Parámetros que debemos incluir: currency, items, value
- Definición de variables de capa de datos para cada parámetro:
- currency: ecommerce.detail.products.0.currency (no está definido en el dataLayer por defecto), nos creamos una constante con el valor o metemos directamente la moneda como en la captura de más abajo.
- items: ecommerce.detail.products
- value: ecommerce.detail.products.0.price
- Activación: será el evento que dispare el la vista de detalle (tipo evento personalizado) o bien la carga de este tipo de páginas si podéis aislarlas por algún patrón.
Eventos de ver (view_cart), añadir (add_to_cart) y eliminar del carrito (remove_from_cart)
Siguiendo con los eventos relacionados con el carrito, tenemos en primer lugar la propia visualización del mismo, seguida de la adición de productos, que se suele realizar dentro de la ficha de producto o en listados, y la eliminación, que también se realiza en la propia página de carrito o, en su defecto, en desplegables y otros formatos de carrito.
- Evento de GA4: view_cart
- DataLayer: en este caso, lo mejor sería tener una capa de datos personalizada con el contenido del carrito. Algunos plugins básicos como el GTM4WP de WordPress ya permiten incorporarla. Supongamos que tenemos la siguiente estructura de dataLayer en la página de carrito:
dataLayer.push({
'cartContent': {
'totals': {
'applied_coupons': [{
0: 'cupon'
1: 'cupon1'
}]
'discount_total':'0'
'subtotal':'41.32'
'total':'41.32'
'currencyCode': 'EUR',
}
'items': [{
'id': '5833'
'name': 'Nombre del producto'
'sku': '5833'
'category':'Categoría del producto'
'price': '50'
'stocklevel': '4'
'brand':'marca'
'quantity':'1'
}]
}
)};
- Parámetros que debemos incluir: currency, items, value
- Definición de variables de capa de datos para cada parámetro:
- currency: cartContent.totals.currencyCode
- items: cartContent.items
- value: cartContent.totals.total
- Activación: será simplemente la página vista del carrito.
- Evento de GA4: add_to_cart
- DataLayer: Documentación de dataLayer de UA
- Parámetros que debemos incluir: currency, items, value
- Definición de variables de capa de datos para cada parámetro:
- currency: ecommerce.currencyCode
- items: ecommerce.add.products
- value: {{JS. Valor total de añadir a carrito}}. Deberemos crearnos una variable personalizada de Javascript para poder calcular el valor total de lo que hemos añadido a carrito multiplicando el precio del producto por la cantidad. También podemos calcularlo en el propio dataLayer.
- Price: ecommerce.add.products.0.price
- Quantity: ecommerce.add.products.0.quantity
function() {
return parseFloat({{Price}}) * parseFloat({{Quantity}});
}
- Activación: será el evento que dispare el Añadir al carrito típico, generalmente al pulsar el botón de Añadir al carrito o comprar.
- Evento de GA4: remove_from_cart
- DataLayer: Documentación de dataLayer de UA
- Parámetros que debemos incluir: currency, items, value
- Definición de variables de capa de datos para cada parámetro:
- currency: puedes poner la moneda directamente (EUR), bien crearte una constante con su valor, bien modificar el dataLayer para que incluya la moneda y poder cogerla con una variable de capa de datos.
- items: ecommerce.remove.products
- value: ecommerce.remove.products.0.price (generalmente las eliminaciones de carrito se hacen de una en una, si no es el caso, tendríamos que volver a crearnos la multiplicación del add_to_cart o bien calcularlo directamente en el dataLayer y cogerlo de ahí).
- Activación: será el evento que dispare la eliminación de carrito, generalmente el típico icono de aspa o cubo de basura.
Eventos de checkout (begin_checkout, add_shipping_info, add_payment_info)
Es el turno de los eventos de tramitación de compra. Seguro que te suenan los famosos steps que permitían crear el embudo del informe de Comportamiento en la tramitación de la compra de Universal Analytics. Pues son los que vamos a utilizar para configurar los eventos de checkout de Google Analytics 4. Como veréis, tienen una implementación con una particularidad, y es que deberemos indicar el número del step, dado que el nombre del evento siempre era checkout o checkout_option en UA.
- Evento de GA4: begin_checkout
- DataLayer: Documentación de dataLayer de UA
- Parámetros que debemos incluir: coupon, currency, items, value
- Definición de variables de capa de datos para cada parámetro:
- coupon: la mejor manera de obtener este valor, sería cargar también el dataLayer del contenido del carrito en el proceso de checkout o bien incluir este contenido en el dataLayer que se dispara en el proceso.
- currency: puedes poner la moneda directamente (EUR), bien crearte una constante con su valor, bien modificar el dataLayer para que incluya la moneda y poder cogerla con una variable de capa de datos.
- items: ecommerce.checkout.products
- value: de nuevo, deberíamos coger el valor total del dataLayer del contenido de carrito, o bien incluirlo en el del propio checkout.
- Activación: simplemente la página vista del checkout.
- Evento de GA4: add_shipping_info / add_payment_info
- DataLayer: Documentación de dataLayer de UA
- Parámetros que debemos incluir: coupon, currency, items, shipping_tier / paymeny_type, value
- Definición de variables de capa de datos para cada parámetro:
- coupon: la mejor manera de obtener este valor, sería cargar también el dataLayer del contenido del carrito en el proceso de checkout o bien incluir este contenido en el dataLayer que se dispara en el proceso.
- currency: puedes poner la moneda directamente (EUR), bien crearte una constante con su valor, bien modificar el dataLayer para que incluya la moneda y poder cogerla con una variable de capa de datos.
- items: ecommerce.checkout.products
- value: de nuevo, deberíamos coger el valor total del dataLayer del contenido de carrito, o bien incluirlo en el del propio checkout.
- shipping_tier / payment_type: Se trata de transmitir el valor del radio seleccionado en caso de que haya diferentes métodos de envío o de pago. Si ya lo recogemos en el dataLayer de UA con un option, simplemente será ecommerce.checkout_option.actionField.option. Si no es el caso, podremos cogerlo con una variable personalizada de Javascript en la utilicemos el document.querySelector() del input que esté seleccionado y saquemos con getAttribute() el valor que queremos.
- Activación: se activará al hacer clic sobre el método de envío o método de pago. Si hay uno seleccionado por defecto, deberemos lanzar el evento en el momento se carguen los métodos, si es necesario, en la carga de la página. Si lo tenemos ya definido con un evento checkout o checkout_option, deberemos especificar en el activador que el step es el número que se corresponde con el dataLayer de UA. Para ello, lo mejor es crearnos una variable de capa de datos solo para extraer los steps (ecommerce.checkout.actionField.step). En ocasiones hay métodos que son enlaces a plataformas externas, no está de más lanzar este evento también con un clic a esos botones.
Eventos de generación de leads (generate_leads) y compra (purchase)
En este punto trataré los eventos de conversión como tal. Por un lado el generate_leads, que nos sirve para medir formularios, por ejemplo, de suscripción a una newsletter o para pura captación de leads si el modelo de negocio es de ese tipo. Por otro el purchase, enfocado, este sí, al ecommerce.
El caso de generate_leads es algo particular, puesto que nos recomiendan incluir los campos de moneda y valor, algo útil si queremos asignarle un valor económico a la conversión. Si no es así, lo dejaremos vacío. Sí que sería recomendable establecer alguna dimensión personalizada de ámbito evento para saber exactamente qué formulario enviamos. También es útil crearnos una propiedad de usuario para poder crear un segmento más adelante.
- Evento de GA4: generate_leads
- DataLayer: no es necesario
- Parámetros que debemos incluir: currency, value
- Definición de variables de capa de datos para cada parámetro:
- value: podemos incluir el valor del lead directamente en GTM.
- currency: puedes poner la moneda directamente (EUR) o bien crearte una constante con su valor.
- Activación: simplemente al enviar el formulario que nos interese medir.
- Evento de GA4: purchase
- DataLayer: Documentación de dataLayer de UA
- Parámetros que debemos incluir: affiliation, coupon, currency, items, transaction_id, shipping, tax, value
- Definición de variables de capa de datos para cada parámetro:
- affiliation: ecommerce.purchase.actionField.affiliation
- coupon: ecommerce.purchase.actionField.coupon
- currency: ecommerce.purchase.actionField.currency si incluimos la moneda en el dataLayer, bien nos creamos una constante o lo ponemos directamente como en la imagen.
- items: ecommerce.purchase.products
- transaction_id: ecommerce.purchase.actionField.id
- shipping: ecommerce.purchase.actionField.shipping
- tax: ecommerce.purchase.actionField.tax
- value: ecommerce.purchase.actionField.revenue
- Activación: se deberá disparar, generalmente, con la carga de la página de gracias tras la compra o bien con el evento personalizado que disparara en UA la compra.
Otros eventos y consideraciones
Y aunque todavía quedaría por implementar el nuevo add_to_wishlist y el refund, no voy a meterme en su explicación porque la configuración es exactamente igual. El refund se parece mucho al purchase, solo que tendremos que lanzarlo en el cambio de estado de un pedido, mientras que el add_to_wishlist es igual que un select_item, solo que lo lanzaremos cuando añadimos a favorito el producto. Este segundo no estaba en la implementación de Universal Analytics, por lo que tendremos que desarrollar el dataLayer y manejarlo con un activador de clic en un elemento.
Por lo demás, como habréis visto si habéis llegado hasta aquí, lo más complicado de esta configuración es, en algunos casos, dar valor a campos que en Google Universal Analytics no se contemplaban, pero siempre hay una forma de hacerlo sin necesidad de tocar código si ya tenemos el comercio electrónico mejorado implementado.
Aunque no me he metido a explicarlo a fondo, por el camino han surgido posibilidades de crear dimensiones personalizadas y propiedades de usuario, que podéis leer en la documentación del propio GA4 y son muy fáciles de aplicar.
¡Y esto es todo! Me ha quedado un artículo súper largo, pero creo que está todo bien explicado. Aun así, si hay dudas, podéis dejar un comentario y trataremos de llegar a la solución. Espero que el contenido os haya servido. ¡Nos leemos!
