Si estás aquí es porque te estás volviendo loco para poder trackear correctamente tu Woocommerce con el nuevo Google Analytics 4. Pero no te preocupes, porque te traemos la solución a todos tus problemas (bueno, quizá a todos no, pero a los que tienen que ver con Analytics y Woocommerce, seguro que sí).
Como ya sabemos, hace unos meses Google lanzaba su última versión de Analytics. La herramienta por excelencia para poder medir nuestra web. Esta nueva versión tiene grandes mejoras, pero también algunos problemas que tenemos que superar. Ya que el funcionamiento con respecto a la versión anterior ha cambiado significativamente. Especialmente a la hora de trackear nuestro Woocommerce. Y aquí está la gran pregunta…
¿CÓMO IMPLEMENTO ANALYTICS 4 EN WOOCOMMERCE?
Pues bien, parece ser que Google quiere que para todo ahora usemos Google Tag Mananger. Y eso es lo que haremos. Vamos a trackear todo lo que sucede en nuestro Woocommerce mediante Tag Manager. Pero no te asustes. Aunque hay que tener cuidado en algunos puntos para que todo salga bien, no es un proceso difícil. Y lo mejor es que después podremos conocer absolutamente todo los movimientos que los usuarios realizan en la web.
Antes de nada, estas son las herramientas que vamos a necesitar:
- Un contenedor de Tag Manager
- Plugin para WordPress: Google Tag Manager for WordPress desarrollado por Thomas Geiger
- Plugin para WordPress (opcional): Header and Footer Scripts.
- Una custom template para Tag Manager construida por Matteo Zambon que puedes descargar aquí o directamente de la galería de Tag Manager.
- Mucha paciencia.
PRIMEROS PASOS
En primer lugar, vamos a crear nuestro contenedor de Tag Manager:
- Para ello entramos en https://tagmanager.google.com/ con nuestra cuenta de gmail y pulsamos en crear cuenta.
- Asignamos un nombre a nuestra cuenta y creamos un contenedor, en este caso para un sitio web
- Posteriormente, aceptamos los términos de uso de Google.
Tras esta acción se nos recargará la página y aparecerán las instrucciones que nos da Google para instalar Tag Manager en nuestra web.
Solamente tenemos que copiar el código e insertar una parte en el <head> y la otra en el <body>.
Hay varias formas para realizar esta acción: puede hacerse de forma manual o con un plugin. También algunos temas tienen la función de insertar código por defecto.
En cualquier caso, para este ejemplo vamos a usar el plugin Header and Footer Scripts, que se puede encontrar en el repositorio de WordPress.
Instalamos y activamos el plugin y posteriormente pegamos el código y guardamos ajustes.
CONFIGURACIÓN DE GA4
Nuestro siguiente paso es “enlazar” Google Analytics 4 con Tag Manager.
- Para ello, nos vamos a nuestra cuenta de Google Analytics a Administrar => Flujos de Datos => “Nuestro flujo de datos”. Aquí encontraremos los Detalles del flujo web con el ID de Medición, que debemos copiar.
De vuelta a Tag Manager, nos dirigimos a Etiquetas => Nueva. Aquí lo que haremos es introducir el código de Analytics para que cada vez que el usuario vea una página nueva, Analytics 4 lo pueda medir.
Para ello elegimos el tipo de etiqueta que deseamos, en este caso Google Analytics: configuración de GA4
Introducimos el ID de Medicion de Google Analytics 4
Y como activador seleccionamos “All pages”
De esta forma conseguiremos que Analytics se empiece a medir a través de Tag Manager. Es importante que, si ya tenías insertado el código de Analytics 4 en tu web, lo deshabilites. Ya que si no lo haces, corres el riesgo de que Analytics empiece a medir doble.
IMPORTANDO LA CUSTOM TEMPLATE DE MATTEO
Nuestro siguiente paso es importar la custom template de Matteo Zambom:
Para ello dirígete a: Plantillas=> Plantillas de variables=> Buscar en la galería
Busca EEC dataLayer Builder for GA4 y haga clic en «Añadir al espacio de trabajo”
Tras importarla, la plantilla te aparecerá en “Plantillas de Variables”
CREANDO VARAIBLES PERSONALIZADAS PARA ANALYTICS 4
Posteriormente necesitamos crear 2 variables customizadas:
- La variable GA4 – Event Name, que gestionará el nombre del evento de e-commerce
- La variable GA4 – Items, que gestionará un objeto que contiene todos los parámetros.
CONFIGURANDO GA4 – Event Name
Para realizar esto tenemos que seguir los siguientes pasos:
Ir a Variables=> Variables definidas por el usuario
Hacer clic en Nueva y elegir EEC dataLayer Builder for GA4
En la opción de “Mode”, seleccionamos Event Name
En Checkout Events => colocamos los números de los pasos que corresponden a las diferentes acciones de nuestro embudo: begin_checkout, add_shipping_info y add_payment_info
View Cart Event está desactivado por defecto, si deseamos activarlo solo hay que seleccionarlo y añadir el número de paso.
Para ello debemos cambiar los valores, a estos otros:
1 => view_cart (esto no está habilitado por defecto)
2 => begin_checkout (el paso predeterminado es 1)
3 => add_shipping_info (el paso predeterminado es 2)
4 => add_payment_info (el paso predeterminado es 3)
¡No olvides guardar cambios!
Si lo hemos hecho bien, quedará tal y como en esta captura:
CONFIGURANDO GA4 – ITEMS
Con la variable GA4 – Items vamos a poder gestionar todos los elementos necesarios que necesitamos para que lo que ocurre en nuestra web sea correctamente medido en GA4
La configuración es sencila:
Al igual que hemos hecho anteriormente, nos dirigimos a Variables => Variables definidas por el usuario, hacemos click en nuevo y elegimos EEC dataLayer Builder for GA4 otra vez pero en este caso, en Mode, debemos elegir Items, aquí añadimos nuestra moneda por defecto, en este caso EUR.
Posteriormente, guardamos la variable con el nombre GA4 – Items
CREANDO LAS VARIABLES PARA COMPRA Y REEMBOLSO
Desgraciadamente, las variables relacionadas con las compras y los reembolsos se encuentran fuera de los parámetros de Items, así que nos toca meterlos a mano.
Las variables que tenemos que introducir manualmente son estas siete:
- transaction_id
- affiliation
- Valor
- tax
- shipping
- currency
- coupon
Pero no te preocupes, que el proceso es sencillo:
De nuevo en Tag Manager nos dirigimos a Variables => Variables definidas por el usuario=> Nueva=> Variable de Capa de Datos.
Aquí introducimos los siguientes campos:
- Nombre de la variable de la capa de datos: ecommerce.purchase.actionField.revenue
- Versión de la capa de datos: Versión 2.
- Título de la Variable «dlv – ecommerce.purchase.actionField.revenue”
Ahora simplemente tenemos que repetir este proceso 6 veces más cambiando los campos de Nombre de la Variable de Datos y el título. Siempre añadiendo “dlv –“ (importante utilizar siempre el mismo tipo guión) al inicio del título. Por los siguientes
- ecommerce.purchase.actionField.affiliation
- ecommerce.purchase.actionField.coupon
- ecommerce.purchase.actionField.id
- ecommerce.purchase.actionField.shipping
- ecommerce.purchase.actionField.tax
- ecommerce.currencyCode
- ecommerce.refund.actionField.id
Hay que tener especial cuidado con ecommerce.currencyCode
Aquí además tenemos que definir nuestra moneda como Valor Predeterminado.
Después de incluir todos estos parámetros nos quedará la cosa tal que así:
INSTALANDO EL PLUGIN GOOGLE TAG MANAGER FOR WORDPRESS
Nuestro siguiente paso es instalar el Google Tag Manager for WordPress, este plugin lo que hará, a grandes rasgos, es introducir en WordPress un código que Tag Manager pueda identificar fácilente, la famosa Datalayer.
- Tras instalar el plugin vamos a Ajustes => Google Tag Manager
- Aquí introducimos nuestro ID de Google Tag Manager (podemos encontrarlo en la parte superior derecha de nuestro panel de Tag Manager)
- En Colocación del código del contenedor seleccionamos “apagado”
- Guardamos cambios
- Posteriormente, dentro del plugin nos dirigimos a Integración => Woocommerce.
- Aquí podemos activar que campos queremos que se incluyan en la Datalayer
- Guardamos cambios
Con estos pasos ya tendremos lista nuestra Datalayer
DE VUELTA A TAG MANAGER
¡Ánimo que cada vez queda menos!
Ahora en Tag Manager tenemos que crear dos disparadores:
- GA – EEC EVENTS
- GA – PURCHASE
El primero nos permitirá trackear todas las acciones de comercio electrónico mejorado y el otro las compras
CREANDO EL ACTIVADOR GA – EEC EVENTS
Hacemos click en Activadores => Nuevo => Configuración del Activador => Evento personalizado
Introducimos los siguientes datos:
- Nombre del evento: gtm4wp.addProductToCartEEC|
gtm4wp.checkoutStepEEC|
gtm4wp.productClickEEC|
gtm4wp.productImpressionEEC|
gtm4wp.promoClickEEC|
gtm4wp.promoImpressionEEC|
gtm4wp.removeFromCartEEC (introduce este código sin ningún espacio) - Click en Utilizar una expresión regular que coincida con
- Este disparador se activa en Todos los eventos personalizados
- Nombre del activador: “GA – EEC Events”
- Guardar
CREANDO EL ACTIVADOR GA – EEC PURCHASE
Hacemos click en Activadores => Nuevo => Configuración del Activador => Evento personalizado
Introducimos los siguientes datos:
- Nombre del evento: gtm4wp.orderCompletedEEC
- Este disparador se activa en Todos los eventos personalizados
- Nombre del activador: “GA – EEC Purchase”
- Guardar
CREANDO UN ACTIVADOR NEGATIVO
Ahora debemos crear un activador negativo para controlar que el evento GA – EEC Purchase solo se active cuando se realice la compra. Ya que puede darse la situación de que se active antes del evento por defecto de GA4 “Page view” y dé falsos positivos.
- Hacemos clic en Activadores => Nuevo> Configuración del Activador => Evento personalizado
- Nombre del evento: .*
- Click en Utilizar una expresión regular que coincida con
- Este activador se activa en Algunos eventos personalizados
- Seleccionamos GA4 – Event Name es igual a purchase
CREANDO LAS ETIQUETAS
Tras crear los activadores tenemos que crear las etiquetas que serán activadas por los activadores (valga la redundancia). La primera manejará los eventos y la segunda las compras.
CREANDO GA4 – EEC
- Hacemos clic en Etiquetas => Nueva> Configuración de la Etiqueta => Google Analytcis: evento de GA4
- Configuración de la etiqueta: Configuración GA4
- Nombre del evento: {{GA4 – Event Name}}
- Parámetros del evento => añadir fila
- Nombre del parámetro: items
- Valor: {{GA – Items}}
- Activación: All Pages y GA – EEC Events
- Añadir excepción: GA4 Event Name – Purchase
- Nombre: GA4 – EEC
- Guardar
CREANDO GA4 – EEC – Purchase
- Hacemos clic en Etiquetas => Nueva> Configuración de la Etiqueta => Google Analytcis: evento de GA4
- Configuración de la etiqueta: Configuración GA4
- Nombre del evento: {{GA4 – Event Name}}
- Parámetro del evento: click en añadir fila
- Nombre del Parámetro: items
- Valor: elige la variable {{GA – Items}}
- Parámetro del evento: click en añadir fila
- Nombre del Parámetro: transaction_id
- Valor: elige la variable {{dlv – ecommerce.purchase.actionField.id}}
- Parámetro del evento: click en añadir fila
- Nombre del Parámetro: affiliation
- Valor: elige la variable {{dlv – ecommerce.purchase.actionField.affiliation}}
- Parámetro del evento: click en añadir fila
- Nombre del Parámetro: tax
- Valor: elige la variable {{dlv – ecommerce.purchase.actionField.tax}}
- Parámetro del evento: click en añadir fila
- Nombre del Parámetro: shipping
- Valor: elige la variable {{dlv – ecommerce.purchase.actionField.shipping}}
- Parámetro del evento: click en añadir fila
- Nombre del Parámetro: coupon
- Valor: elige la variable {{dlv – ecommerce.purchase.actionField.coupon}}
- Parámetro del evento: click en añadir fila
- Nombre del Parámetro: value
- Valor: elige la variable {{dlv ecommerce.purchase.actionField.revenue}}
- Parámetro del evento: click en añadir fila
- Nombre del Parámetro: currency
- Valor: elige la variable {{dlv – ecommerce.currencyCode}}
- Parámetro del evento: click en añadir fila
- Activación: GA – EEC – Purchase
- Nombre: GA4 – EEC – Purchase
- Guardar
Por último solo tenemos que enviar todos los cambios en Enviar, arriba a la derecha => Publicar
Si todo ha salido como debería, tu Google Analytics 4 ya debería estar registrando las compras en Woocommerce.
TESTEANDO
Para asegurarnos de que todo funciona correctamente lo mejor es usar el Tag Manager Preview Mode, donde podremos comparar al instante las acciones que suceden en la web con los eventos que están registrando Tag Manager y Analytics.
Solamente tenemos que navegar por la web y ver si las acciones que realizamos aparecen reflejadas en Tag Manager.
Aquí os dejamos algúnos ejemplos de test:
Si añadimos un producto al carrito, nos salta el hit «Add to Cart»
Si añadimos datos de pago, salta sin problema el hit «Add Payment Info»
Finalmente, si realizamos la compra, nos saltará «purchase»
Por último, te recordamos que Google Analytics puede tardar hasta 24 horas en procesar los datos. Pasado este tiempo podremos ver nuestras estadísticas en Monetización=> Compras de Comercio Electrónico.
¡Esperamos que te haya gustado este blog/tutorial! Y si necesitas ayuda con vuestro WordPress, no dudes en contactar con nosotros
PD: gran parte de la información que aquí os contamos está recopilada de un completísimo artículo llamado How to move from enhanced ecommerce tracking to Google Analytcis 4 ecommerce tracking with Google Tag Manager escrito por Matteo Zambon, un mago de Tag Manager.
11 comentarios
hola,
Después de realizar todos los pasos (adaptando los espacios y guiones para que fueran siempre igual) al enviar/publicar, me aparece el siguiente mensaje
https://www.awesomescreenshot.com/image/9811422?key=177e46f5cd987a6374994581caf1a270
no se cual es el problema porque está calcado a lo indicado
Buenas Rubén!
Tiene que haber algo que no debes haber puesto exactamente igual en un sitio y en otro. El error te lo está dando porque no te reconoce la variable.
Revisa los guiones porque según tu captura hay un guión corto «-» y si has copiado de aquí a la hora de crear las variables custom, tenemos un guión largo «–».
Buenisimo el tutorial. Realmente muy completo. Te felicito.
Ahora si yo quiero enviar estos eventos al Google Ads? Como seria a continuacion? Quisiera q el evento de compra de google ads detecte el monto. Para Argentina el valor de la moneda le puse ARS, es el correcto?
Hola Lucas!
La opción más sencilla es enlazar los eventos de conversión de Analytics 4 con Google Ads.
Para ello nos vamos Google Ads => Herramientas y Configuración => Conversiones.
Aquí hacemos click en el icono de + y se nos abre una pestaña donde puedes elegir el tipo de conversiones de las que quieres realizar el seguimiento. Hacemos click en importar, seleccionamos «Propiedades de Google Analytics 4» => Web. Aquí deben aparecerte todos los eventos que tienes configurados para Google Analytics. Seleccionas los que quieras que se compartan y listo 🙂
– En el caso de que no tengas enlazado Ads y Analytics debes enlazar primero en Ads => Configuración => Cuentas Vinculadas.
– Recuerda que en Analytics primero tienes que marcar los eventos que quieras trackear como conversión en Configurar => Eventos. (Puede que si acabas de instalarlo todo, todavía no te aparezcan, pueden tardar hasta 24h
En cuanto al valor de la moneda para Argentina, no lo sé a ciencia cierta, pero supongo que sí, que será ARS
Espero haberte ayudado! Cualquier cosa, te leo en comentarios!
Muy bueno el tutorial, mil felicitaciones!!! Gracias son los mejores.
Muchas gracias! 🙂
Hola, sigo todos los pasos. Pero al publicar me salen estos errorer. ¿Qué podría pasar?
Mil gracias por el tutorial
https://ibb.co/Kq6M5gN
Hola! Échale un ojo a los guiones, no es lo mismo este «-» que este otro «–» 🙂
Tengo un problema con esto:
Nombre de variable desconocido
GA4 – EEC – Purchase
Se ha encontrado la variable desconocida «GA – Items» en una etiqueta. Edite la etiqueta y retire la referencia a la variable desconocida.
Nombre de variable desconocido
GA4 – EEC – Purchase
Se ha encontrado la variable desconocida «GA4 – Event Name» en una etiqueta. Edite la etiqueta y retire la referencia a la variable desconocida.
los digito todo bien pero igual me marca error
¡Hola! Muchas gracias por el tutorial. He dado con todos los pasos y por ahora, parece estar funcionando.
Sin embargo tengo un problema, desde la instalación del pluggin veo en Analitycs un evento [objetc Objetc]. No entiendo a qué se refiere o cómo resolverlo.
Además, veo transacciones pero en la columna carrito o vista del producto todo aparece en 0 (Analitycs GA4 – Monetización).
Aguardo tu comentario.
Gracias.
¡Hola! He dado con todos los pasos y tengo un problema. En Analitycs se me dispara un evento con nombre [objetc Objetc] desde que he instalado el pluggin que indican aquí.
¿Alguna manera de resolverlo? Por cierto. Tengo transacciones en el comercio electrónico pero en la columna agregados al carrito o vista de producto los valores están en 0, mientras que en compra tengo valores positivos.
Gracias.