Google Tag Manager: herramienta de snippets de seguimiento y testeo

Cuando integras servicios externos en tu página web para medir su éxito o las campañas publicitarias lanzadas, por lo general tienes que hacer malabarismos con un gran número de fragmentos de código. Esto requiere, además de ciertos conocimientos en programación, una amplia visión general de todas las métricas necesarias. Si no es posible acceder directamente al código base, se debe contactar al programador responsable cada vez que se implementen nuevos servicios de análisis y seguimiento. Como solución a este problema, Google lanzó Google Tag Manager hace unos años, una herramienta que simplifica enormemente la integración de los códigos.

¿Qué es Google Tag Manager?

En octubre de 2012, Google lanzó Google Tag Manager (GTM), un sistema de gestión interno para integrar y gestionar etiquetas JavaScript y HTML. Mientras que la primera versión fue diseñada principalmente para Analytics, AdWords y DoubleClick, herramientas desarrolladas por Google, desde la versión 2 (2014) el Tag Manager soporta un número cada vez mayor de etiquetas de terceros, especialmente gracias a la publicación de la API oficial. ¿Qué es Google Tag Manager? Esta herramienta no se limita a la implementación de herramientas de análisis y conversión, sino que también permite la integración de etiquetas de remarketing y afiliados, así como de fragmentos de código de herramientas de testeo como AB Tasty o Mouseflow (herramienta de mapas térmicos) con la ayuda del software de Google en el proyecto web deseado (páginas web y apps móviles).

Nota

Encontrarás una lista de etiquetas admitidas en el centro de ayuda oficial de Google.

¿Cómo usar Google Tag Manager exactamente?

Para utilizar Google Tag Manager no necesitamos acceder ni manipular código de forma constante. La herramienta nos proporciona un código único que se coloca en el área del encabezado y del cuerpo de la página web y que hace de contenedor: todas las implementaciones posteriores se realizan a través de la interfaz web de Google Tag Manager. El fragmento de contenedor funciona como una ubicación central desde la que se reproducen colectivamente todas las etiquetas que se configuran mediante la interfaz del navegador. Los cambios posteriores en un fragmento también pueden realizarse directamente en el gestor de etiquetas. Si ya no necesitas una etiqueta, simplemente tendrás que eliminarla del contenedor.

Etiquetas, activadores y variables: los componentes principales de Google Tag Manager

Para garantizar que el fragmento que hace de contenedor capture las interacciones y la información deseadas de los usuarios y las transmita a los servicios correspondientes, es necesario crear las etiquetas y los activadores adecuados en Google Tag Manager. Las variables también pueden utilizarse para especificar estos dos elementos básicos de la herramienta de Google. Para los tres componentes hay diferentes opciones predefinidas listas para usar, pero también puedes realizar tus propios ajustes si lo deseas. A continuación te mostramos exactamente qué funciones tienen las etiquetas, los activadores y las variables.

Etiquetas

Las etiquetas son las unidades de control central de Google Tag Manager: determinan qué información se envía a qué servicios y están disponibles 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 JavaScript especiales que no reenvían información pero activan etiquetas adicionales. Google Tag Manager generalmente carga todas las etiquetas de un contenedor de forma independiente entre sí y en paralelo a otros elementos de la página web. Un mecanismo inteligente de almacenamiento en el caché optimiza el número de peticiones que el servidor web tiene que responder para realizar estas acciones.

Consejo

Puedes utilizar una lista negra de etiquetas para definir etiquetas o tipos de etiquetas que nunca deberían añadirse a tu página web o aplicación.

Activadores

Con los activadores, en Google Tag Manager se define bajo qué condiciones debe usarse una determinada etiqueta. Específicamente se trata de las acciones o eventos del usuario que conducen a la ejecución de un código, es decir, a su "activació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 visitantes en una interfaz determinada. También puedes configurar un formulario, la suscripció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.

Variables

Si deseas refinar la configuración de las etiquetas y activadores, puedes utilizar las variables del administrador de etiquetas, que permiten introducir valores dinámicos para las etiquetas. Si, por ejemplo, es necesario el rastreo de cierta información como la transferencia de transacciones o de productos comprados en una tienda online, pueden utilizarse variables para controlarlo. Las variables se utilizan para especificar los activadores: mientras que un activador simplemente define que una etiqueta debe ejecutarse tan pronto como se llama a una página, puedes utilizar una variable para determinar exactamente qué página(s) o URL deben ejecutarse.

Ventajas de la integración de fragmentos de código con Google Tag Manager

Google Tag Manager ofrece muchas ventajas para cualquiera que trabaje con diferentes herramientas de seguimiento y análisis por varias razones. Resumimos los beneficios de este software de Google:

  • El almacenamiento en caché de etiquetas minimiza las solicitudes del servidor y acorta el tiempo de carga de las páginas web.
  • Optimización general del código fuente.
  • Integración y administració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 permanente de fragmentos o tipos de fragmentos de código no deseados aumenta el nivel de seguridad de tu página web o app.
  • Varias plantillas listas para usar para etiquetas, variables y activadores.
  • Comprobación automática de las etiquetas usadas en modo de vista previa y depuración.
  • Registro de toda la actividad de las etiquetas y los cambios en la configuración de la cuenta de Google Tag Manager.

Tutorial: cómo usar Google Tag Manager para tu propia página web

¿Cómo usar Google Tag Manager para tu propia página web o aplicación? Dado que Tag Manager está basado en la web, no es necesaria ninguna instalación: puedes acceder a la interfaz a través de cualquier navegador común. Además, se trata de una herramienta gratuita, por lo que puedes empezar a utilizarla 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.

Paso 1: crear una cuenta en Google Tag Manager

Accede a la página de Google Tag Manager e inicia sesión con tu cuenta de Google para comenzar a configurar el administrador. Se abrirá un nuevo menú automáticamente, donde podrás crear tu cuenta de Tag Manager. Para ello, introduce el nombre que quieras para tu cuenta y el país en el que te encuentras. Haz clic en el botón "Continuar" para confirmar los datos introducidos.

Paso 2: configurar el contenedor

A continuación, crea el contenedor en el que más tarde insertarás los fragmentos que desees. Primero tienes que elegir un nombre: en principio, puedes elegir libremente los nombres, pero ten en cuenta que para una página web tiene sentido usar el URL, especialmente si planeas manejar diferentes proyectos o páginas (cada uno con su propio contenedor) a través de la cuenta del Tag Manager. Para completar la creación del contenedor, especifica el tipo de proyecto (sitio web estándar, AMP o App) y haz clic en "Crear".

Paso 3: incrustar el fragmento del contenedor de Google Tag Manager

La herramienta de Google solo necesitará un momento para general el contenedor. Si el proceso tuvo éxito, el administrador de etiquetas presenta el fragmento de contenedor dividido. Puedes copiar y pegar el primer fragmento de código en el encabezado de tus páginas, mientras que el segundo se coloca en el cuerpo de los documentos HTML (directamente después de la apertura de la etiqueta <body>), lo que asegura que el fragmento se cargue lo antes posible para proporcionar los datos de medición de forma más precisa.

Consejo

Puedes acceder al código de Google Tag Manager en cualquier momento. Para ello, selecciona la pestaña "Administrador" y, a continuación, haz clic en "Instalar Google Tag Manager".

Paso 4: añadir etiquetas

Una vez hayas incluido el código del administrador de etiquetas, puedes empezar a llenar el contenedor. El primer paso es crear las etiquetas para implementar los códigos reales de seguimiento y análisis en tu página web o aplicación. Aquí incluimos como ejemplo el conocido Google Analytics. Simplemente accede a tu área de trabajo desde la pestaña del mismo nombre y selecciona "Nueva etiqueta" o "Añadir nueva etiqueta".

Ahora haz clic en el campo "Configuración de la etiqueta" y selecciona el tipo de etiqueta "Universal Analytics":

A continuación, selecciona lo que deseas que Analytics rastree (en la foto que verás a continuación, a modo de ejemplo, hemos elegido “Página vista”) y marca "Habilitar la anulación de configuración en esta etiqueta" (aspecto necesario si no agregas una variable en este punto). Ahora puedes introducir el ID de seguimiento de análisis en la línea correspondiente. Para utilizar Google Analytics de acuerdo con las normas de protección de datos, añade el campo "anonymizeIp" en "Más opciones" > "Campos para configurar" y define el valor "true". Como resultado, las direcciones IP registradas por tu servidor web se reenvían a Google de forma anónima.

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

Paso 5: añadir activador

Al guardar la etiqueta, Google Tag Manager te señala que todavía necesitas añadir un activador para que Analytics pueda reproducir el código de seguimiento de la acción de usuario deseada. Para crear un nuevo activador, selecciona "Activadores" en la barra de menús del área de trabajo y haz clic en "Nuevo".

Haz clic en el campo "Configuración del activador" para obtener una visión general de los tipos de activador disponibles. Busca el activador deseado y haz clic en la entrada correspondiente. Si necesitas un tipo de activador para el que no existe ningún modelo predefinido en la lista, selecciona "Evento personalizado". En este tutorial de Google Tag Manager tomaremos como ejemplo el activador de "Página vista", que ya estaba especificado como el objetivo de seguimiento en el paso anterior. Para este tipo, también se puede especificar si es válido para todas las llamadas o solo para llamadas específicas.

Pulsa en "Guardar" y selecciona un nombre adecuado para el nuevo activador.

Paso 6: conectar el activador y la etiqueta

Vuelve a la etiqueta creada en el paso 4 (que se encuentra en "Etiquetas") y añade el activador. Para ello, pulsa el botón "Activador", selecciona uno de la lista desplegable y guarda los cambios.

Paso 7: comprobación de la funcionalidad de las etiquetas creadas

Google Tag Manager te ofrece la oportunidad de probar la funcionalidad de las etiquetas incrustadas y los activadores (y las variables, en caso de utilizarse) antes de cambiar el contenedor de fragmentos a tiempo real. Haz clic en "Vista previa". Después de una breve espera, aparece el siguiente mensaje, que te informa de que el modo de vista previa del administrador de etiquetas está activo:

Una vez hayas iniciado el modo de vista previa, accede a tu página web o app en una nueva pestaña. En la parte inferior de la pantalla, se abre la consola de Google Tag Manager, donde podrás ver qué etiquetas se han ejecutado en "Resumen". Dado que en este tutorial hemos configurado la opción de que el fragmento de Google Analytics debe reproducirse directamente cuando se accede a la página, la consola mostrará la etiqueta de Analytics en este caso con el mensaje “Etiquetas activadas en esta página”):

Nota

Para comprobar el funcionamiento de etiquetas o activadores que requieren interacciones específicas del usuario, como hacer clic en un botón, primero debes realizar las acciones correspondientes.

Paso 8: publicar un contenedor

Si la configuración de tu contenedor funciona como esperabas, es hora de integrarlo en la versión en vivo de tu página web o app. Para ello es necesario crear una nueva versión y publicarla. Para abrir el menú correspondiente, haz clic en el botón "Enviar", situado en la esquina superior derecha de la barra de menús de Google Tag Manager. Selecciona la opción " Publicar y crear versión" y añade un nombre adecuado y una descripción (opcional) adecuadas para el contenedor. La descripción se recomienda especialmente para contenedores con muchas etiquetas.

Haz clic en "Publicar" para completar la conexión de tu primera versión del contenedor de etiquetas.