Google Tag Manager en WooCommerce: cómo instalarlo y configurarlo
En esta guía te voy a enseñar cómo instalar Google Tag Manager en WooCommerce. También veremos cómo evitar mediciones duplicadas, configurar Consent Mode v2 con Complianz y comprobar que eventos como add_to_cart, begin_checkout o purchase funcionan correctamente.
Aquí te dejo mi reseña de SE Ranking y un cupón para que puedas probarla GRATIS.
Qué es Google Tag Manager y para qué sirve en WooCommerce
Google Tag Manager es una herramienta SEO que nos permite instalar y gestionar etiquetas de medición sin tener que tocar el código de la web cada vez que queremos añadir algo. Básicamente, funciona como un contenedor desde el que podemos controlar Google Analytics 4, Google Ads y otras herramientas de marketing.
En WooCommerce nos sirve para medir lo que ocurre dentro de nuestra tienda online, desde la visita a un producto hasta una compra. También podemos registrar acciones como añadir al carrito o comenzar el proceso de pago.
Ahora bien, instalar el contenedor no significa que las ventas se empiecen a medir por arte de magia. Para registrar correctamente productos, precios y pedidos necesitaremos configurar los eventos de ecommerce y trabajar con una capa de datos o dataLayer. Algo que veremos en esta guía de manera fácil.
Qué necesitas antes de instalar Google Tag Manager
Antes de instalar Google Tag Manager en WooCommerce, necesitas:
- Acceso al panel de WordPress.
- Una cuenta de Google Tag Manager con un contenedor web creado.
- También conviene tener preparada tu propiedad de Google Analytics 4 si quieres medir el tráfico y las ventas de la tienda.
No te preocupes si no tienes tu cuenta creada en Google Tag Manager y GA4 porque también te voy a ayudar con ello en esta guí.a
Así mismo, te aconsejo realizar una copia de seguridad y asegurarte de poder limpiar la caché de WordPress. No es un proceso complicado, pero estos dos pasos te ahorrarán problemas si el código del contenedor no aparece correctamente después de la instalación.
Cómo instalar Google Tag Manager en WooCommerce paso a paso
Te voy a ser claro: la forma más práctica de instalar Google Tag Manager en WordPress es utilizar GTM4WP. Y más si eres nuevo en esto del SEO para WooCommerce.
¿Por qué?
Porque este plugin añade el código del contenedor en WordPress y crea la capa de datos que necesitaremos para medir productos, carritos y compras.
Yo prefiero este método porque evita modificar archivos como header.php y mantiene la medición en un único lugar. Aun así, debes revisar que ningún otro plugin esté insertando los mismos códigos.
Crear una cuenta y un contenedor de Google Tag Manager
Empieza accediendo a la página oficial de Google Tag Manager con tu correo o crea tu cuenta en caso de no tener una.
Una vez creada, pulsa en Crear cuenta.
Introduce el nombre de tu empresa, selecciona el país y asigna un nombre al contenedor. Ante la duda, puedes utilizar el dominio de la tienda para reconocerlo fácilmente.
En Plataforma objetivo, selecciona Web y acepta las condiciones del servicio. Google creará el contenedor y te mostrará los fragmentos de código para instalarlo. En este caso NO tienes que copiarlos porque GTM4WP se encargará de añadirlos.
Perfecto, en este punto ya tienes cuenta creada y ahora debes integrarla en tu WooCommerce, esto lo haremos a través de una serie de identificadores.
Y quizá aquí te surgen dudas porque ya has trabajado con identificadores antes, así que vamos a hacer una breve distinción de cada uno.
| Identificador | Para qué sirve |
|---|---|
GTM-XXXXXXX | Identifica el contenedor de Google Tag Manager. Es el que debes introducir en GTM4WP. |
G-XXXXXXXXXX | Es el ID de medición del flujo web de Google Analytics 4. Se utilizará dentro de las etiquetas de GTM. |
AW-XXXXXXXXX | Identifica una cuenta o etiqueta de Google Ads. Se utiliza para conversiones y remarketing. |
De los 3, vamos a instalar el que empieza por GTM- (aunque también puedes encontrarte un identificador que empiece por GT-).
¡Vamos con ello!
Instalar y configurar el plugin GTM4WP
Desde el panel de WordPress, entra en Plugins > Añadir nuevo plugin y busca "GTM4WP":
Instala GTM4WP – A Google Tag Manager plugin for WordPress, desarrollado por Thomas Geiger, y actívalo.
Después, accede a Ajustes > Google Tag Manager. Introduce tu identificador GTM-XXXXXXX en el campo Google Tag Manager ID.
Comprueba que la opción Container code ON/OFF está activada. Básicamente, esta opción permite que GTM4WP inserte el código del contenedor en la web. Posteriormente te diré como desactivarlo en caso de usar un banner de consentimiento (pero no nos compliquemos con eso ahora).
<head> y el fragmento de respaldo justo después de la apertura del <body>, que es la ubicación recomendada.Utiliza las opciones de colocación manual o en el footer únicamente cuando el tema no permita insertar correctamente el segundo fragmento. No añadas además el código en header.php, ya que estarías cargando el mismo contenedor por dos vías diferentes.
Guarda los cambios y limpia todas las capas de caché que utilice la tienda:
- Caché de WordPress.
- Caché del servidor.
- CDN, si utilizas Cloudflare u otro servicio.
- Optimización o retraso de JavaScript.
Después abre una ventana de incógnito y carga cualquier página de la tienda. Esto evita que una sesión de administrador excluida del seguimiento te haga pensar que la instalación ha fallado.
Dónde encontrar el ID de Google Tag Manager
El ID del contenedor aparece en la parte superior del espacio de trabajo de Google Tag Manager, junto al nombre del contenedor. Empieza siempre por GTM-.
Al pulsar sobre ese identificador se abre la ventana Instalar Google Tag Manager, donde puedes consultar los dos fragmentos de código del contenedor.
Copia únicamente el identificador:
GTM-XXXXXXX
No copies todo el script y no introduzcas en GTM4WP el ID de GA4 que empieza por G-.
Para hacer una comprobación rápida, abre el código fuente de la tienda y busca tu identificador GTM-XXXXXXX. Deberías encontrar una referencia al script de Google Tag Manager.
También puedes entrar en el contenedor, pulsar Vista previa e introducir la URL de la tienda. Si Tag Assistant se conecta correctamente, sabrás que el contenedor está cargando.
Esta comprobación solo confirma que GTM está instalado. Todavía no demuestra que los eventos de ecommerce estén llegando correctamente a GA4.
Cómo evitar instalar GTM o GA4 dos veces
Si es la primera vez que instalas GTM, olvídate de esta sección. De lo contrario, antes de continuar, revisa quién se encarga de insertar cada código. Yo intento que exista un único responsable para Google Tag Manager y otro claramente definido para Google Analytics.
Si GTM4WP instala el contenedor, comprueba estos puntos:
- Revisa header.php, footer.php y cualquier apartado del tema destinado a scripts personalizados.
- En Site Kit, entra en Ajustes > Servicios conectados > Tag Manager > Editar y desactiva la opción que permite a Site Kit colocar el código.
- Comprueba si Site Kit también está insertando Google Analytics.
- Revisa plugins como MonsterInsights, PixelYourSite o cualquier integración específica de GA4.
- Comprueba las extensiones que permiten añadir scripts en el header y el footer.
- Revisa la configuración de tu plataforma de consentimiento o CMP.
Site Kit detecta algunos códigos existentes y permite desactivar su inserción. Aun así, yo no confiaría toda la revisión a la detección automática sino que comprobaría manualmente qué herramienta controla cada etiqueta.
También debes revisar si tienes el plugin de Google for WooCommerce. Esta extensión puede añadir una Google tag para remarketing y crear acciones de conversión de Google Ads, incluida la compra. Si después configuras la misma conversión mediante GTM, podrías medir una venta dos veces.
Por simplificar, mi configuración habitual es la siguiente:
- GTM4WP inserta el contenedor y genera el
dataLayer. - Google Tag Manager gestiona GA4 y las etiquetas publicitarias.
- Site Kit puede seguir conectado para mostrar informes, pero sin insertar códigos (yo no lo uso, si lo tengo es porque lo quiere el cliente).
- La CMP (normalmente complianz) comunica el consentimiento, pero no añade un segundo contenedor.
Cuando revises el código fuente, ten en cuenta que un contenedor puede mostrar su ID en el script del <head> y en el fragmento de respaldo del <body>. Ver el mismo GTM-XXXXXXX dos veces no significa necesariamente que esté duplicado.
Activar el seguimiento de WooCommerce y el dataLayer
Una vez instalado el contenedor, vuelve a Ajustes > Google Tag Manager y entra en Integration > WooCommerce.
Activa la opción Track enhanced e-commerce (o seguimiento del comercio electrónico en español).
Esta acción es clave ya que hace que GTM4WP envíe al dataLayer los eventos y datos de WooCommerce. Entre ellos encontramos las vistas de producto, las adiciones al carrito, el inicio del checkout y la compra.
El resultado tendrá una estructura similar a esta:
{
event: "add_to_cart",
ecommerce: {
currency: "EUR",
value: 49.90,
items: [
{
item_id: "123",
item_name: "Nombre del producto",
price: 49.90,
quantity: 1
}
]
}
}
En la página de confirmación del pedido, GTM4WP debe generar el evento purchase con datos como el identificador de la transacción, el valor, la moneda, los gastos de envío y los productos comprados.
La opción Order data in data layer añade información adicional del pedido que puede resultar útil para Google Ads, conversiones mejoradas o etiquetas personalizadas. No es imprescindible para enviar el ecommerce estándar de GA4, por lo que yo solo la activaría cuando realmente vaya a utilizar esos datos.
De todas las comprobaciones, la prueba más importante será completar un pedido y verificar que aparece un único evento purchase con el ID, el importe, la moneda y los productos correctos. GTM4WP utiliza la página de pedido recibido y dispone de mecanismos alternativos para algunos pagos que redirigen al usuario fuera de WooCommerce.
¡Enhorabuena! Ya tienes instalado Google Tag Manager y WooCommerce estará enviando información al dataLayer, pero aún faltará configurar dentro de GTM las etiquetas que recogerán esos eventos y los enviarán a Google Analytics 4.
Te enseño a auditar tu web con Screaming Frog, para que identifiques y soluciones los problemas que están afectando tu SEO.
¡Comienza mi curso de Screaming Frog gratis hoy!
Cómo configurar el ecommerce de GA4 en Google Tag Manager
En este momento del tutorial, tu WooCommerce ya está enviando la información de productos y pedidos al dataLayer. Y ahora, necesitamos una etiqueta que recoja esos datos y los envíe a Google Analytics 4.
Para esto, yo recomiendo encarecidamente utilizar la plantilla oficial de GTM4WP ya que te ahorra crear manualmente las variables y el activador que escuchará los eventos de ecommerce.
Vamos con ello, paso a paso.
Crear la etiqueta de Google y los eventos de ecommerce
Lo primero será crear la etiqueta base que conecta Google Tag Manager con tu propiedad de GA4.
Dentro de GTM, entra en Etiquetas > Nueva.
Tras ello, selecciona Etiqueta de Google e introduce el ID de medición de GA4.
Añade el activador Initialization - All Pages y guarda la etiqueta con un nombre fácil de reconocer, como GA4 configuration.
Esta etiqueta de Google sustituye a la antigua etiqueta de configuración de GA4 por lo que debes eliminarla si la habías implementado de laguna otra manera.
Importar la plantilla JSON de GTM4WP
GTM4WP ofrece una plantilla de contenedor preparada para enviar los eventos de WooCommerce a GA4.
Descarga siempre el archivo JSON desde la guía oficial del plugin. No reutilices una plantilla antigua, ya que podría incluir configuraciones de Universal Analytics o eventos que ya no se utilizan.
Dentro de Google Tag Manager, entra en Administrador > Importar contenedor (tal y como se ve en la imagen de arriba)
Selecciona el archivo JSON y crea un espacio de trabajo nuevo, puedes llamarlo Configuración ecommerce GA4.
En las opciones de importación, selecciona Fusionar y elige la opción que cambia el nombre de las etiquetas, activadores y variables que entren en conflicto.
Antes de confirmar, revisa el resumen de cambios. Si GTM indica que va a eliminar o sustituir etiquetas existentes, comprueba primero qué elementos se verán afectados.
La importación debería crear el activador de ecommerce, las variables necesarias y una etiqueta de eventos de GA4.
Configurar la etiqueta de eventos de GA4
Después de importar el archivo, abre la etiqueta de eventos de ecommerce. Su nombre puede variar ligeramente según la versión de la plantilla.
Introduce tu ID de medición G-XXXXXXXXXX o selecciona la variable constante que creaste anteriormente.
El nombre del evento debe recoger el valor de la variable integrada Event. De esta manera, no necesitamos crear una etiqueta diferente para cada acción del usuario.
La misma etiqueta podrá enviar los principales eventos de ecommerce:
- view_item
- add_to_cart
- remove_from_cart
- view_cart
- begin_checkout
- add_shipping_info
- add_payment_info
- purchase
GTM4WP también puede generar view_item_list y select_item cuando el usuario visualiza un listado o selecciona un producto.
Configurar el activador de eventos personalizados
La plantilla incluye un activador de tipo Evento personalizado que escucha los nombres enviados al dataLayer.
Si decides crearlo manualmente, configura el activador para que se ejecute cuando el nombre del evento coincida con cualquiera de los eventos de ecommerce anteriores.
Yo incluiría también view_item_list y select_item para medir las interacciones con categorías, resultados de búsqueda y otros listados de productos.
La ventaja de este sistema es que un único activador puede controlar todos los eventos. Así evitamos crear y mantener una configuración diferente para cada acción.
Revisar los datos de ecommerce
Comprueba que la etiqueta tiene activada la opción para enviar datos de ecommerce y que utiliza la capa de datos como fuente.
Dentro del objeto ecommerce deberían aparecer datos como:
- Moneda.
- Valor.
- Productos.
- Precio.
- Cantidad.
- Categoría.
- Marca.
- Variante.
Google estructura la información de los productos dentro del array items. Cada elemento del array representa uno de los productos asociados al evento.
Cuando se envía el parámetro value, también debe enviarse currency. La moneda utiliza el formato ISO 4217, por ejemplo EUR, USD o GBP.
En el evento purchase deberías encontrar, como mínimo:
- transaction_id
- value
- currency
- items
También pueden aparecer tax, shipping y coupon cuando esos datos estén disponibles.
Yo prestaría especial atención a transaction_id, ya que identifica cada pedido y ayuda a evitar que una misma compra se contabilice varias veces.
Comprobar y publicar el contenedor
Antes de publicar, pulsa en Vista previa y recorre el proceso de compra como lo haría un cliente:
- Abre un producto.
- Añádelo al carrito.
- Visita el carrito.
- Comienza el checkout.
- Selecciona el método de envío y pago.
- Completa un pedido de prueba.
En cada paso, comprueba que aparece el evento correspondiente y que la etiqueta de ecommerce de GA4 se activa una sola vez.
También debes revisar que items contiene el producto correcto y que value y currency coinciden con los datos de WooCommerce.
Cuando todo funcione, pulsa en Enviar, añade un nombre descriptivo a la versión y publica el contenedor.
A partir de ese momento, los eventos de WooCommerce comenzarán a enviarse a Google Analytics 4.
Cómo configurar Consent Mode v2 en WooCommerce
Llegados a este punto, ya tienes la analítica de tu WooCommerce funcionando pero si te encuentras en Europa, debes configurar tu banner de consentimiento (el mensajito de cookies) para cumplir con la legalidad antes de recopilar datos de usuarios.
Para esto, yo uso el plugin Complianz, que enviará a Google las preferencias del usuario mediante estas señales:
- analytics_storage, para las cookies de analítica.
- ad_storage, para las cookies publicitarias.
- ad_user_data, para enviar datos del usuario con fines publicitarios.
- ad_personalization, para la personalización de anuncios.
Esta configuración mediante la plantilla de Complianz requiere Complianz Premium. Si utilizas la versión gratuita y no aparecen las opciones que veremos, tendrás que actualizar el plugin o utilizar una implementación básica diferente.
1. Dejar que Complianz inserte Google Tag Manager
Hasta ahora hemos utilizado GTM4WP para instalar el contenedor y generar el dataLayer de WooCommerce. Al activar Consent Mode v2, yo dejaría que Complianz se encargue de insertar el contenedor.
Entra en Ajustes > Google Tag Manager > General y desactiva Container code ON/OFF. No desactives el plugin ni su integración de ecommerce, ya que GTM4WP debe seguir generando los eventos y datos de WooCommerce.
2. Configurar Google Tag Manager en Complianz
Entra en Complianz > Integraciones > Plugins y desactiva la integración automática con GTM4WP. Esto permite mostrar todas las opciones de Consent Mode dentro del asistente de Complianz.
Después, accede a Complianz > Asistente > Consentimiento > Estadísticas y selecciona:
Sí, y Google Tag Manager ejecuta este script.
En la siguiente pantalla introduce el ID de tu contenedor, que debe comenzar por GTM-. Activa también la opción que indica que utilizarás la plantilla de Tag Manager de Complianz.
4. Añadir la plantilla de Complianz en GTM
Abre Google Tag Manager y entra en Etiquetas > Nueva > Configuración de la etiqueta.
Pulsa en Descubrir más tipos de etiquetas en la galería de plantillas de la comunidad y busca Complianz. Añade la plantilla al espacio de trabajo y conserva sus valores predeterminados.
Asigna a esta etiqueta el activador:
Consent Initialization – All Pages
Este activador hace que Complianz establezca el estado inicial del consentimiento antes de que se ejecuten las demás etiquetas del contenedor.
6. Comprobar que Consent Mode funciona
Abre la vista previa de Google Tag Manager y visita la tienda en una ventana de incógnito.
Antes de interactuar con el banner, entra en la pestaña Consent de Tag Assistant. En un visitante europeo deberías encontrar analytics_storage, ad_storage, ad_user_data y ad_personalization con estado denegado.
Después acepta todas las cookies y comprueba que esos estados cambian a concedido. Si solo aceptas las cookies estadísticas, analytics_storage puede quedar concedido mientras los estados publicitarios continúan denegados.
También puedes realizar el proceso de compra y verificar que los eventos de WooCommerce siguen apareciendo en el dataLayer. Consent Mode controla cómo se procesan esos eventos, pero no debería impedir que GTM4WP genere view_item, add_to_cart, begin_checkout o purchase.
Cuando todo funcione, publica el contenedor y limpia la caché de WordPress, del servidor y del CDN. Si utilizas WP Rocket, LiteSpeed u otra herramienta que retrase JavaScript, excluye los scripts de Complianz cuando la optimización interfiera con las señales de consentimiento.
Si has llegado hasta aquí… ¡Apúntate a mi Newsletter y sigue aprendiendo cada semana sobre SEO!