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.Etiqueta de Google AnalyticsLas 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.

  1. Mejora el rendimiento de los sitios web, ya que permite limitar el código que se ejecuta en cada momento.
  2. Aumenta la seguridad al programar. La vista previa permite detectar errores y conflictos.
  3. Aporta agilidad al trabajo de gestión gracias a que todas las etiquetas están en un único lugar.
  4. Otorga un control absoluto y detallado sobre todas las etiquetas de un sitio web.
  5. 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.Creando una cuenta de Google Tag Manager

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 instalar GTM en tu sitio web. Hay que insertar dos etiquetas en el código fuente.Etiquetas de instalación

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.

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

Para esta opción utiliza el plugin 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.Plugin DuracellTomi 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.Chrome extension Tag Assistant

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

GTM se puede usar a un nivel básico sin tener conocimientos técnicos, pero si sabes programar podrás hacer toda clase de virguerías.

Ahora vamos a echar un ojo a la interfaz de trabajo.
Interfaz GTM

  1. Área de trabajo. Nos conduce a la página principal de GTM, en la que estamos ahora.
  2. Versiones. Desde aquí podemos ver el historial de versiones, comprobar qué se cambió en cada una y restaurar versiones anteriores.
  3. 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.
  4. Nueva etiqueta. Dado que GTM es un gestor de etiquetas, este es el punto de partida.
  5. 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.
  6. Editando. Aquí encontramos un resumen de los elementos que estamos modificando ahora.
  7. 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.
  8. Cambios en el área de trabajo. Esta sección muestra las novedades de nuestro espacio de trabajo respecto al contenedor que está publicado.
  9. Historial de actividades. Aquí se registra cada cambio en el espacio de trabajo.
  10. 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.
  11. Código de contenedor. Al hacer clic accederemos al código de instalación de GTM.
  12. 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.
  13. 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

  1. Pulsa en Nueva Etiqueta. Llámala Universal Analytics. Haz clic en «Configuración de Etiqueta» y elige Google Analytics – Universal Analytics.Nueva etiqueta
  2. Elige el tipo de seguimiento Página vista. En el desplegable «Configuración de Google Analytics» haz clic en Nueva Variable. Variable de Universal Analytics
  3. 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. ID seguimiento UA
  4. Pega el ID en la casilla inferior y deja el dominio de cookie en auto. Guarda. Variable de seguimiento
  5. Ahora haz clic en Activación, elige All Pages y guarda. El resultado final debe ser como este. Etiqueta de Universal Analytics
  6. 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.Consola de depuracion

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.

  1. 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. Crear nueva variable
  2. 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. Nuevos valores de variable

¡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 (Opcional) – Insertar las cookies de Analytics cuando el usuario da permiso

Si has aplicado el ajuste anterior ya estás cumpliendo el RGPD con Analytics. Por tanto, este segundo ajuste es opcional. Aplicarlo hará que tu web se ajuste más al RGPD, pero va a impactar negativamente en tus informes de analítica.

Bien, 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. Sí, este ajuste es muy legal, pero también muy «arriesgado».

Si quieres aplicarlo te cuento cómo.

Instalar un plugin de aviso de cookies

Recomiendo el plugin Cookie notice for GDPR porque es gratuito y se actualiza regularmente. Puedes instalarlo yendo a Plugins > Añadir nuevo y utilizando el buscador.

Una vez activado, configurarlo es realmente sencillo. Te dejo una captura de pantalla.Configurar plugin Cookie Notice for GPRD

Lo más importante es activar las opciones de rechazar cookies, revocar consentimiento (manual) y la recarga de la página cuando se acepten las cookies.

Configurar la inserción de cookies en GTM

  1. Vamos a Variables > Nueva. La llamamos cookie_notice_accepted. En Configuración de la variable elegimos «Cookie de origen» y en nombre de la cookie ponemos Variable cookie_notice_accepted. Guardamos.Nueva variable de cookie de origen
  2. Ahora vamos a Activadores > Nuevo. A este activador lo llamaremos cookie_notice_accepted es true. 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 cookie_notice_accepted marcando «Es igual a» y en la casilla escribimos true.Activador con Cookie Notice for GRPD

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 cookie_notice_accepted es true. Ya puedes utilizar la vista previa y publicar. Etiqueta de Universal Analytics adaptada a Cookie Notice for GRPD

La explicación: ¿qué hemos hecho?

Hemos creado una variable de cookie de origen aludiendo a cookie_notice_accepted, una cookie que inserta el plugin 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 cookie_notice_accepted tenga el valor true (sucede al aceptar el aviso).

Por último, hemos editado la etiqueta de Página Vista de Google Analytics para que solo se dispare cuando cookie_notice_accepted tenga el valor true.

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:
    • cookie_notice_accepted 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 [cookies_revoke] para generar un botón de revocar consentimiento.

Limpia tus informes de Analytics del parámetro cn-reloaded

Cuando el usuario acepta el aviso de cookies, se recarga la página en la que está añadiendo a su URL el parámetro ?cn-reloaded=1. Esto puede resultar molesto a la hora de revisar los informes de Analytics, pero tiene fácil solución.

En la sección Administrar (icono de rueda dentada del menú izquierdo), ve a Vista > Configuración de la vista. En Excluir parámetros de consulta de URL escribe: cn-reloaded. Eso es todo.

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:

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 tu Google Tag Manager las etiquetas de los servicios más populares:

¡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 gusta lo que has leído?

Apúntate al newsletter y recibe mis mejores contenidos sobre marketing digital y comunicación



He leído y acepto la política de privacidad

 

Responsable: José Luis Culebras Pérez. Finalidad: dar de alta al usuario en el newsletter y enviarle por correo electrónico novedades y contenidos sobre las temáticas de este sitio web. Legitimación: consentimiento del interesado. Si no acepta la política de privacidad, el usuario no será dado de alta. Destinatarios: MailChimp (The Rocket Science Group). Derechos: el usuario puede darse de baja en cualquier correo utilizando el enlace situado al pie, o bien ejercer sus derechos de acceso, rectificación, limitación o supresión de datos en hola@joseluisculebras.com, o presentar una reclamación ante una autoridad de control.