Tutorial de Google Tag Manager para WordPress (u otro CMS)

¿Qué es Google Tag Manager?

Google Tag Manager (GTM a partir de ahora) es una herramienta gratuita que te permite gestionar y desplegar etiquetas web de marketing.

Estas etiquetas no son más que fragmentos de código o píxeles de seguimiento que se insertan en tu sitio web (o aplicación móvil) sin tener que modificar el código fuente de forma masiva.

¿Para qué sirve?

Google Tag Manager es clave para cualquier marketer que quiera tener un control del uso que le dan los visitantes a su sitio web, ampliando de forma sustancial la información que ofrece la suite de Analytics.

Usar Tag Manager para cualquier proyecto de consultoría SEO es clave para poder tener números de las interacciones en la web de un cliente (y para ver el crecimiento de dichas interacciones con el tiempo), y que dicho cliente pueda disponer de cifras de ROI concretas de lo que le está aportando el SEO a su negocio.

Rodanet.com

En este tutorial vamos a mostrarte cómo instalar y configurar Google Tag Manager en un sitio web basado en WordPress (ya que es uno de los CMS más populares y en el que es muy común trabajar SEO para WordPress) para que empieces a tener números y cifras concretas sobre las interacciones que los usuarios realizan en tu sitio web.

Pequeña introducción a Google Tag Manager

¿Cuándo apareció? Qué elementos básicos son clave para su funcionamiento?

¿Google Tag Manager es Google Analytics?

 

GTM es una herramienta independiente de GA, pero ambas herramientas se integran una con otra, y se complementan para dar la máxima información sobre el uso de un sitio web por parte de sus usuarios.

Google Analytics apareció en 2005, después de la compra de Google de la empresa Urchin Analytics y su software de analítica web, herramienta que Google utilizó para construir la actual suite de analítica web. Google Tag Manager apareció por primera vez en 2012, 7 años después de la aparición oficial de Google Analytics, como herramienta de gestión de etiquetas de rastreo.

Curiosidad: la herencia y ADN de la ya desaparecida “Urchin Analytics” sigue presente en el actual Google Analytics: todos los id de las cuentas empiezan por UA+código (UA de Urchin Analytics).

Rodanet.com

---

Elementos de Google Tag Manager

Hay tres elementos principales en Google Tag Manager:

1. Etiquetas: Fragmentos de Javascript insertados en el código web (también denominados píxeles de seguimiento)
2. Activadores: Son lo que le dice a GTM cuándo o cómo ejecutar una etiqueta
3. Variables: Información adicional que GTM puede necesitar para que la etiqueta y el activador funcionen de forma correcta

A continuación vamos a ver brevemente qué son cada uno de estos elementos.

¿Qué son las etiquetas?

Las etiquetas son fragmentos de código o píxeles de seguimiento de herramientas de terceros o del propio Google (como Analytics). Estas etiquetas indican a Google Tag Manager lo que debe hacer.

Algunos ejemplos de etiquetas que vas a encontrar disponibles por defecto en Google Tag Manager son:

• Código de seguimiento universal de Google Analytics (este será el más usado en este tutorial)
• Código de remarketing de Adwords
• Código de seguimiento de conversiones de Adwords
• Código de seguimiento de mapas de calor (como Hotjar, CrazyEgg, etc.)
• Píxeles de Facebook

¿Qué son los activadores?

Los activadores son una forma de activar o ejecutar la etiqueta que previamente has configurado. Los activadores le dicen a Tag Manager cuándo debe hacer lo que quieres que haga y activar las etiquetas:

• ¿Quieres activar las etiquetas cuando se visita una página?
• ¿Cuando el usuario hace clic en un enlace?
• ¿Cuando toca el botón de “llamar por teléfono”?

¿Qué son las variables?

Las variables son información adicional que GTM puede necesitar para que la etiqueta y su activación funcionen. Aquí tienes algunos ejemplos de diferentes variables:

• Clases de clic
• Target del clic
• URL concreta
• Evento

Hecha la introducción vamos a ver cómo puedes empezar a trackear acciones con Google Tag Manager en tu WordPress (o el de tu cliente).

---

Poner en marcha GTM en WordPress

Lo primero que se debe hacer es añadir el script de seguimiento en el sitio web. No obstante, es común que muchos clientes lo tengan instalado en el sitio pero no lo recuerden porque simplemente no le dan uso.

¿Puede ser que GTM ya esté instalado en el sitio?

Si estás trabajando para un cliente es muy importante comprobar que no tenga ya instalado GTM. En el caso de WordPress existen plugins o themes que ofrecen la opción de añadir el código de seguimiento de GTM, así que no es raro encontrar ya la etiqueta.

En cualquier caso, para ver en cuestión de segundos si el cliente tiene ya GTM abre cualquier página del sitio, haz un Ctrl + U (ver código fuente) y luego buscas en el código fuente usando un Ctrl + F la palabra “GTM”:

• Si no aparece, puedes seguir con el tutorial
• Si ya aparece, puedes saltar al paso de “Configuración”

Crea una cuenta en GTM

 

Lo más fácil para obtener un id de GTM es mediante tu cuenta de Google Analytics. Simplemente entra en GTM con tu cuenta de analytics siguiendo los siguientes pasos:

1. Entrar a GTM con la misma cuenta de correo que tienes para Analytics: https://www.google.com/intl/es/tagmanager/
2. Rellena todos los campos necesarios para la configuración inicial:
   • Nombre de la web
   • País (España para nuestro ejemplo)
   • Opción de dominio sin / ni protocolo
   • Opción web (no app)
3. Acepta los términos de uso y ya tendrás acceso al panel de GTM y un id para el sitio

Pegar etiqueta de GTM en WordPress (con o sin plugin)

Nosotros utilizamos el plugin de Google Tag Manager para WordPress, aunque puedes insertar las etiquetas de seguimiento modificando el archivo header.php de tu instalación de WordPress.

Sin plugin

Si quieres hacerlo manualmente puedes insertar el snippet de GTM modificando el archivo header.php e insertando el código en la parte de <head> y <body> según corresponda.

• Los dos snippets (para la parte de que debe ir en el <head> y <body>) las encontrarás en el panel de GTM en Admin > Instalar GTM
• En cuanto al archivo header.php, dicho archivo se encuentra por defecto en todos los WordPress en el directorio wp-content/themes/nombre-de-tu-theme/header.php

Presta atención a no romper el código y a las actualizaciones del theme (que pueden sobreescribir el archivo header.php y por tanto pueden borrar el snippet que insertes). Para estos casos seria recomendable que utilizases un tema hijo (child theme).

Rodanet.com

Si no quieres complicarte la vida o no tienes experiencia modificando archivos del core de WordPress inserta GTM en la web mediante plugin.

Con plugin

Para introducir la etiqueta de GTM en el código a través del plugin debes hacer:

1. Descarga, sube y activa el plugin GTM de Thomas Geiger
   • Haz clic aquí para descargar plugin GTM para WordPress
2. Configura el plugin que está en el panel de opciones de WordPress (izquierda de la pantalla) debes ir a Ajustes > Google Tag Manager
3. Inserta el id del proyecto en la casilla correspondiente
4. En las opciones del plugin selecciona “opción footer” y guarda los cambios.

Ya tenemos GTM listo para empezar a trackear acciones en nuestro WordPress. El siguiente paso ya será configurar GTM con las variables, activadores y etiquetas que correspondan para trackear las acciones que deseamos. Vamos a ello.

---

Configuración básica de GTM

Vamos a ver cómo configurar los tres elementos básicos de la herramienta (variables, activadores, etiquetas) para que GTM pueda trackear la actividad de los usuarios en nuestro sitio.

Los siguientes apartados se trabajan ya desde el panel de GTM.

Configuración de variables de clics

El primer paso es configurar las variables que queremos trackear. Empezaremos por los clics que recibimos en nuestro sitio web.

Para ello debemos ir a Variables > Configurar

 

Lo primero que haremos será configurar el tracking de diferentes tipos de clic. Para ello seleccionamos todas las que aparecen en el apartado «Clic» y dejamos el resto como está:

Una vez hecho esto podemos cerrar y crear nueva variable.

Creación de la variable para trackear dichos clics

Una vez tenemos las variables configuradas (apartado anterior) vamos a crear dichas variables usando de base las etiquetas de nuestra cuenta de Google Analytics.

Para ello vamos de nuevo al apartado variables y abajo a la derecha clicamos en «Nueva»:

 

A continuación los datos para crear dicha variable serán:

• Nombre: escribimos un nombre para identificar dicha variable, nosotros simplemente escribimos «Analytics»
• Clicamos en el icono de lápiz para editar las opciones de la variable
• Vamos a Utilidades > Configuración de Analytics y ponemos nuestro ID de Google Analytics, que empieza por UA (tipo UA-XXXXXX). Las demás opciones las dejamos igual

 

Una vez realizados todos los pasos ya tenemos la variable para el trackeo de clics configurada y creada.

Para Google Analytics 4

Una vez configuradas las variables, no hace falta crear una nueva variable para Analytics 4.

Añadiremos Google Analytics 4 en las etiquetas. Lo vemos a continuación en el apartado de etiquetas.

Configuración de los activadores con Analytics Universal y Analytics 4

Una vez configuradas las variables básicas de GTM, debemos definir los activadores, que como hemos visto en la introducción son las «reglas» que le dicen a GTM cuándo una acción definida en una variable se tiene en cuenta para el recuento (dicho de otro modo: cuándo se activa una variable). En este caso el proceso es exactamente igual para Analytics Universal y Analytics 4. 

Para crear un activador volveremos al menú principal de GTM, iremos al apartado Activadores > Nuevo.

Definiremos el nombre del activador según la acción a trackear. Para los siguientes ejemplos configuraremos varios activadores que harán un recuento de todos los botones que tengan en la URL:

• Un número de teléfono
• Un email
• Una localización de Google Maps (botones del tipo cómo llegar)
• Un formulario enviado
  • Con y sin página de «Gracias por Contactar»

Activador para botón/URL de «Llamar por Teléfono»

Definiremos el nombre del activador según la acción a trackear. Para este ejemplo configuraremos un activador que hará un recuento de todos los enlaces que tengan un número de teléfono en la URL (cuyo formato por tanto es el de tel:+número)

Pondremos el nombre «Teléfono» y definiremos el activador de la siguiente forma:

1. Tipo de activador: Clic – Sólo Enlaces
2. Marcamos «Esperar Etiquetas» y «Comprobar Validación«
3. Las condiciones para el activador son:
   • Page URL > coincide con la expresión regular .*
   • El activador se dispara en > Algunos clics en enlaces
   • Click URL > contiene tel:

Echa un vistazo a la imagen siguiente para entenderlo mejor:

Activador para botón/URL de «Enviar email»

La configuración para este tipo de botones o URL’s es exactamente la misma que en el caso del teléfono, (clic aquí para ver la configuración del activador) pero para trackear botones de correo electrónico se deberá cambiar lo que contiene la URL.

En la configuración para el activador para emails deberás sólo cambiar: Click URL > contiene > mailto:

Activador para botón/URL de «Cómo llegar»

La configuración para este tipo de botones o URL’s es exactamente la misma que en el caso del teléfono, (clic aquí para ver la configuración del activador) pero para trackear botones de cómo llegar que lleven a Google Maps se deberá cambiar lo que contiene la URL y adaptarlo.

En la configuración para el activador para URL’s que dirijan hacia Google Maps deberás sólo cambiar: Click URL > contiene > /maps/ *

* Nota: si el botón no dirige a Google Maps y lo hace a otro proveedor de Mapas como Apple Maps o Bing Maps, puede ser que en la URL no aparezca la base /maps/ y por tanto tendrás que adaptar la configuración del activador a dicha URL.

Activador para botón/URL de formulario SIN thank-you page

Los activadores para formularios difieren un poco en cuanto a configuración a los que hemos visto anteriormente (teléfono, email…).

Deberemos por tanto crear un nuevo activador pero esta vez configurarlo de forma diferente respecto a los cuatro anteriores:

1. Tipo de activador: Visibilidad del elemento
2. Método de selección: Selector de CSS

En el caso de los formularios de contacto, al enviar el formulario aparece un mensaje de confirmación tipo «Mensaje enviado. Muchas gracias». Este será el elemento que utilizaremos en este activador para medir las interacciones.

En la web donde queremos trackear los formularios de contacto:

1. Enviaremos un mensaje de prueba
2. Esperaremos a que aparezca la frase de confirmación
3. Clic derecho en dicha frase y clicamos en Inspeccionar
4. Dentro de la consola de inspección, de nuevo clic derecho sobre el elemento
5. Seleccionamos la opción Copy > Copy Selector

Una vez copiado el Selector de CSS volvemos de nuevo al panel de control de Tag Manager y continuamos con la configuración del activador.

Pegamos en el campo Selector de elementos el Selector CSS quitando todo lo que haya antes de la palabra “form”. Debería quedar siempre tipo: form > div… Así podremos trackear todos los formularios del sitio y no sólo uno concreto.

 

Deberemos seleccionar a continuación:

• Cuándo ejecutar el activador: Cada vez que un elemento aparezca en pantalla
• Porcentaje lo dejamos por defecto o 50%
• Marcamos Reaccionar a cambios del DOM para evitar perder trackeos por correcciones en el código fuente
• Dejamos el resto de opciones como están y guardamos los cambios

Activador para botón/URL de formulario CON thank-you page

Si contamos con un formulario que, en vez de mostrar el mensaje de confirmación de envío, redirige a una página de confirmación de envío, el activador de nuevo se deberá configurar de forma distinta: usaremos la página de confirmación como elemento que dispare el activador.

En las opciones del activador seleccionaremos Algunas páginas vistas y a continuación Page URL > Contiene > URL-de-la-pagina-en-cuestion

Echa un vistazo a la siguiente imagen para entenderlo mejor:

Configuración de las etiquetas

Como último paso, deberemos configurar las etiquetas para que la información recogida por las variables y los activadores se «vuelque» en ellas.

Para Google Analytics Universal

Importante:

1. Deberemos crear tantas etiquetas como activadores y variables hayamos puesto en funcionamiento.
2. El nombre de cada una de las etiquetas deberá ir acorde al activador y variable que corresponda.

Para Google Analytics 4

Añadimos una nueva etiqueta genérica llamada “Analytics 4”

En el tipo de etiqueta, elegimos “Google Analytics: Configuración de GA4”

En el ID de medición añadimos el código de seguimiento del cliente, que empezará por G-

Dejamos todo igual y pasamos a la parte de activación.

Aquí añadimos todos los activadores que hemos creado anteriormente (e-mail, teléfono, formularios, etc.)

Guardamos y debe quedar así la configuración:

Etiqueta para clics en link de «llamar por teléfono»

Al añadir una nueva etiqueta deberemos seleccionar la etiqueta de Google Analytics: Universal Analytics

 

La configuración de dicha etiqueta será de la siguiente forma:

• Tipo de seguimiento: Evento
• Categoría: Llamada
• Acción: Clic Llamada
• Etiqueta: clicar en el símbolo de «+» y seleccionar {{Page Path}}
• Hit sin interacción: dejamos por defecto en «Falso»
• En Configuración de Analytics: seleccionamos {{Analytics}}

Echa un vistazo a la siguiente imagen para entenderlo mejor:

Para terminar, debemos desplazarnos a la sección de abajo del todo, donde pone «Activación», clicamos en el lápiz para editar y seleccionamos el Activador que corresponda (en este caso, «Teléfono»).

Configuración etiqueta de teléfono para Google Analytics 4

Creamos una nueva etiqueta y le cambiamos el nombre a “teléfono”.
En la configuración, elegimos el tipo de etiqueta “Google Analytics: evento de GA4”

En el apartado de etiqueta de configuración seleccionamos la etiqueta genérica que hemos añadido anteriormente con todos los activadores llamada “Analytics 4”

A continuación, añadimos el nombre del evento, en este caso “click_phone”

Y añadimos los parámetros del evento. Será {{Page Path}} tanto para el nombre del parámetro como para el valor.

Una vez hecho esto, pasamos a la activación y añadimos el activador del teléfono creado anteriormente.

Guardamos la configuración y quedaría así:

Para las siguientes etiquetas, se deberán de realizar los mismos cambios para Google Analytics 4.

Etiqueta para clics en link de «enviar email»

Para la etiqueta de recuento de emails enviados deberemos seguir el mismo proceso de configuración de la etiqueta de teléfono realizando los cambios que correspondan:

• Nombre de la categoría: E-mail
• Acción: Clic e-mail
• Cambiar Activación por la de e-mail
• Para Google Analytics 4 repetimos el mismo proceso, solo cambiamos: nombre: click_email y cambiar activación por la de e-mail.

Etiqueta para clics en link de «Cómo llegar»

Para la etiqueta de recuento de clics en links hacia Google Maps deberemos seguir el mismo proceso de configuración de la etiqueta de teléfono realizando los cambios que correspondan:

• Nombre de la categoría: Cómo llegar
• Acción: Clic cómo llegar
• Cambiar Activación por la de cómo llegar
• Para Google Analytics 4 repetimos el mismo proceso, solo cambiamos: nombre: click_llegar y cambiar activación por la de como llegar.

Etiqueta para clics en formularios

Para la etiqueta de recuento de clics en links hacia Google Maps deberemos seguir el mismo proceso de configuración de la etiqueta de teléfono realizando los cambios que correspondan:

• Nombre de la categoría: Contacto
• Acción: Envío de formulario
• Cambiar Activación por la de formulario
• Para Google Analytics 4 repetimos el mismo proceso, solo cambiamos: nombre: contact_form y cambiar activación por la de formulario

---

Comprobaciones finales de funcionamiento de GTM

El último paso antes de pasar todo a entorno real será comprobar que todas las configuraciones anteriores se han realizado correctamente. Para ello, Google Tag Manager dispone de la opción de «Vista Previa», que nos permite saber si los eventos se están trackeando de forma efectiva.

Primero activamos la «Vista previa» en GTM:

Vamos a la web en cuestión en la misma sesión y debería de aparecer el resumen de actividad:

A continuación abrimos la cuenta de Google Analytics, (donde se puede ver el recuento de los eventos configurados en Tag Manager), y vamos a Tiempo Real > Eventos

De nuevo en la web del cliente en modo Vista Previa de GTM hacemos alguna de las acciones configuradas en Tag Manager (botones de llamada, email, lo que sea…) y comprobamos que la plataforma la detecta correctamente:

Dicha acción deberá aparecer también en Analytics, en Tiempo Real > Eventos. Deberemos clicar en el evento y comprobar que los nombres que les hemos dado a los eventos y la URL desde donde hemos hecho la acción son los correctos.

Como último paso deberemos realizar dicha comprobación para cada uno de los eventos que tenemos configurados.

Nota: al comprobar que los eventos quedan registrados en Analytics de forma correcta fíjate que no estés dentro de un evento, y te aparezca la acción pero no sea del evento que quieres comprobar. Dicho de otro modo: cierra la categoría del evento después de cada comprobación

Último paso: pasar GTM a entorno real

Si las comprobaciones anteriores han resultado exitosas, deberemos pasar GTM a entorno real de trabajo, lo que se denomina «Publicar».

Salimos de la vista previa:

Clicamos en «Enviar»:

 

Describimos los diferentes eventos que hemos configurado (nosotros utilizamos la fecha en el nombre y ponemos los eventos en el nombre) y clicamos en «Publicar»

Conclusiones finales y por qué usar GTM en tus proyectos ya

Analytics y Tag Manager son las dos herramientas básicas que debes poner en marcha en cualquier sitio web para saber como está funcionando un proyecto online. Pero la diferencia entre ambos es el tipo de información que te ofrecen.

Si ranquear una web fuese un partido de fútbol, Analytics sería el marcador y Tag Manager las estadísticas de pases y asistencias de cada uno de los jugadores. Analizar bien los datos de ambas herramientas te ayuda a hacer los cambios necesarios en tu equipo semana a semana y mes a mes, para que a largo plazo puedas ganar la liga.

Como hemos dicho al inicio de este tutorial, GTM te permite medir si los clientes están llegando a tu web objetivo (ya sea vía formulario de contacto, llamando…) con números 100% objetivos, como ocurrió en este caso de éxito de web que pasó de 50 a 700 leads al mes.

GTM te permite justificar tu trabajo en un proyecto propio o para cualquier cliente.