Este tutorial está diseñado para usuarios que quieren conocer el funcionamiento de Google Tag Manager (GTM) y no son programadores. Si sigues leyendo aprenderás los fundamentos de esta herramienta, cómo instalarla en WordPress y cómo utilizarla para cumplir el Reglamento General de Protección de Datos (RGPD) en Google Analytics.
¿Qué es y para qué sirve Google Tag Manager?
El administrador de etiquetas de Google. Está en desarrollo desde 2012 y es gratuito.
Y por si te lo estás preguntando, un tag o etiqueta es un fragmento de código que se inserta en el código fuente de una página. Algo como esto.
Las etiquetas permiten conectar un sitio web con diferentes tecnologías (analítica, publicidad, mapas de calor, seguimiento de conversiones…). ¿Notas ese sutil aroma a marketing?
¿Y para qué sirve Google Tag Manager? Pues para editar todas las etiquetas de un sitio web de una forma segura y desde un único lugar.
Si tienes una web personal, la única etiqueta que utilizarás será la de Google Analytics. Pero los ecommerces y las webs corporativas hacen uso de tecnologías y etiquetas más complejas (píxeles de redes sociales, remarketing, tests A/B, mapas de calor…).
Lo “tradicional” es insertar cada etiqueta en el código fuente de la página, normalmente dentro del <head> o del <body>. El problema de este procedimiento estándar es que terminas con muchos bloques de código aparatosos y complicados de gestionar.
Lo que GTM nos propone es insertar una sola etiqueta en nuestra web. Esta etiqueta es un “contenedor flexible” que albergará las etiquetas de todos los servicios que necesitemos. Igual esto se entiende mejor con un ejemplo.
Imagina que tu web es un cucurucho de barquillo, como el de los helados. Las bolas de helado son las etiquetas de los servicios que utilizas: Google Analytics es de chocolate, el píxel de Facebook es de fresa… Cuantos más servicios usas, más pisos tiene tu helado y más se parece a un rascacielos.
Cuando usas GTM, tu cucurucho pasa a tener una sola bola. Esa bola no tiene sabor, pero cuando a ti se te antoje, se convertirá en la bola de chocolate de Google Analytics, en la de fresa del píxel de Facebook… El helado tendrá todos los sabores que quieras concentrados en una única bola, y así no tendrás que subirte a una escalera para comértelo.
Menos mal que nadie ha inventado un helado así, porque tendríamos todos el azúcar por las nubes.
Ventajas de usar GTM
Termínate el helado, porque a partir de ahora volvemos a hablar de páginas web. ¿Por qué se habla tanto de GTM? ¿Cuáles son las ventajas de Google Tag Manager? Aquí te dejo 5.
- Mejora el rendimiento de los sitios web, ya que permite limitar el código que se ejecuta en cada momento.
- Aumenta la seguridad al programar. La vista previa permite detectar errores y conflictos.
- Aporta agilidad al trabajo de gestión gracias a que todas las etiquetas están en un único lugar.
- Otorga un control absoluto y detallado sobre todas las etiquetas de un sitio web.
- Ofrece comodidad a la hora implementar otros productos de Google (Ads, Analytics, Optimize…).
En definitiva, GTM es una herramienta tan práctica y extendida que yo la considero una competencia digital.
Muchos de tus clientes ya la usan, así que no estaría de más que supieses manejarla a un nivel básico. Y para eso, nada mejor que implementarla en tu sitio web personal. ¡Vamos con ello!
Cómo instalar Google Tag Manager en WordPress
Empieza yendo a la web oficial y, en la parte superior derecha, haz clic en Iniciar sesión. Entra con tu cuenta de Google.
Ahora estás en el área de trabajo. Una cuenta de GTM funciona con una jerarquía similar a la de Analytics: tienes una cuenta y un contenedor. Pulsa arriba a la derecha en Crear Cuenta e introduce un nombre y un país.
Después asigna un nombre al contenedor y elige utilizarlo en Sitio web. Si tienes una versión AMP, tendrás que crear otro contenedor y gestionarlo por separado.
A continuación aparecen las instrucciones para configurar Google Tag Manager en tu sitio web. Hay que insertar dos etiquetas en el código fuente.
Si cierras accidentalmente esta ventana, podrás volver a ella haciendo clic en la parte superior del área de trabajo, en Administrador > Nombre del contenedor > Instalar Google Tag Manager.
Puedes insertar el código de GTM de forma manual o mediante un plugin. Siempre que puedas, hazlo a mano.
Instalación manual
Antes de tocar nada, haz una copia del archivo que vas a editar. Lo normal es que solo tengas que tocar header.php, pero tu tema puede cambiar esto. Tienes dos formas de llegar a este archivo.
- Desde el panel de administración de WordPress. En el menú lateral ve a Apariencia > Editor . A continuación, en el menú lateral derecho selecciona header.php. Copia el contenido en una aplicación de texto como el bloc de notas.
- Vía FTP. Utiliza un cliente como FileZilla o la aplicación web que incluya tu hosting. La ruta del archivo suele ser /wp-content/themes/nombre-del-tema/header.php. Si usas un tema child (hijo), edita su header.php y no toques el tema padre.
En este punto borra las etiquetas o desactiva los plugins de los servicios que ahora vas a gestionar mediante GTM, como Google Analytics.
Ahora sí, edita header.php y pega una etiqueta tan cerca de <head> como puedas y otra después de <body>.
Puede producirse algún error si las etiquetas de GTM interfieren con el código que incluye tu tema. En ese caso, restaura y prueba a colocar las etiquetas más arriba o abajo.
Instalación mediante plugin
Si buscas un plugin de Google Tag Manager para WordPress, utiliza el de DuracellTomi. Puedes instalarlo desde tu WordPress, en Plugins > Añadir nuevo.
Una vez activado, en el menú lateral de WordPress ve a Ajustes > Google Tag Manager. En la pestaña General solo tienes que introducir tu ID de Google Tag Manager.
Este ID tiene una estructura GTM-XXXXXXX. Lo encontrarás yendo a Administrador > Nombre del contenedor > Instalar Tag Manager.
El plugin ofrece diferentes opciones para insertar el código. Si no quieres tocar nada más, deja marcada la primera opción.
Recuerda borrar las etiquetas o desactivar los plugins de los servicios que ahora vas a gestionar a través de Tag Manager, como por ejemplo Analytics.
Comprobar si la instalación se ha realizado correctamente
Para esta tarea utiliza la extensión de Chrome Tag Assistant, que sirve para detectar etiquetas de productos de Google.
Tras instalarla, ve a tu sitio web y pulsa en el icono de la extensión. En la ventana, pulsa Enable y luego recarga tu página. Vuelve a pulsar en el icono de Tag Assistant y verás nueva información.
Tag Assistant utiliza un código de colores para indicar el estado de las etiquetas que ha encontrado:
- Verde para las etiquetas que funcionan.
- Azul para las etiquetas que funcionan, pero cuya implementación se puede mejorar.
- Amarillo para las etiquetas que tienen errores leves de implementación.
- Rojo para las etiquetas con errores graves de implementación.
En este punto de la instalación nos vale con que Tag Assistant detecte la etiqueta de GTM. No importa si sale roja, porque cambiará cuando configuremos la herramienta. Si Tag Assistant no detecta ningún contenedor de GTM, repasa la instalación.
¿Está todo bien? Pues es el momento de pasar al siguiente capítulo de esta guía de Google Tag Manager.
Conceptos básicos e interfaz
Antes de trastear con la herramienta es necesario repasar la terminología básica.
- Contenedor: cuando instalamos GTM insertamos un contenedor en nuestra web y lo personalizamos con una serie de etiquetas, activadores y variables. Podemos cambiar el contenido cuantas veces queramos, pero el contenedor siempre será el mismo. Por eso en GTM se habla de “versiones del contenedor”.
- Etiqueta: el fragmento de código que utilizamos para conectar nuestra web con un servicio de terceros (Analytics, Ads, CrazyEgg, Twitter…). Añadir una etiqueta a GTM es algo más trabajoso que simplemente pegar el código, pero merece la pena.
- Activador: la condición que hace que una etiqueta funcione. Un ejemplo: activa la etiqueta de Analytics cuando el contenido de la página sea visible para el usuario.
- Variable: una porción de datos que se puede relacionar con un activador o una etiqueta.
- Publicar: trasladar los cambios al contenedor. Los cambios publicados interactúan con todos los visitantes de nuestra web.
- Versión: los cambios publicados se agrupan en versiones numeradas automáticamente. Podemos navegar entre versiones y, si la cagamos, restaurar una versión anterior (¡gracias, Google!).
Muchos se preguntan cómo usar Google Tag Manager, y lo cierto es que si entiendes los conceptos de arriba ya puedes hacer muchas cosas. Naturalmente si sabes programar podrás hacer virguerías a otro nivel.
Ahora vamos a echar un ojo a la interfaz de trabajo.
- Área de trabajo. Nos conduce a la página principal de GTM, en la que estamos ahora.
- Versiones. Desde aquí podemos ver el historial de versiones, comprobar qué se cambió en cada una y restaurar versiones anteriores.
- Administrador. Esta sección es para configurar la cuenta de GTM y dar permisos a otros usuarios. También tenemos la valiosa opción de importar la configuración de otros contenedores o exportar la nuestra.
- Nueva etiqueta. Dado que GTM es un gestor de etiquetas, este es el punto de partida.
- Descripción. Este apartado es útil cuando tenemos más de un espacio de trabajo. Si vamos a tener diferentes programadores trabajando en paralelo en etiquetas distintas, crearemos un espacio de trabajo para cada uno y los identificaremos con una descripción.
- Editando. Aquí encontramos un resumen de los elementos que estamos modificando ahora.
- Versión del contenedor. Ahora mismo aparece como “no publicado”. A medida que hagamos cambios y los publiquemos, GTM asignará a nuestro contenedor un número de versión.
- Cambios en el área de trabajo. Esta sección muestra las novedades de nuestro espacio de trabajo respecto al contenedor que está publicado.
- Historial de actividades. Aquí se registra cada cambio en el espacio de trabajo.
- Menú lateral. Nos permite acceder a las principales secciones de GTM. También tenemos un buscador para localizar elementos con más rapidez, y la opción de navegar entre los diferentes espacios de trabajo.
- Código de contenedor. Al hacer clic accederemos al código de instalación de GTM.
- Vista previa. Utilizaremos esta opción antes de publicar cambios. Al activar la vista previa y visitar nuestra web, se abrirá una ventana en la que podremos ver qué etiquetas se activan. Si algo no funciona en la vista previa, tampoco funcionará tras publicarlo… así que no te líes a publicar versiones e investiga qué puede estar fallando.
- Enviar publica en el contenedor los cambios del espacio de trabajo (nuevas etiquetas, disparadores, variables, etc.).
Ahora que conocemos la interfaz, ha llegado el momento de dar los primeros pasos.
Instalar Google Analytics en WordPress con Google Tag Manager
- Pulsa en Nueva Etiqueta. Llámala Universal Analytics. Haz clic en «Configuración de Etiqueta» y elige Google Analytics – Universal Analytics.
- Elige el tipo de seguimiento Página vista. En el desplegable «Configuración de Google Analytics» haz clic en Nueva Variable.
- Llama a esta nueva variable «ID Seguimiento Universal Analytics». Vas a necesitar este ID y lo encontrarás en tu cuenta de Analytics, haciendo clic en Administrar (icono de la rueda dentada) > Información > Código de seguimiento.
- Pega el ID en la casilla inferior y deja el dominio de cookie en auto. Guarda.
- Ahora haz clic en Activación, elige All Pages y guarda. El resultado final debe ser como este.
- Para verificar la etiqueta, activa la vista previa y entra a tu web utilizando otra pestaña del navegador. Deberías ver la etiqueta en la ventana inferior, en la sección Tags Fired On This Page. ¡Enhorabuena! Ya puedes publicar.
La explicación: ¿qué hemos hecho?
Hemos añadido una etiqueta (Página Vista de Universal Analytics) con una variable (nuestro ID, para que los datos vayan a nuestra cuenta) y un activador (la etiqueta se disparará cuando la página sea visible).
¿Hemos terminado ya?
Aunque Analytics ya funciona en tu sitio web, aún queda trabajo por hacer. A continuación vamos a ver cómo adaptar Analytics al Reglamento General de Protección de Datos (el famoso RGPD, o GRPD en inglés).
Adaptar Google Analytics al RGPD
Para utilizar Google Analytics con todas las de la ley (y nunca mejor dicho) hay que hacer unos ajustes en la herramienta y en nuestra propia web. En esta guía de Google Tag Manager te comparto dos ajustes, pero con aplicar el primero ya es suficiente. Para no aburrirte con tecnicismos, te lo cuento sobre la marcha.
Ajuste 1 – Anonimizar la IP
Por si te lo estás preguntando, una dirección IP es una secuencia numérica y única que identifica a un dispositivo (ordenador, smartphone, tablet…) conectado a Internet. Tiene un formato similar a este: 78.232.249.190. Cuando un usuario llega a tu web, Google Analytics recopila su IP (aunque no la muestra directamente en tus informes).
Pues bien, desde el 25 de mayo de 2018 las direcciones IP se consideran datos personales. Al ser secuencias numéricas únicas pueden identificar no solo un dispositivo, sino indirectamente a la persona que lo utiliza. O al menos eso plantea la ley. En cualquier caso, un webmaster cuya herramienta de analítica web recopilase estos datos personales tendría que cambiar la forma en que se insertan sus cookies.
Esto puede ser un dolor de cabeza, pero podemos evitarlo y ser 100% legales anonimizando las direcciones IP que recopila Google Analytics. Esto es tan sencillo como configurar la herramienta para que elimine la última parte de cada dirección IP que recopila.
Así, 78.232.249.190 queda registrada como 78.232.249.0: ya no es una dirección completa, no puede identificar a un dispositivo y por tanto no es un dato personal. Y tú, como webmaster, te ahorras el trabajo de cambiar la forma en que insertas tus cookies.
Vamos a ver cómo hacer este ajuste.
- Dentro de Google Tag Manager, usa el menú lateral para ir a Variables y pulsa sobre la que has creado antes: ID Seguimiento Universal Analytics.
- En la caja superior, Configuración de la variable, haz clic en el icono del lápiz (esquina superior derecha). Después ve abajo a Más opciones > Campos para configurar > Añadir campo. Nombre del campo: anonymizeIp y valor: true. Guarda los cambios y publica.
¡Listo! Recuerda que, como ahora todas las IP están anonimizadas, los filtros de dirección IP que aplicases en Google Analytics ya no funcionarán.
Ajuste 2 – Insertar las cookies de Analytics cuando el usuario da permiso
Este ajuste consiste en no insertar las cookies de Google Analytics hasta que el usuario acepte el aviso de cookies. Esperamos hasta obtener su consentimiento explícito. Y si no nos lo da… no le insertamos las cookies. Por tanto, su sesión no existe y no obtenemos ningún dato. Es duro, pero es lo que marca la ley.
Veamos cómo se hace paso a paso.
Instalar un plugin de aviso de cookies que bloquee Analytics
Yo utilizo WeePie Cookie Allow, que es de pago pero cumple perfectamente.
Una vez activado, configurarlo es realmente sencillo. Te dejo una captura de pantalla.
Elegimos mostrar un botón de rechazar y que la página se recargue una vez que obtengamos el consentimiento. Si no marcamos esta última opción no haremos el seguimiento del usuario desde la página en la que se aceptó el aviso.
Ahora nos vamos a Tag Manager para vincular la aceptación de este aviso a la inserción de la etiqueta de Analytics.
Configurar la inserción de cookies en GTM
- Vamos a Variables > Nueva. La llamamos wpca_consent. En Configuración de la variable elegimos «Cookie de origen» y en nombre de la cookie ponemos Variable wpca_consent. Guardamos.
- Ahora vamos a Activadores > Nuevo. A este activador lo llamaremos WPCA Consent Igual a 1. Hacemos clic en el círculo gris para editar el activador y de la lista elegimos Página vista > Algunas páginas vistas. En el desplegable seleccionamos wpca_consent marcando «Es igual a» y en la casilla escribimos 1. Esta es la cookie que se nos inserta cuando aceptamos el aviso.
En último lugar vamos a la Etiqueta de Universal Analytics y, en la caja Activación, hacemos clic en el icono de lápiz. Borramos el activador «All Pages» haciendo clic en -. Pulsamos para añadir un nuevo activador y seleccionamos WPCA Consent Igual a 1. Ya puedes utilizar la vista previa y publicar.
La explicación: ¿qué hemos hecho?
Hemos creado una variable de cookie de origen aludiendo a wpca_consent, una cookie que inserta el plugin WeePie Cookie Allow cuando el usuario acepta o rechaza el aviso.
Después hemos convertido esa variable en un activador: hemos dicho que «algo pase» cuando la cookie wpca_consent tenga el valor 1 (sucede al aceptar el aviso).
Por último, hemos editado la etiqueta de Página Vista de Google Analytics para que solo se dispare cuando wpca_consent tenga el valor 1.
Actualiza tu política de cookies
Ahora que Analytics ya cumple el RGPD, hay algunas cosas que debes modificar en tu página de política de cookies.
- Actualiza el texto para avisar a tus usuarios de las nuevas cookies que inserta tu sitio web:
- wpca_consent caduca según la validez que hayas configurado en el plugin y sirve para recordar si el usuario aceptó o no el consentimiento
- _gat_UA-XXXXXXXX (tu código de seguimiento de Universal Analytics) caduca en 1 minuto y sirve para limitar el porcentaje de solicitudes.
- Inserta en algún lugar el shortcode para generar un botón de revocar consentimiento. Este shortcode, llamado Reset consent button, lo encontrarás en la sección «Content» de las opciones del plugin.
Recuerda que para adaptar tu sitio web al RGPD debes cumplir con más requisitos, como adaptar los textos legales.
Ya que te has tomado la molestia de implementar Analytics correcta y legalmente, ¿por qué no exprimir al máximo la herramienta? Pásate por mi manual de etiquetado.
Soporte oficial de Google Tag Manager
Si aparecen problemas, consulta estas fuentes:
- Centro de ayuda de Google Tag Manager. Contiene artículos sobre la instalación y los problemas más frecuentes.
Implementar etiquetas de otros servicios
GTM es compatible con toda clase de etiquetas: las únicas limitaciones serán nuestros conocimientos de programación. En estos enlaces encontrarás las instrucciones oficiales para configurar en Google Tag Manager las etiquetas de los servicios más populares:
- Google Ads: seguimiento de conversiones
- Google Optimize
- Píxel de Facebook
- Seguimiento de conversiones en Twitter (ve al apartado «Herramientas de seguimiento de terceros»)
- Insight Tag de LinkedIn
¡Y eso es todo!
Confío en que has llegado hasta el final de mi tutorial de Google Tag Manager porque vas a ponerte (o ya te has puesto) manos a la obra con esta herramienta Pero sobre todo, espero que te hayas hecho una idea de las posibilidades que puede brindar a tus clientes.
No hay excusas para no integrarlo en tu sitio web personal y toquetear un poco (¡siempre usando Vista Previa!). Te invito a hacerlo y a contarme qué tal te fue.
Y recuerda: GTM es una aplicación versátil y potente, pero en manos de un programador se convierte en algo revolucionario.
¿Te ha gustado el artículo?
Apúntate al newsletter y recibe mis mejores contenidos sobre marketing digital y comunicación
Muy buen contenido, estoy empezando a utilizar el Tag Manager, así que seguiré tus recomendaciones para hacerlo todo bien.
¡Gracias por visitar y comentar, Agus! GTM es una joya: de esta herramienta pueden salir mil contenidos de 10/10. Seguiremos explorando :).
Gracias por el tutorial.
Me guardo tu web para estar atento a nuevas entradas.
Me alegro de que te haya resultado útil. Ya tengo planeados nuevos contenidos, así que no tendrás que esperar mucho.
Hola, José Luis.
Muchas gracias por este extraordinario tutorial.
Si es posible, me gustaría consultarte un par de dudas. Espero disculpes si pecan de demasiado simples u obvias; acabo de llegar a este universo wordpress y mis conocimientos son muy básicos.
1. Para la instalación manual de GTM, de entrada hay que copiar y pegar un código en todas las páginas del sitio web. Mi pregunta es: ¿Exactamente en TODAS las páginas? ¿También en las de aviso legal, política de cookies, privacidad, etc.? ¿Y qué pasa en el resto del contenido que no es exactamente una página, como, por ejemplo, las entradas de un blog?
2. En mi web instalé el ID de Google Analytics no manualmente, sino con el plugin GA Google Analytics. ¿He de borrar ese plugin, ahora que ese ID pasa a alojarse directamente dentro de GTM?
Muchas gracias de nuevo por tu valiosa información. Enhorabuena por la profesionalidad, claridad y calidad de tu sitio web.
Saludos.
¡Hola Guillermo!
Cuando empiezas con WordPress, todo son dudas. Pero ya verás que es una plataforma muy sencilla y en poco tiempo te harás con ella.
Paso a responder tus preguntas.
1- Para que GTM funcione correctamente en un sitio web WordPress, su código debe estar insertado en todas las páginas. Esto es muy sencillo de conseguir, ya que WordPress genera el contenido de cada página de forma dinámica, extrayendo información de una serie de archivos. Si insertas el código de GTM en uno de esos archivos, el header.php, ya tendrás Google Tag Manager funcionando en todo tu sitio web (incluyendo todas las páginas y entradas).
2- Ya que vas a gestionar Google Analytics a través de Tag Manager, desactiva el plugin que utilizabas. Cuando hayas verificado que Analytics funciona bien mediante GTM, borra ese plugin.
Gracias muyy buen contenido, espero nuevas publicaciones tuyas!!
Me alegro de que te haya gustado, Frida. Seguiré publicando contenidos como este, puedes estar tranquila.
Buenos días José Luis,
Enhorabuena por el post. Es perfecto, bien explicado y con imágenes claras y descriptivas.
En mi caso el plugin de Cookies que uso es el GDPR Cookie consent, el cual usa dos cookies en lugar de una, pero era tan explicativo tu tutorial que he podido adaptar tu método sin problema.
Una pregunta, si no es mucho pedir, me gustaría saber por qué en el activador marcas algunas páginas vistas en lugar de todas las páginas vistas.
De nuevo enhorabuena, has sido de mucha ayuda 🙂
¡Gracias por dejar un comentario, Sergio! Me alegro de que la guía te haya servido para experimentar con otros plugins. El activador de Página Vista de Universal Analytics está configurado con «Algunas páginas vistas» para condicionarlo a la cookie de origen. Si lo dejamos como «Todas las páginas vistas» entonces Analytics salta siempre y no vale de nada todo el trabajo previo.
Muy buena tu explicación conceptual de inicio !
¡Gracias!