Google Tag Manager: he­rra­mie­n­ta de snippets de se­gui­mie­n­to y testeo

Cuando integras servicios externos en tu página web para medir su éxito o las campañas pu­bli­ci­ta­rias lanzadas, por lo general tienes que hacer ma­la­ba­ri­s­mos con un gran número de fra­g­me­n­tos de código. Esto requiere, además de ciertos co­no­ci­mie­n­tos en pro­gra­ma­ción, una amplia visión general de todas las métricas ne­ce­sa­rias. Si no es posible acceder di­re­c­ta­me­n­te al código base, se debe contactar al pro­gra­ma­dor re­s­po­n­sa­ble cada vez que se im­ple­me­n­ten nuevos servicios de análisis y se­gui­mie­n­to. Como solución a este problema, Google lanzó Google Tag Manager hace unos años, una he­rra­mie­n­ta que si­m­pli­fi­ca eno­r­me­me­n­te la in­te­gra­ción de los códigos.

En octubre de 2012, Google lanzó Google Tag Manager (GTM), un sistema de gestión interno para integrar y gestionar etiquetas Ja­va­S­cri­pt y HTML. Mientras que la primera versión fue diseñada pri­n­ci­pa­l­me­n­te para Analytics, AdWords y Dou­ble­Cli­ck, he­rra­mie­n­tas de­sa­rro­lla­das por Google, desde la versión 2 (2014) el Tag Manager soporta un número cada vez mayor de etiquetas de terceros, es­pe­cia­l­me­n­te gracias a la pu­bli­ca­ción de la API oficial. ¿Qué es Google Tag Manager? Esta he­rra­mie­n­ta no se limita a la im­ple­me­n­ta­ción de he­rra­mie­n­tas de análisis y co­n­ve­r­sión, sino que también permite la in­te­gra­ción de etiquetas de re­ma­r­ke­ti­ng y afiliados, así como de fra­g­me­n­tos de código de he­rra­mie­n­tas de testeo como AB Tasty o Mouseflow (he­rra­mie­n­ta de mapas térmicos) con la ayuda del software de Google en el proyecto web deseado (páginas web y apps móviles).

Para utilizar Google Tag Manager no ne­ce­si­ta­mos acceder ni manipular código de forma constante. La he­rra­mie­n­ta nos pro­po­r­cio­na un código único que se coloca en el área del en­ca­be­za­do y del cuerpo de la página web y que hace de co­n­te­ne­dor: todas las im­ple­me­n­ta­cio­nes po­s­te­rio­res se realizan a través de la interfaz web de Google Tag Manager. El fragmento de co­n­te­ne­dor funciona como una ubicación central desde la que se re­pro­du­cen co­le­c­ti­va­me­n­te todas las etiquetas que se co­n­fi­gu­ran mediante la interfaz del navegador. Los cambios po­s­te­rio­res en un fragmento también pueden rea­li­zar­se di­re­c­ta­me­n­te en el gestor de etiquetas. Si ya no necesitas una etiqueta, si­m­ple­me­n­te tendrás que eli­mi­nar­la del co­n­te­ne­dor.

Para ga­ra­n­ti­zar que el fragmento que hace de co­n­te­ne­dor capture las in­ter­ac­cio­nes y la in­fo­r­ma­ción deseadas de los usuarios y las transmita a los servicios co­rre­s­po­n­die­n­tes, es necesario crear las etiquetas y los ac­ti­va­do­res adecuados en Google Tag Manager. Las variables también pueden uti­li­zar­se para es­pe­ci­fi­car estos dos elementos básicos de la he­rra­mie­n­ta de Google. Para los tres co­m­po­ne­n­tes hay di­fe­re­n­tes opciones pre­de­fi­ni­das listas para usar, pero también puedes realizar tus propios ajustes si lo deseas. A co­n­ti­nua­ción te mostramos exac­ta­me­n­te qué funciones tienen las etiquetas, los ac­ti­va­do­res y las variables.

Las etiquetas son las unidades de control central de Google Tag Manager: de­te­r­mi­nan qué in­fo­r­ma­ción se envía a qué servicios y están di­s­po­ni­bles en forma de código. En principio, las etiquetas no son más que los snippets que se incluyen en el código HTML. Además de las etiquetas estándar, hay etiquetas Ja­va­S­cri­pt es­pe­cia­les que no reenvían in­fo­r­ma­ción pero activan etiquetas adi­cio­na­les. Google Tag Manager ge­ne­ra­l­me­n­te carga todas las etiquetas de un co­n­te­ne­dor de forma in­de­pe­n­die­n­te entre sí y en paralelo a otros elementos de la página web. Un mecanismo in­te­li­ge­n­te de al­ma­ce­na­mie­n­to en el caché optimiza el número de pe­ti­cio­nes que el servidor web tiene que responder para realizar estas acciones.

Con los ac­ti­va­do­res, en Google Tag Manager se define bajo qué co­n­di­cio­nes debe usarse una de­te­r­mi­na­da etiqueta. Es­pe­cí­fi­ca­me­n­te se trata de las acciones o eventos del usuario que conducen a la ejecución de un código, es decir, a su "ac­ti­va­ción". Estas pueden ser simples vistas de página, ventanas cargadas o la aparición de mensajes de error, pero también clics activos de los vi­si­ta­n­tes en una interfaz de­te­r­mi­na­da. También puedes co­n­fi­gu­rar un fo­r­mu­la­rio, la su­s­cri­p­ción al boletín de noticias o el visionado de un vídeo como activador de etiquetas. Es posible utilizar el mismo activador para varias etiquetas.

Si deseas refinar la co­n­fi­gu­ra­ción de las etiquetas y ac­ti­va­do­res, puedes utilizar las variables del ad­mi­ni­s­tra­dor de etiquetas, que permiten in­tro­du­cir valores dinámicos para las etiquetas. Si, por ejemplo, es necesario el rastreo de cierta in­fo­r­ma­ción como la tra­n­s­fe­re­n­cia de tra­n­sac­cio­nes o de productos comprados en una tienda online, pueden uti­li­zar­se variables para co­n­tro­lar­lo. Las variables se utilizan para es­pe­ci­fi­car los ac­ti­va­do­res: mientras que un activador si­m­ple­me­n­te define que una etiqueta debe eje­cu­tar­se tan pronto como se llama a una página, puedes utilizar una variable para de­te­r­mi­nar exac­ta­me­n­te qué página(s) o URL deben eje­cu­tar­se.

Google Tag Manager ofrece muchas ventajas para cua­l­quie­ra que trabaje con di­fe­re­n­tes he­rra­mie­n­tas de se­gui­mie­n­to y análisis por varias razones. Resumimos los be­ne­fi­cios de este software de Google:

• El al­ma­ce­na­mie­n­to en caché de etiquetas minimiza las so­li­ci­tu­des del servidor y acorta el tiempo de carga de las páginas web.
• Op­ti­mi­za­ción general del código fuente.
• In­te­gra­ción y ad­mi­ni­s­tra­ción sencilla y cómoda de todas las etiquetas a través de una única interfaz web después de un acceso único y necesario al código fuente.
• El bloqueo pe­r­ma­ne­n­te de fra­g­me­n­tos o tipos de fra­g­me­n­tos de código no deseados aumenta el nivel de seguridad de tu página web o app.
• Varias pla­n­ti­llas listas para usar para etiquetas, variables y ac­ti­va­do­res.
• Co­m­pro­ba­ción au­to­má­ti­ca de las etiquetas usadas en modo de vista previa y de­pu­ra­ción.
• Registro de toda la actividad de las etiquetas y los cambios en la co­n­fi­gu­ra­ción de la cuenta de Google Tag Manager.

¿Cómo usar Google Tag Manager para tu propia página web o apli­ca­ción? Dado que Tag Manager está basado en la web, no es necesaria ninguna in­s­ta­la­ción: puedes acceder a la interfaz a través de cualquier navegador común. Además, se trata de una he­rra­mie­n­ta gratuita, por lo que puedes empezar a uti­li­zar­la en cualquier momento. El único requisito es tener una cuenta de Google válida. Si ya utilizas servicios como AdWords, Gmail o Google Drive, ya dispones de una cuenta; de lo contrario, deberás dirigirte a la página de Google y crear una cuenta para acceder a Google Tag Manager.

Guarda la etiqueta de Google Analytics recién creada en el botón “Guardar” y se­le­c­cio­na "Guardar etiqueta" en la ventana que aparece. Puedes copiar el nombre propuesto de la etiqueta sin cambios.

Pulsa en "Guardar" y se­le­c­cio­na un nombre adecuado para el nuevo activador.

Haz clic en "Publicar" para completar la conexión de tu primera versión del co­n­te­ne­dor de etiquetas.