▷ Google Tag Manager 2020: Tutorial de iniciación
Este tutorial está diseñado para usuarios que quieren conocer el funcionamiento de Google Tag Manager (GTM) y no son programadores. Si prosigues leyendo aprenderás los fundamentos de esta herramienta, cómo instalarla en WP y cómo emplearla para cumplir el Reglamento General de Protección de Datos (RGPD) en Google Analytics.
Índice del artículo
¿Qué es y para qué sirve Google Tag Mánager?
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 bien etiqueta es un
fragmento de códigoque se introduce en el código fuente de una página. Algo como esto.
Las etiquetas dejan conectar un sitio 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 Mánager? Pues para editar todas y cada una de 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 Analytics. Mas 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 ostentosos y complicados de administrar.
Lo que GTM nos plantea es
insertar una sola etiqueta en nuestra web. Esta etiqueta es un “contenedor flexible” que albergará las etiquetas de todos y cada uno de los servicios que precisemos. Igual esto se entiende mejor con un caso.
Imagina que tu página web es un cucurucho de barquillo, como el de los helados. Las bolas de helado son las etiquetas de los servicios que utilizas: Analytics es de chocolate, el píxel de Fb es de fresa… Cuantos más servicios empleas, más pisos tiene tu helado y más se parece a un rascacielos.
Cuando empleas GTM, tu cucurucho pasa a tener una sola bola. Esa bola no tiene sabor, mas 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 y cada uno de 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í, tiendas virtuales >tendríamos todos el azúcar por las nubes.
Ventajas de usar GTM
Termínate el helado, por el hecho de que a partir de ahora volvemos a charlar de páginas web. ¿Por qué se habla tanto de GTM? ¿Cuáles son los beneficios de Google Tag Mánager? Aquí te dejo cinco.
- Mejora el
rendimientode los sitios web, puesto que permite limitar el código que se ejecuta en todos y cada momento. - Aumenta la
seguridadal programar. La vista previa permite advertir fallos y conflictos. - Aporta
agilidadal trabajo de gestión merced a que todas las etiquetas están en un único lugar. - Otorga un
controlabsoluto y detallado sobre todas y cada una de las etiquetas de un sitio. - Ofrece
comodidada la hora incorporar 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 emplean, así que no estaría de más que supieses manejarla a un nivel básico. Y para eso, nada mejor que incorporarla en tu sitio web personal. ¡Vamos con ello!
Cómo instalar Google Tag Mánager en WordPress
Empieza yendo a lay, 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 Cuentae introduce un nombre y un país.
Después asigna un nombre al contenedor y escoge emplearlo en Sitio.
Si tienes una versión AMP, tendrás que crear otro contenedor y administrarlo por separado.
A continuación aparecen las instrucciones para instalar GTM en tu sitio.
Hay que introducir 2 etiquetasen el código fuente.
Si cierras accidentariamente esta ventana, podrás regresar a ella haciendo clic en la parte superior del área de trabajo, en Administrador > Nombre del contenedor > Instalar Google Tag Mánager.
Puedes insertar el código de GTM de forma manual o bien mediante un complemento. Toda vez que puedas, hazlo a mano.
Instalación manual
Antes de tocar nada, haz una copia del fichero que vas a editar. Lo normal es que solo debas tocar header.php, pero tu tema puede cambiar esto. Tienes 2 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. Usa un usuario como FileZilla o bien la aplicación web que incluya tu alojamiento web. La ruta del archivo suele ser /wp-content/themes/nombre-del-tema/header.php. Si empleas 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 administrar mediante GTM, como Analytics.
Ahora sí, edita header.php y queja 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 poner las etiquetas más arriba o bien abajo.
Para esta opción usa. Puedes instalarlo desde tu WordPress, en Complementos > Añadir nuevo.
Una vez activado, en el menú lateral de WordPress ve a Ajustes > Google Tag Mánager. 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 deseas tocar nada más, deja marcada la primera opción.
Recuerda borrar las etiquetas o desactivar los complementos de los servicios que ahora vas a administrar a través de Tag Manager, como por servirnos de un ejemplo Analytics.
Comprobar si la instalación se ha efectuado correctamente
Para esta tarea utiliza la extensión de Google Chrome, que sirve para detectar etiquetas de productos de Google.
Tras instalarla, ve a tu sitio y pulsa en el icono de la extensión. desarrollo web magento , pulsa Enable y después recarga tu página. Vuelve a pulsar en el icono de Tag Assistant y verás nueva información.
Tag Assistant usa un código de colores para indicar el estado de las etiquetas que ha encontrado:
- Verde para las etiquetas que marchan.
- Azul para las etiquetas que marchan, mas cuya implementación se puede mejorar.
- Amarillo para las etiquetas que tienen errores leves de implementación.
- Rojo para las etiquetas con fallos graves de implementación.
En este punto de la instalación
nos vale con que Tag Assistant advierta la etiqueta de GTM. No importa si sale roja, por el hecho de que cambiará cuando configuremos la herramienta. Si Tag Assistant no detecta ningún contenedor de GTM, repasa la instalación.
¿Está todo bien? Puesto que es el momento de pasar al siguiente capítulo de esta guía de Google Tag Mánager.
Conceptos básicos e interfaz
Antes de trastear con la herramienta es necesario revisar la terminología básica.
Contenedor:cuando instalamos GTM introducimos un contenedor en nuestra web y lo personalizamos con una serie de etiquetas, activadores y variables. Podemos cambiar el contenido cuantas veces deseemos, pero el contenedor siempre y en toda circunstancia será exactamente el mismo. Por eso en GTM se habla de “versiones del contenedor”.
Etiqueta:el fragmento de código que empleamos para conectar nuestra página web con un servicio de terceros (Analytics, Ads, CrazyEgg, Twitter…). Añadir una etiqueta a GTM es algo más laborioso que sencillamente pegar el código, mas 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 perceptible para el usuario.
Variable:una porción de datos que se puede relacionar con un activador o bien una etiqueta.
Publicar:trasladar los cambios al contenedor. Los cambios publicados interactúan con todos y cada uno de 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 utilizar a un nivel básico sin tener conocimientos técnicos, mas si sabes programar podrás hacer toda clase de virguerías.
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 bien exportar la nuestra.
Nueva etiqueta. Puesto que GTM es un gestor de etiquetas, este es el punto de inicio.
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 diferentes, vamos a crear un espacio de trabajo para cada uno de ellos y los identificaremos con una descripción.
Editando. Aquí encontramos un resumen de los elementos que estamos modificando ahora.
Versión del contenedor. Ahora aparece como “no publicado”. Conforme 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 deja acceder a las primordiales secciones de GTM. También tenemos un buscador para encontrar elementos con más rapidez, y la opción de navegar entre los diferentes espacios de trabajo.
Código de contenedor.Al hacer click vamos a acceder al código de instalación de GTM.
Vista previa. Utilizaremos esta opción antes de publicar cambios. Al activar la vista anterior y visitar nuestra página web, se abrirá una ventana en la que vamos a poder ver qué etiquetas se activan. Si algo no funciona en la vista anterior, tampoco funcionará tras publicarlo… así que no te líes a publicar versiones y también estudia qué puede estar fallando.
Enviarpublica en el contenedor los cambios del espacio de trabajo (nuevas etiquetas, disparadores, variables, etc.).
Ahora que conocemos la interfaz, ha llegado el instante de dar los primeros pasos.
Instalar Google Analytics en WP 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 click en Dirigir (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, escoge 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 marcha en tu sitio web, aún queda trabajo por hacer. A continuación vamos a ver cómo amoldar Analytics al Reglamento General de Protección de Datos (el renombrado RGPD, o bien GRPD en inglés).
Adaptar Google Analytics al RGPD
Para emplear Google Analytics con todas y cada una de 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 2 ajustes, mas 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 (PC, smartphone, tablet…) conectado a Internet. Tiene un formato afín a este: 78.232.249.190. En el momento en que un usuario llega a tu página web, Analytics compendia su IP (si bien no la muestra de forma directa en tus informes).
Pues bien, desde el veinticinco de mayo de
las direcciones IP se consideran datos personales. Al ser secuencias numéricas únicas pueden identificar no solo un dispositivo, sino más bien indirectamente a quien lo emplea. O bien por lo menos eso plantea la ley. En todo caso, un administrador web cuya herramienta de analítica web recopilase estos datos personales tendría que cambiar la manera en que se introducen sus cookies.
Esto puede ser un dolor de cabeza, pero podemos evitarlo y ser 100 por cien legales anonimizando las direcciones IP que compendia Analytics. Esto es tan fácil
como configurar la herramienta para que suprima la última parte de cada dirección IP que compendia.
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 en consecuencia no es un dato personal. Y tú, como administrador web, te ahorras el trabajo de mudar la forma en que introduces tus cookies.
Vamos a ver cómo hacer este ajuste.
- Dentro de Google Tag Mánager, emplea 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 click 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. Aguardamos hasta conseguir su permiso explícito. Y si no nos lo da… no le insertamos las cookies. En consecuencia, su sesión no existe y no obtenemos ningún dato. Es duro, mas 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, que es de pago mas cumple perfectamente: lanza el aviso personalizable y bloquea las cookies de Google Analytics hasta que el usuario admite.
Una vez activado, configurarlo es verdaderamente fácil. Te dejo una captura de pantalla.
Elegimos enseñar un botón de rehusar y que
la página se recargue en el momento en que obtengamos el permiso.Si no marcamos esta última opción no vamos a hacer el seguimiento del usuario desde la página en la que se aceptó el aviso.
Ahora nos vamos a Tag Mánager 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 escogimos «Cookie de origen» y representando a 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 elegimos 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 Analyticsy, en la caja Activación, hacemos click en el icono de lápiz. Borramos el activador «All Pages» haciendo clic en -. Pulsamos para añadir un nuevo activador y escogemos WPCA Consent Igual a 1. Ya puedes usar la vista anterior 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 complemento WeePie Cookie Allow cuando el usuario acepta o rechaza el aviso.
Después hemos transformado esa variable en un activador: hemos dicho que «algo pase» cuando la cookie wpca_consent tenga el valor 1 (sucede al admitir 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, existen algunas cosas que debes alterar en tu página de política de cookies.
- Actualiza el texto para
avisar a tus usuarios de las nuevas cookiesque inserta tu sitio web:
- wpca_consent caduca según la valía que hayas configurado en el complemento 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 sitio el shortcode para producir un
botón de anular consentimiento. Este shortcode, llamado Reset consent button, lo encontrarás en la sección «Content» de las opciones del complemento.
- wpca_consent caduca según la validez que hayas configurado en el plugin y sirve para rememorar si el usuario aceptó o bien 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.
Recuerda que para amoldar 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.
Soporte oficial de Google Tag Manager
Si aparecen inconvenientes, consulta estas fuentes:
Implementar etiquetas de otros servicios
GTM es compatible con todo tipo de etiquetas: las únicas restricciones 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 Mánager pues vas a ponerte (o bien ya te has puesto) manos a la obra con esta herramienta Mas 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 personaly toquetear un poco (¡siempre utilizando Vista Previa!). Te recomiendo hacerlo y a contarme qué tal te fue.
Y recuerda: GTM es una aplicación versátil y potente, mas en manos de un programador se transforma en algo revolucionario.
Consultor de comunicación y marketing digital. Surfeo Internet desde mil novecientos noventa y nueve.
¿Te agrada lo que has leído?
Apúntate al boletín de noticias y recibe mis mejores contenidos sobre marketing digital y comunicación
Responsable: José Luis Culebras Pérez. Finalidad: dar de alta al usuario en el boletín de noticias 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 usando el enlace ubicado al pie, o bien ejercer sus derechos de acceso, rectificación, limitación o bien supresión de datos en , o bien presentar una reclamación ante una autoridad de control.
Muy buen contenido, estoy comenzando 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. Proseguiremos explorando :).
Gracias por el tutorial.
Me guardo tu web para estar al loro 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 excepcional tutorial.
Si es posible, me gustaría consultarte un par de dudas. desarrollador web excuses si pecan de demasiado simples o bien obvias; acabo de llegar a este cosmos 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 y cada una de 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 servirnos de un ejemplo, las entradas de un weblog?
2. En mi web instalé el ID de Google Analytics no manualmente, sino más bien con el plugin GA Analytics. ¿He de borrar ese plugin, ahora que ese ID pasa a alojarse de manera directa dentro de GTM?
Muchas gracias nuevamente por tu valiosa información. Enhorabuena por la profesionalidad, claridad y calidad de tu sitio web.
Saludos.
¡Hola Guillermo!
Cuando empiezas con WP, todo son dudas. Mas ya verás que es una plataforma muy sencilla y en poco tiempo te harás con ella.
Paso a contestar tus preguntas.
1- Para que GTM funcione adecuadamente en un sitio web Wordpress, su código debe estar insertado en todas y cada una de las páginas. Esto es muy sencillo de lograr, ya que WordPress genera el contenido de cada página de forma dinámica, extrayendo información de una serie de archivos. Si introduces el código de GTM en uno de esos ficheros, el header.php, ya tendrás Google Tag Manager marchando en todo tu sitio (incluyendo todas las páginas y entradas).
2- En tanto que vas a gestionar Google Analytics a través de Tag Mánager, desactiva el plugin que utilizabas. Cuando hayas verificado que Analytics marcha bien mediante GTM, borra ese complemento.
Gracias muyy buen contenido, espero nuevas publicaciones tuyas!!
Me alegro de que te haya gustado, Frida. Seguiré publicando contenidos como este, puedes estar apacible.
Buenos días José Luis,
Enhorabuena por el post. Es perfecto, bien explicado y con imágenes claras y descriptivas.
En mi caso el complemento de Cookies que empleo es el GDPR Cookie consent, el cual utiliza dos cookies en lugar de una, mas era tan explicativo tu tutorial que he podido amoldar tu método sin inconveniente.
Una pregunta, si no es mucho solicitar, me gustaría saber por qué en el activador marcas ciertas páginas vistas en lugar de todas y cada una de las páginas vistas.
De nuevo enhorabuena, has sido de gran 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 en todo momento y no sirve de nada todo el trabajo anterior.
RESPONSABLE: José Luis Culebras Pérez.FINALIDAD PRINCIPAL: administrar los comentarios. LEGITIMACIÓN: permiso del interesado. DESTINATARIOS: No se cederán datos a terceros, salvo autorización expresa o bien obligación legalDERECHOS: Acceder, corregir y suprimir los datos.
