Kit Digital - ayudas económicas para la transformación digital
Google Analytics 4: cómo actualizar y empezar a usar el nuevo GA4
Pin it

google tag manager

Google Tag Manager es un sistema de gesión de etiquetas gratuito incluido en Google Marketing Platform que permite instalar Analytics, Google Ads y otras herramientas de marketing en tu página web de forma rápida y sencilla sin necesidad de tener conocimientos de programación.

Si no eres un usuario avanzado quizá solo tengas instalada una etiqueta de Google Analytics para conseguir información y estadísticas elementales de tu web, y en ese caso Tag Manager no te proporcionará ninguna ventaja.

Sin embargo, según avances en tus conocimientos de Analytics, quizá quieras monitorizar cuántos usuarios empiezan a rellenar un formulario y no lo envían, o cuántas ventas se te escapan a la mitad del proceso de compra.

En esos casos para cada seguimiento concreto que quieras realizar tendrás que añadir un fragmento de código JavaScript a tu web en lugares muy concretos de su código fuente, donde un pequeño error puede resultar catastrófico.

En este punto descubrirás que las etiquetas repetidas o incorrectas pueden distorsionar la medición de los datos, y la acumulación de código JavaScript influirá en la velocidad de carga de tu web.

La cosa se complica cuando descubres Google Ads y la publicidad online, y las increibles posibilidades que ofrece si tienes acceso a suficientes datos para optimizarla correctamente.

Llegados a este punto no hay otra opción que usar Tag Manager, una herramienta de gestión de etiquetas increible que a primera vista parece más complicada de lo que es.

Agrupando tus etiquetas en un contenedor de Tag Manager, podrás gestionarlas todas mediante una interfaz sencilla y amigable.

Tag Manager permite instalar, gestionar y organizar todas tus herramientas de seguimiento al mismo tiempo que evita la pérdida de velocidad de carga que se produciría al instalar tanto código JavaScript directamente en tu web.

Sin embargo esta herramienta es tan tremendamente configurable que puede asustar al principio.

Para no perdernos en su complejidad, en esta guía para principiantes vamos a acercarnos a Tag Manager por partes:

Tag Manager y Analytics. ¿Cuándo usar cada uno?

Tag Manager y la etiqueta gtag.js de Google Analytics son métodos compatibles para realizar el seguimiento y medición estándar de los datos de visitantes de tu web, cada uno de con características distintas:

  • Tag Manager es un sistema de gestión de etiquetas que permite instalar y actualizar los códigos de seguimiento de tu web o aplicación móvil desde una interfaz web, sin volver a tocar su código
  • gtag.js es una API (interfaz de programación de aplicaciones) y un sistema de etiquetado JavaScript que permite enviar datos de eventos a Google Analytics (también a AdWords y DoubleClick), insertando un fragmento de código para cada caso particular

Google recomienda utilizar Tag Manager si quieres:

  • Instalar y modificar etiquetas de Google y de terceros en páginas web y aplicaciones móviles
  • Implementar y modificar etiquetas desde una interfaz web
  • Usar funciones de colaboración y control de versiones

En cambio puedes usar el código gtag.js de analytics si no puedes usar Tag Manager o si consideras importante:

  • Instalar etiquetas directamente en tu web sin dedicar tiempo a configurar un sistema de gestión de etiquetas
  • Trabajar con tus etiquetas directamente en JavaScript sin tener que usar una interfaz independiente

Si ya utilizas Tag Manager, sigue haciéndolo. Las etiquetas de Google Ads y Google Marketing Platform son totalmente compatibles y no es necesario utilizar código adicional basado en gtag.js en tu web.

Si utilizas gtag.js de analytics, puedes cambiar a Tag Manager en cualquier momento.

Cómo crear una cuenta de Tag Manager?

Crear una cuenta de Tag Manager es gratis y puedes utilizar la misma cuenta de Tag Manager para administrar las etiquetas de todos los sitios web o aplicaciones móviles de tu empresa u organización.

Los pasos para crear una cuenta de Tag Manager son los siguientes:

  1. Entra en Google Tag Manager, haz clic en Cuentas y a continuación en Crear cuenta.
  2. Escribe un nombre de cuenta para poder identificarla y haz clic en continuar.
  3. Introduce un nombre de contenedor, selecciona el tipo de contenido para el que lo vas a utilizar: web, AMP, iOS o Android y haz clic en crear.
  4. Lee y acepta las Condiciones de Servicio.

Cuando el nuevo contenedor se cargue por primera vez, verás un mensaje con el fragmento de código de instalación del contenedor web o te pedirá que empieces a utilizar Tag Manager como parte del SDK de la plataforma para móviles que hayas elegido.

Puedes instalar los fragmentos de código ahora o hacer clic en Aceptar para eliminar el cuadro de diálogo e instalar el fragmento de contenedor más adelante.

Cómo instalar Tag Manager?

En realidad solo necesitarás instalar el fragmento de código que te proporcionará Tag Manager para poder configurar el resto de las etiquetas mediante una interfaz de usuario basada en la Web sin tener que cambiar o implementar código adicional.

Este fragmento de código o contenedor conecta tu web con los servidores de Tag Manager, lo que te permitirá configurar etiquetas de seguimiento, definir activadores para ciertos eventos y crear variables que se puedan utilizar para simplificar y automatizar las opciones de configuración de las etiquetas.

Cómo instalar el código de Tag Manager en tu web?

Si has elegido instalar el fragmento de contenedor más adelante, encontrarás el acceso en la parte superior derecha del área de trabajo de Tag Manager, haciendo clic en tu ID de contenedor (su aspecto es GTM-XXXXXXX).

Cuando hagas clic se abrirá una ventana emergente titulada "Instalar Google Tag Manager" en la que encontrarás dos fragmentos de código que deberás copiar y pegar en la plantilla de tu web, para que aparezca en todas las url de tu sitio.

Su aspecto es el siguiente:

Copia este código y pégalo a continuación de la etiqueta <head> de tu página :
Copia este otro código y pégalo después de la etiqueta <body> de apertura:
Para obtener más información sobre cómo instalar el fragmento de Google Tag Manager, visita la Guía de inicio rápido.

Estructura de Tag Manager

interfaz tag manager

Una cuenta de Tag Manager es el nivel más alto de organización de Tag Manager y dispone de uno o más contenedores, que a su vez contiene una o varias etiquetas configuradas para distintos usos.

Cada cambio que realices en Tag Manager creará un nuevo contenedor perfectamente identificado que te permitirá volver facilmente a cualquier punto de implementación anterior si alguno de los cambios que realices funciona de forma distinta a como habías previsto.

De este modo se reduce el número de errores y se evita recurrir a un desarrollador para hacer cambios o instalar actualizaciones.

Google Tag Manager utiliza de forma conjunta activadores, variables y la capa de datos para controlar cómo se configuran y activan las etiquetas.

Parece muy complicado? No te preocupes, veremos cada una de estas cuestiones por separado.

Qué es un contenedor de Tag Manager?

Un contenedor de Tag Manager es una sección que agrupa un conjunto de etiquetas, activadores, variables y opciones de configuración relacionadas.

En general, tendrás un contenedor activo en tu cuenta de Tag Manager con la implementación actual y una relación histórica de contenedores con todas las implementaciones que hayas publicado en el pasado.

Si al publicar un contenedor con un nuevo conjunto de etiquetas, activadores y variables activo descubres que no se comporta de la forma prevista, podrás volver facilmente a la configuración anterior que elijas.

Qué es una etiqueta de Tag Manager?

Una etiqueta de Tag Manager es un fragmento de código JavaScript que se ejecuta en una página web o aplicación móvil y envía información a terceros como Google Analytics, Google Ads, Doubleclick Floodlight, etc.

Si utilizas diversas herramientas de marketing digital sin una solución de administración de etiquetas como Google Tag Manager, cada una de ellas requerirá la instalación de distintos fragmentos de código en tu web.

Para que sea más fácil configurar y publicar códigos de seguimiento, Google Tag Manager presenta un potente sistema de plantillas de etiquetas certificadas.

Para utilizar una plantilla, solo tienes que elegirla, proporcionar los detalles solicitados y seleccionar los activadores que activarán la etiqueta.

Tag Manager admite las siguientes funciones y plataformas de etiquetas:

  • AB Tasty
  • AdAdvisor
  • adjust
  • Adobe Analytics
  • Adometry
  • AdRoll
  • AppsFlyer
  • Apsalar
  • AT Internet
  • AWIN
  • Bizrate Insights
  • Burt
  • Chartbeat
  • ClickTale
  • Clicky
  • comScore
  • Crazy Egg
  • Conversant
  • Criteo
  • Custom HTML
  • Custom Image
  • Cxense
  • DistroScale
  • dstillery
  • Eulerian Technologies
  • Firebase Analytics
  • Floodlight
  • Function Call
  • FoxMetrics
  • Google Ads
  • Google Analytics
  • Google Consumer Surveys
  • Google Optimize
  • Hotjar
  • Seguimiento de Infinity
  • Intent Media
  • K50
  • Kochava
  • Salesforce DMP (Krux)
  • LeadLab de wiredminds
  • LinkedIn
  • LinkPulse
  • Lytics
  • Marin
  • Médiamétrie
  • Microsoft Bing Ads
  • Mouseflow
  • mParticle
  • Nielsen
  • Neustar
  • Nudge
  • Oktopost
  • Optimise Media
  • ÖWA
  • OwnerListens
  • Parse.ly
  • Píxel de Perfect Audience
  • Personali
  • Piano
  • Placed Inc.
  • Pulse Insights
  • Quantcast
  • Rawsoft
  • SaleCycle
  • SearchForce
  • Segment
  • Shareaholic
  • SimpleReach
  • Snowplow
  • Survicate
  • Tradedoubler
  • Tune
  • Turn
  • Twitter
  • UpSellIt
  • Ve Interactive
  • VisualDNA
  • Webtrekk
  • Xtremepush
  • Yieldify

Si necesitas implementar una etiqueta no admitida explícitamente a través de una plantilla, puedes utilizar etiquetas personalizadas de imagen, HTML o función con las que podrás instalar casi cualquier etiqueta desde Google Tag Manager.

Qué es un activador de Tag Manager?

Un activador de Tag Manager o regla es una herramienta que permite detectar eventos específicos como cargas de página, clics en botones, envíos de formularios, desplazamientos de página, etc. para decidir cuándo ejecutar o activar las etiquetas de Tag Manager.

Por lo tanto un activador es una condición cuya evaluación da como resultado "true" o "false" en el tiempo de ejecución.

Por ejemplo, si quieres que una etiqueta se active solo en la página ejemplo.com/compra/recibo.html, puedes definir un activador con la configuración siguiente:

  • Evento: Página vista
  • Tipo de activador: Página vista
  • Activar: Algunas páginas vistas
  • Activar la etiqueta cuando se cumplan estas condiciones: URL contiene ejemplo.com/compra/recibo.html

Tag Manager ofrece los siguientes tipos de activadores predeterminados:

  • Número de páginas vistas (Web)
  • Clics (Web)
  • Visibilidad del elemento (Web)
  • Envío de formulario (Web)
  • Cambio en el historial (Web)
  • Error de JavaScript (Web)
  • Profundidad de desplazamiento (Web)
  • Temporizador (Web)
  • Eventos personalizados (Web y móvil)
  • Vídeo de YouTube (Web)

Qué es una variable de Tag Manager?

Una variable de Tag Manager o macro permite definir un marcador para que corresponda a un valor que puede cambiar, como un nombre de producto, un precio o una fecha.

Las variables se pueden usar tanto en activadores como en etiquetas:

  • Las variables en activadores se usan para definir filtros que especifican cuándo activar una etiqueta en concreto.
  • Las variables en etiquetas se usan para capturar valores dinámicos.

Tag Manager tiene muchas variables integradas predefinidas entre las que elegir, y permite configurar variables personalizadas adicionales.

Por ejemplo, la variable predefinida "url" contiene la dirección de la página cargada en el momento en que se accede a la variable.

Puedes configurar variables integradas o personalizadas para ser usadas como activador o para enviar información a las etiquetas.

Tipos de variables para páginas web

  • Cookie de origen: el valor se asigna a la cookie de origen cuyo nombre coincida con el dominio en el que se encuentra el usuario.
  • Cadena constante: el valor que se le asigna es la cadena que el usuario proporciona.
  • Número de versión de contenedor
  • JavaScript personalizado: el valor se configura como el resultado de una función JavaScript.
  • Capa de datos: se le asigna el valor "value" cuando se ejecuta este código en su sitio web: dataLayer.push({'Data Layer Name': 'value'}).
  • Modo de depuración: el valor se configura como "true" si el contenedor se visualiza en modo de depuración.
  • Elemento DOM: el valor se configura como el texto del elemento DOM (modelo de objeto de documento) o el valor del atributo de elemento DOM especificado
  • Visibilidad del elemento: el valor se establece en función del estado visible del elemento DOM especificado.
  • URL de referencia HTTP: el valor se configura como la URL de referencia HTTP, la página anterior que ha visitado el usuario.
  • Variable de JavaScript: al valor se le asigna el de la variable global que especifique.
  • Tabla de consulta: el valor se configura según las instrucciones de la tabla de consulta.
  • Número aleatorio: el valor que se le asigna es un número aleatorio comprendido entre 0 y 2147483647.
  • Tabla RegEx: esta variable funciona de forma parecida a las tablas de consulta y, además, permite ejecutar patrones de expresión regular que coincidan con los elementos que desees.
  • URL: con este tipo de variable se pueden analizar y exponer los componentes de URL.

Tipos de variables para aplicaciones móviles

  • Seguimiento del anunciante habilitado: en Android, esta variable devuelve el valor "true" si el seguimiento de anuncios está habilitado, y "false" si el usuario ha inhabilitado los anuncios basados en intereses.
  • ID de la aplicación: al valor se le asigna el nombre del paquete (Android) o el ID del conjunto (iOS).
  • Nombre de la aplicación: al valor se le asigna el nombre de la aplicación que se encuentra en ejecución.
  • Código de versión de aplicación: al valor se le asigna la versión de la aplicación que se encuentra en ejecución.
  • Constante: al valor se le asigna la cadena que proporcione.
  • ID de contenedor: el valor es el ID público del contenedor
  • Número de versión del contenedor: cuando el contenedor está en el modo de vista previa, el valor de esta variable es el número de versión de la vista previa del contenedor.
  • ID del dispositivo: en Android se asigna el ID del dispositivo al valor, mientras que en los contenedores antiguos de iOS, se le asigna " (la cadena vacía).
  • Nombre del dispositivo: al valor se le asigna el nombre del dispositivo de la aplicación que se encuentra en ejecución
  • Nombre del evento
  • Parámetro de evento: al valor se le asigna el de un parámetro de evento de Firebase Analytics registrado de la clave en cuestión.
  • Propiedad de usuario de Firebase: al valor se le asigna el de la propiedad de usuario de Firebase Analytics de la clave en cuestión.
  • Llamada de la función: al valor se le asigna el valor devuelto de una llamada a una función registrada previamente.
  • ID para publicidad: en Android, el valor que se le asigna es el ID de publicidad.
  • Idioma: al valor se le asigna el código de dos letras asociado al idioma configurado por el usuario en el dispositivo.
  • Tabla de consulta: el valor se configura según las instrucciones de la tabla de consulta.
  • Versión del sistema operativo: al valor se le asigna la versión del sistema operativo en el que está instalada la aplicación.
  • Plataforma: al valor se le asigna la plataforma de la aplicación que se encuentra en ejecución (p. ej., "Android").
  • Número aleatorio: al valor se le asigna un número aleatorio comprendido entre 0 y 2147483647.
  • Resolución de pantalla: al valor se le asigna la resolución de pantalla del dispositivo de la aplicación que se encuentra en ejecución.
  • Versión del SDK: al valor se le asigna la versión del SDK del sistema operativo en el que está instalada la aplicación.
  • Recopilación de valores (solo en contenedores antiguos): esta variable contiene un conjunto de pares de clave-valor en formato JSON.

Qué es la capa de datos de Tag Manager?

La capa de datos de Tag Manager o Data Layer es un objeto JavaScript que permite retener valores temporalmente en las cookies del navegador para que puedan usarse en etiquetas, activadores y variables.

Las variables de Tag Manager también pueden configurarse para recuperar directamente los valores de las variables de JavaScript, de las cookies propias o del DOM, pero la capa de datos permite estructurar y organizar mejor el proceso.

Implementando una capa de datos se reduce la probabilidad de perder datos debido a cambios de código inadvertidos, se fomenta un modelo de datos bien organizado y accesible y es más fácil solucionar posibles problemas.

­