TRACKEAR WOOCOMMERCE CON GOOGLE ANALYTICS 4 SIN MORIR EN EL INTENTO.

COMPARTE

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

TABLA DE CONTENIDO

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:

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}}
  • 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.

COMPARTE

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Cuéntanos cosas

4 respuestas

    1. 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 “–”.

  1. 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?

    1. 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!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Sigue Leyendo

¿Hablamos?

Si necesitas cualquier cosa, déjanos tus datos aquí abajo.
Somos como los cerrajeros, estamos disponibles 24/7. Pero lo cierto es que nosotros cobramos menos.

Te llamamos

¿Andas más lost que los de Lost con tu Wordpress?

Si necesitas cualquier cosa, déjanos tus datos aquí abajo.
Somos como los cerrajeros, estamos disponibles 24/7. Pero lo cierto es que nosotros cobramos menos.

Te llamamos

Mensaje Enviado

Hey! Hemos recibido un mail con tus datos y nos pondremos en contacto contigo en cuanto podamos.

Si tienes mucha prisa siempre puedes llamarnos o escribirnos por Whatsapp

¿Hablamos?

Si necesitas cualquier cosa, déjanos tus datos aquí abajo.
Somos como los cerrajeros, estamos disponibles 24/7.
Pero lo cierto es que nosotros cobramos menos.

Déjanos tu contacto y te llamamos