En lo referente a las herramientas de analítica y tracking, resulta un engorro muchas veces para el desarrollo tener que insertar diferentes códigos de seguimiento que proceden de distintas herramientas.
Esto no solo hace que desde marketing se dependa en gran medida de los desarrolladores para poder completar nuestro trabajo sino que también ensucia bastante el código.
Ante estos problemas nació Google Tag Manager, una herramienta con una interfaz gráfica que elimina estas barreras. Os voy a contar todo en detalle: cómo comenzar a utilizarla y algunos casos prácticos para que puedas añadir tus propias etiquetas.
¿Qué es Google Tag Manager?
Google Tag Manager es una herramienta que facilita el trabajo para los marketers, permitiendo la creación de etiquetas o códigos de seguimiento desde una interfaz gráfica, sin necesidad de tocar el código de la web.
Desde la interfaz, nosotros decidimos cuándo se ejecutan cada uno de los códigos e incluso podemos scrapear datos de la web para enviarlos a nuestras herramientas de marketing. Esto último puede ser muy útil en algunos casos.
¿Cómo funciona Google Tag Manager?
El funcionamiento de Google Tag Manager es sencillo una vez se le pilla el truco, pero resulta algo complejo de entender a la primera.
Pero tranquilos que para eso está este artículo. Paso a paso 😉
Primero veamos cómo crear una cuenta y la instalación de la herramienta y luego profundizaremos en la otra parte.
➕ Creación de cuenta e instalación del pixel
Para crear una cuenta en Tag Manager, deberemos acceder con nuestra cuenta de Google a https://www.google.com/intl/es/tagmanager/
⚠ Es recomendable usar la misma que usas en las otras cuentas de Analytics, Search Console, etc.
Tras acceder, veremos nuestra ventana de proyectos vacía, por lo que deberemos empezar creando una cuenta en el botón de «Crear cuenta».
En el siguiente paso, deberemos rellenar el típico formulario orientado a indicar el nombre de cuenta, la ubicación, el nombre del dominio donde vamos a instalar la herramienta y para qué tipo de plataforma: si se trata de una app, web o AMP.
Después nos aparecerá el clásico mensaje de aceptar las políticas de privacidad y demás. Una vez aceptado, accederemos directamente al proyecto nuevo creado y nos facilitará los códigos de instalación.
➡ Instalación mediante código
La instalación del código es bastante sencilla y Tag manager nos da ya la instrucción para ello.
La primera parte debemos instalarla entre las etiquetas <head> de nuestra web, mientras que el segundo código, debe instalarse nada más abrir la etiqueta <body>.
El código debe estar instalado en todas las páginas, ya que en caso de no ser así, no podremos hacer un correcto seguimiento, es decir, página que no tenga el código, página de la cual no se obtendrá información.
➡ Instalación con WordPress
La instalación en WordPress, suelo hacerla con el plugin de Google Tag manager for WordPress, ya que tiene varias opciones de integración con otros plugins como Woocomerce o Contact form.
Además de que por defecto proporciona bastante información interesante que podemos decidir si enviarla o no, para luego ser recogida.
💬 Existen 4 opciones de instalar el código, pero seguramente solo uséis la forma personalizada o la de inyección de código.
- La forma personalizada, es la más segura, pero te obliga a trabajar con un child theme, lo que te obliga a realizar un poco más de trabajo.
- La de inyección de código tiene sus riesgos ya que puede romper el frontend de la página, aunque rara vez me ha dado problema, creo que solo una vez y pude revertir el cambio.
- En el footer de la página no recomiendo insertarlo ya que podemos perder información de seguimiento si nos da problema algún script.
- El valor apagado solo ejecuta los dataLayer. Solo para casos en que el el código de tag manager esté ya instalado en la plantilla directamente por desarrollo o algún motivo especial.
En el plugin encontraréis bastantes opciones de datos que enviar, para más tarde recogerlos y almacenarlos en vuestras herramientas de analítica. Vamos a revisar algunos de estos datos.
⚙ Funcionamiento Básico
Ya tenemos la herramienta instalada, ahora falta conocer y entender la interfaz para proceder a la configuración.
Tag Manager se compone de tres partes principales, variables, activadores y etiquetas.
- Las etiquetas determinan el código que se va a enviar información a terceros como Analytics, Google Ads, Facebook Ads…
- Los activadores sirven para indicar cuándo queremos ejecutar las etiquetas. También se les conoce como triggers.
- Las variables se utilizan para guardar datos que podemos recoger de los DataLayer o le podemos dar un valor estándar desde Google Tag Manager. Las variables luego las utilizaremos para pasar este valor a las etiquetas o ejecutar activadores si se cumple la condición de la variable.
Además de todo esto, podemos enviar información de variables personalizadas mediante la incrustación de una capa de datos llamada DataLayer. Esto es un pequeño código que se puede personalizar para enviar información extra a Tag Manager cuando nos vemos limitados a conseguir cierta información.
Empezaremos con las variables.
¿Qué son las variables en Google Tag Manager?
Las variables son datos a los cuales les damos un valor nosotros. Este valor lo podemos dar a través de Google Tag Manager, podemos recogerlo de un DataLayer o podemos scrapearlos de la web.
Al dato que guardamos en cada una de las variables podemos darle dos usos, enviar el dato a otras herramientas mediante las etiquetas.
- Ejemplo de variable para etiqueta: el id de seguimiento de Analytics, es algo recurrente que podemos usar como variable para luego crear las etiquetas.
- Ejemplo de variable para activador: aquí usamos el valor recogido mediante alguna acción realizada. Por ejemplo, el clic en un texto (siendo esto un tipo de variable) para que coincida con un valor y en caso de coincidir, ejecutar el activador.
Cuando accedamos a la parte de variables, en la sección de «Variables integradas«, hay varias que no están activas por defecto. Pulsando sobre el botón de «Configuración» podremos acceder para activarlas.
La sección que personalmente uso bastante y recomiendo activar, es la sección de variables «Clics«, ya que todo esto nos servirá para la parte de los activadores.
Por otro lado, también tenemos un conjunto de variables que definimos nosotros, es decir, el usuario. Esto nos permite crear nuestras propias variables, en función de los datos que nos devuelva la página por diferentes métodos. Es muy posible que esto lo usemos para captar datos del Data Layer.
También suele usarse para definir configuraciones de Analytics, definiendo información extra que vamos a enviar en distintas etiquetas.
Activadores en Tag Manager
Los activadores son condicionantes que definimos para decidir cuándo se ejecutan cada una de las etiquetas, por ejemplo, cuando un usuario realiza clic en un sitio determinado de la web a enlaces externos, a un texto con una palabra concreta, cuando ve una parte de la página, realiza scroll, etc.
Los activadores que más problemas dan, son los de envío de formulario y los activadores de Youtube. Es por ello que no recomiendo usarlos porque en ocasiones dan errores y no funcionan del todo bien, para esto, es mejor buscar otros métodos alternativos.
¿Cómo crear un activador?
Por ejemplo, si seleccionamos un activador tipo clic en cualquier elemento y seleccionamos la opción que solo se activa en algunos clics, en el primer desplegable, podremos seleccionar una de las variables integradas por el sistema.
⚠ Recuerda que sólo aparecen las variables que tengamos activadas o las personalizadas creadas por nosotros.
En el segundo desplegable, seleccionaremos el tipo de condición que debe de completarse con la variable y que coincida en el tercer recuadro para que el activador se lance. Es decir, si seleccionamos «Clic Text» y la opción de «contiene» con el texto en el recuadro «descarga«, nuestro activador se lanzará cuando un usuario haga clic en un texto que contenga la palabra «descarga«.
Podemos incluir varias reglas, no es necesario insertar una, lo que nos da bastante libertad para especificar bastante.
Otra cosa a tener en cuenta, es que Google Tag Manager diferencia mayúsculas de minúsculas, por lo que es importante que os fijéis cómo está insertado y qué es lo que está detectando Tag Manager.
¿Para qué sirven las etiquetas en Google Tag Manager?
Gracias a las etiquetas, podremos decidir el tipo de código que ejecutaremos: desde Analytics, pasando por Adwords, Facebook Ads, Crazzy Egg e incluso código personalizado propio.
Las etiquetas se componen de dos partes, la parte de configuración, donde pondremos toda la información necesaria que necesitamos ejecutar y donde también podremos hacer uso de las variables de la herramienta.
La segunda parte, es la activación, donde colocaremos los activadores que hayamos creado previamente con la herramienta.
En esta segunda parte, podremos colocar varios activadores a modo condicional «o», es decir, que solo será necesario que cumpla uno de todos los indicados para ejecutar la etiqueta configurada.
También nos permite agregar excepciones en esta segunda parte de la activación, por si queremos excluir algunos casos concretos (aunque esto también podemos hacerlo en la creación del activador).
Data Layer
El Data Layer es una capa de datos intermedia entre la interfaz que visualiza el usuario y los datos que queremos disponer a través de herramientas de analítica que nos proporciona información sobre diferentes elementos de esta.
Por ejemplo, si queremos saber los productos más vendidos de un proveedor en nuestra tienda online pero no mostramos dicha información en la web, podemos hacer uso del Data Layer para enviar la información directamente a nuestra herramienta de analítica sin que el usuario la vea.
Veamos también un ejemplo de cómo insertar un Data Layer a nivel de código. Este se ejecutará siempre dentro de un script, tal que así:
<script>
dataLayer = [{
'pageCategory': 'signup',
'visitorType': 'high-value'
}];
</script>Este código solo podremos utilizarlo durante la carga de la página para poder hacer uso de él. Si deseamos que el código se envíe tras realizar alguna acción necesitamos crear un dataLayer.push, tal que así:
<script>
dataLayer.push({
'sendForm': 'Ok'
});
</script>Como se puede ver en ambos ejemplos, dentro del Data Layer, encontramos un conjunto de variables con su valor, estructurada de la siguiente forma
<script>
dataLayer.push({
'Nombre de la variable': 'Valor de la variable',
'Nombre de la variable': 'Valor de la variable',
'Nombre de la variable': 'Valor de la variable'
});
</script>Los nombres de variable los definimos nosotros y los usaremos para luego poder identificarlos con Tag Manager y recoger su valor.
El valor de las variables dependerá de los datos que queramos recoger o enviar.
Aprende a usar Google Tag Manager desde cero Clic para tuitear🔍 Identificar qué información le está llegando a Google Tag Manager: usar la Vista Previa
Una vez ya hemos creado las variables, activadores y etiquetas necesarias, previamente a guardar los cambios, es muy importante que los comprobemos y verifiquemos que estos funcionan correctamente.
Para ello, tenemos una opción de «Vista previa«, permitiéndonos ver las etiquetas que se ejecutan y las variables que se transmiten al realizar las diferentes acciones.
Esto puede ser algo complejo, pero voy a explicar su funcionamiento para que se entienda y poder mejorar el manejo de la herramienta.
Tras activar la «Vista previa«, accediendo a la web con el mismo navegador, veremos en la parte inferior una pestaña que solo será visible para los usuarios que tengan acceso a la cuenta de Tag Manager y se encuentren logueados.
Cada vez que realicemos alguna acción o se ejecute alguna etiqueta o activador, aparecerá en la parte de Summary en la parte inferior izquierda de la pantalla.
En la parte derecha que es más grande, veremos las etiquetas que se han ejecutado y las que no, así como las veces que se han ejecutado.
Haciendo click encima de las etiquetas ejecutadas, podremos ver qué información se ha enviado o ejecutado por Tag Manager.
Por ejemplo, si queremos saber cómo crear un activador en función de los datos enviados, tan solo debemos realizar la acción y pinchar en ella en la parte de Summary. Una vez seleccionada, debemos acceder a Variables (en el menú superior del panel de Tag Manager de vista previa), donde encontraremos el listado de variables que tenemos activas desde Tag Manager y podremos identificar la información que le estamos enviando, para crear un activador.
En la sección de Data Layer (en el menú superior del panel de Tag Manager de vista previa), también podremos ver los datos enviados mediante capas de datos, así que tenemos dos formas de identificar los datos, para luego recogerlos mediante variables o crear activadores.
🐾 Publicaciones y control de versiones
Una vez realizadas las pruebas en vista previa, podemos pasar a la publicación de los cambios y guardarlos.
Cada cambio que guardemos, podremos darle una descripción y un título, llevando un control en cada cambio que realicemos.
Esto es bastante útil porque nos permitirá volver atrás si alguien toca algo que no debe o la liamos en algún momento.
🛢 Importación y exportación de contenedores
Algo bastante útil e interesante si trabajáis con varios proyectos similares, es la posibilidad de importar y exportar contenedores, ahorrándote bastante tiempo en la configuración de la herramienta.
Por ejemplo, si tenemos un equipo de desarrollo que siempre está creando tiendas online y tiene una definición clara de las etiquetas a colocar, podemos acelerar el proceso de la integración del comercio avanzado de Analytics con su configuración básica, eventos, conversiones de Adsense, etc.
Para acceder a la importación y exportación del contenedor, tan solo debemos acceder a la parte de administrador.
Ejemplo práctico de Tag Manager con Analytics
Ya hemos dado un vistazo a toda la parte teórica de Tag Manager, veamos un par de ejemplos prácticos para entender todo mejor.
Veremos dos ejemplos:
- Instalar Analytics con Tag Manager
- Crear eventos que envíen información también a Analytics.
Configuración del seguimiento básico de Analytics con Tag Manager
Lo primero que debemos hacer es crear una variable con el valor de nuestro UA de Analytics.
Para ello, accedemos a Variables y en Variables definidas por el usuario hacemos clic en Nueva, luego seleccionaremos la variable de Configuración de Analytics.
Después, insertaremos el UA en el Id de seguimiento (ese dato lo sacamos en Analytics), daremos un nombre a la variable y la guardaremos.
💬 Recomendamos que lo nombres de una manera que se identifique fácilmente. Por ejemplo: GA-id
Ahora tocaría crear el activador para que se lance en todas las páginas visibles, pero este no es necesario crearlo ya que Tag Manager lo trae por defecto activo. Nos saltamos entonces esta parte y accedemos directamente a la creación de la etiqueta.
Una vez dentro de crear etiqueta, debemos clicar sobre Nueva, y dentro de Configuración de la etiqueta, debemos agregar la opción de Google Analytics: Universal Analytics.
Dentro de Configuración de Google Analytics, debemos seleccionar nuestra variable creada en el paso anterior con el UA de Analytics.
Por último, agregamos el Activador de All Pages, quedando la etiqueta algo así:
Guardamos, comprobamos que en vista previa funciona todo correctamente y lanzamos la primer versión de la configuración.
Esto también podemos hacerlo con el tracking de Facebook por ejemplo, cambiando la etiqueta por la opción de HTML Personalizado y pegando directamente el tracking de Facebook.
Creación de eventos
Para este ejemplo es necesario que tengáis creada la variable de Analytics que he explicado en el ejemplo anterior.
La creación de eventos suele ser algo más compleja. Es importante que tengáis varias opciones activas en las Variables integradas que por defecto están desactivadas.
Para ello accedemos a Variables y pulsamos en configurar dentro de las variables integradas. Activaremos la opción de Clic Element (aunque para cosas prácticas, es posible que también uséis otras opciones de clic o visibilidad).
Ahora no toca crear el activador, pero necesitamos saber cuándo se ejecutara el evento.
Imaginemos que queremos trackear clic en un botón, por ejemplo, el que aparece aquí https://www.publisuites.com/blog/conseguir-seguidores-instagram/ os enseño el botón exacto:
Accediendo con el navegador de Google Chrome, clicando encima de este elemento con el botón derecho del ratón, debemos ir a Inspeccionar. Automáticamente veremos el código marcado de la parte seleccionada tal que así:
Clicando de nuevo con el botón derecho del ratón sobre el código marcado en azul, seleccionamos la opción de Copiar -> Copiar selector.
Ahora nos toca volver a la parte de Activadores, creamos un nuevo activador y dentro de Clic, debemos seleccionar Todos los elementos.
Luego seleccionamos la opción de Algunos clics y seleccionamos la variable integrada que hemos activado en el primer paso Clic Element, Seleccionamos la opción Coincide con el selector de CSS y pegamos el valor que hemos copiado del código en el paso anterior.
Deberíamos ver algo como esto:
Guardamos y nos vamos a la sección de Etiquetas para terminar la configuración.
Creamos una nueva etiqueta y seleccionamos en Configuración de la etiqueta la opción de Google Analytics: Universal Analytics.
Si os fijáis, una vez seleccionada trae por defecto un desplegable donde pone Página vista, esta opción debemos cambiarla a Evento, mostrándonos nuevas opciones para la creación de eventos.
Ahora debemos asignar un nombre para los campos de Categoría, Acción y Etiqueta del evento. También podemos dar un valor cada vez que se ejecute una acción, aunque esto es opcional.
Dentro de Configuración de Google Analytics, debemos insertar la variable que hemos creado cuando has realizado la instalación de Google Analytics con Tag Manager en el ejemplo anterior.
Por último, seleccionamos el Activador y deberíamos tener algo como esto:
Ahora Guardamos los cambios, realizamos pruebas en el modo de vista previa y una vez veamos que funciona, guardamos la segunda versión de nuestro contenedor de Tag Manager.
Trucos para detectar y crear nuevos activadores
Cuando accedemos al modo de vista previa, si tenemos activadas las variables integradas en Tag Manager, podemos ver qué información se está enviando a Tag Manager con cada una de las acciones realizadas.
Esto es bastante útil ya que nos puede indicar cómo crear nuevos activadores a través de la información enviada.
Por ejemplo, si hacemos clic en el recuadro de búsqueda para empezar a realizar una búsqueda con la vista previa activa, en la parte inferior izquierda de nuestra pantalla, veremos que aparece en la opción de Summary una nueva opción llamada Clic.
Si hacemos Clic sobre esta nueva opción que nos aparece y luego nos vamos a la parte de Variables o Data Layer, podremos ver la información que se ha enviado para esa acción, por ejemplo, el clic de la clase, el clic del texto, el clic de la url, etc…
Esta información podremos usarla para la creación de Activadores o detectar errores en los ya creados para nuestras Etiquetas.
Conclusiones
Como veis Tag Manager puede resultar una herramienta algo compleja al comienzo, pero realmente no lo es tanto una vez se entiende el funcionamiento de esta.
En la red encontraréis muchos recursos, tanto a nivel de código como para WordPress, donde aprenderéis mejor el manejo de la herramienta y las múltiples posibilidades que ofrece esta.
Dedicándole tiempo seréis capaces de hacer auténticas virguerías y si sabéis código, muchas más.
Para las dudas, nos vemos en los comentarios =)
2 comentarios en “Qué es Google Tag Manager y cómo empezar a usarlo desde cero”
Pingback: Cómo implementar el User ID a través de Google Tag Manager
¡Enhorabuena por el post! Nos ha encantado. Lo vamos a guardar como oro en paño como guía para configurar correctamente Google Tag Manager. ¡Qué bien nos viene!
Muchas gracias por compartir vuestra sabiduría, amigos 🙂