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.

google tag manager

Tras acceder, veremos nuestra ventana de proyectos vac√≠a, por lo que deberemos empezar creando una cuenta en el bot√≥n de “Crear cuenta”.

crear cuenta tag manager

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.

crear cuenta gtm

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.

código google tag manager

‚ě° 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.

instalar en wordpress tag manager

ūüí¨ 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.

diferencias etiquetas, variables y activadores

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.

variables tag manager

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.

activadores tag manager

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.

activador variables gtm

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“.

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

etiqueta tag manager

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.

vista previa tag manager

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.

variables vista previa tag manager

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.

datalayer vista previa tag manager

ūüźĺ 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.

administrador tag manager

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:

  1. Instalar Analytics con Tag Manager
  2. 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.

variable ga tag manager

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√≠:

etiqueta analytics

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

click element gtm

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:

evento tag -manager

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í:

código web

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:

activador evento

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:

etiqueta evento

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.

click tag manager

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…

variable vista previa tag manager

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 =)

  • Ensalza

    ¬°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 ūüôā

*