Wanatop Academy

Tutorial GTM: Qué es y para qué sirve

18 de agosto de 2020
Marketing Digital

¿Qué es GTM y para qué sirve? En este artículo te vamos a contar cómo dar tus primeros pasos con Google Tag Manager. Se acabó el recurrir al código fuente de un sitio web cada vez que quieres incluir un código de seguimiento.

Sigue leyendo si quieres conocer el funcionamiento y la utilidad de Google Tag Manager.

¿Qué es Google Tag Manager?

Google Tag Manager, el administrador de etiquetas de Google, es una herramienta totalmente gratuita que sirve para configurar de forma ágil y rápida diferentes códigos de seguimiento en cualquier sitio web o App sin tener que contar con la ayuda de su desarrollador.

que es google tag manager

Interfaz Google Tag Manager

¿Google Tag Manager para qué sirve?

Quieres lanzar una campaña en Google Ads y necesitas incluir el código de conversión o simplemente necesitas añadir el código de Analytics en tu App. 

Con la ayuda de Tag Manager puedes incluir estos códigos, y muchos más (Hotjar, Linkedin, Remarketing Google Ads, píxel de Facebook … ) sin necesidad de tener conocimientos técnicos avanzados.

En definitiva, ¿para qué sirve Tag Manager? para medir todo lo que pasa en un sitio web o APP (tráfico, eventos, rendimiento de las campañas de publicidad … ) incluyendo diferentes scripts (o etiquetas) sin tener que recurrir al departamento de sistemas.

A continuación, seis ventajas de utilizar Google Tag Manager:

  • Herramienta totalmente gratuita. Pertenece a la suite de productos de Google. Lo que se conoce por Google Marketing Platform.
  • Control de versiones. Cada vez que hagas una nueva configuración en Tag Manager se guarda una nueva versión. Si te equivocas, puedes volver a la versión anterior.
  • Integración de herramientas de Google y de terceros. Desde Tag Manager puedes implementar cualquier script que necesites para el correcto seguimiento de tu sitio web o APP (iOS y Android).
  • Evita recurrir con frecuencia al departamento de sistemas. Puedes ser autosuficiente para editar cualquier pixel de seguimiento sin recurrir al código fuente del site, bien sea porque es un proyecto nuevo y quieres incluir el código de seguimiento de Analytics y/o porque vas a lanzar una campaña en Facebook y necesitas incluir el píxel de Facebook, entre otros. 
  • Herramienta ágil e intuitiva.
  • Limpieza del código fuente. El código fuente de un sitio web está lleno de scripts de seguimiento: Google Analytics, el código de conversión de Google Ads, el script de remarketing, píxel de Facebook etc.

Gracias a Tag Manager todos estos códigos se reducen a uno solo. Es lo que llamamos contenedor, que explicaré más adelante qué es y cómo se configura. 

Cuando quieres hacer alguna modificación de los códigos únicamente tienes que acceder a la herramienta y hacer las configuraciones pertinentes.

Ejemplo del código fuente de una web que no utiliza Tag Manager:

google tag manager extension

Ejemplo del código fuente de una web que utiliza Tag Manager:

como usar tag assistant

Cómo funciona GTM: Contenedor, etiquetas, variables y activadores.

Y te preguntarás ¿cómo funciona Google Tag Manager? 

Antes de nada, tienes que saber que para acceder a la herramienta necesitas una cuenta de gmail. Te recomendamos que utilices la misma cuenta de gmail en todos los productos de Google que estés utilizando en un proyecto, como por ejemplo: la cuenta de Analytics, la cuenta de Data Studio, la cuenta de Google Ads para las campañas de publicidad y Tag Manager. 

De esta forma la gestión va a ser más fácil y evitas problemas de sincronización entre las diferentes herramientas.

Y ahora sí ¡vamos a conocer el funcionamiento de GTM!

Google Tag Manager está formado por un contenedor, etiquetas (o tags) variables y activadores (o triggers).

  • Contenedor de Tag Manager. 

Es el código javaScript que obtienes cuando creas una cuenta de Tag Manager. Es el único código que debes inyectar en el sitio web. 

como usar google tag manager

Ejemplo contenedor de Tag Manager

Este contenedor agrupa todas las etiquetas (códigos) que se crean dentro de la propia herramienta. Más adelante te cuento cómo crear e instalar un contenedor de GTM. 

Cada contenedor tiene un ID identificativo. El del ejemplo es el ID: GTM-5BBDPD3

  • Etiqueta o tag

Plantillas que hacen referencia a un fragmento de código JavaScript/HTML. En GTM existe una gran variedad de etiquetas en función del tipo de seguimiento que quieras realizar: Google Analytics, Google Ads, Bing …

En caso de no encontrar la etiqueta que necesitas, existe el tag: “HTML personalizada”. 

configurar google tag manager

Algunas etiquetas de Tag Manager

Te vamos a poner un ejemplo para que entiendas mejor qué es la etiqueta en Tag Manager: Cuando quieres incluir el código de Analytics en un sitio web, en vez de insertarlo a través de un plugin o directamente en el código fuente de tu sitio web, puedes utilizar la etiqueta de Tag Manager: Google Analytics – Universal Analytics. 

Únicamente tienes que obtener el UA de tu cuenta de Analytics y configuras en el tag cuándo quieres que se active. Más adelante te cuento cómo configurar la etiqueta de Analytics desde cero.

  • Activadores o Triggers: 

Es el motor de las etiquetas. El activador determina cuándo se tiene que activar una etiqueta. Por lo tanto, para que las etiquetas funcionen necesitan como mínimo de un activador. 

Siguiendo con el ejemplo, la etiqueta de Analytics se tiene que activar siempre que se cargue una página del sitio web. Para ello, puedes utilizar el activador “all pages” que viene por defecto en GTM. Es el único que viene predefinido, el resto debes configurarlo tú según necesidad. 

  • Variables

La utilidad de las variables es almacenar datos y también se utilizan como condicionantes a la hora de crear los activadores. Así pues, las variables están presentes tanto en la creación de las etiquetas (para capturar valorar estáticos y/o dinámicos) como de los activadores (para definir las reglas de activación).

Por lo tanto, tu trabajo con Tag Manager es crear etiquetas, según los códigos de seguimiento que quieres incluir en tu sitio web, variables y activadores.

Configuración de Tag Manager e instalación.

Llegados a este punto, vas a conocer cómo poner todo en práctica. A continuación te dejamos un tutorial de: cómo crear una cuenta de Tag Manager, cómo instalar el contenedor y cómo configurar la etiqueta de Google Analytics para empezar a medir el tráfico de un sitio web.

Crear cuenta de Google Tag Manager.

Login en Tag Manager

  • Añade un nombre a la cuenta de GTM y configura el país del proyecto en cuestión. Lo más lógico es que el nombre de la cuenta sea el nombre de la empresa: nombre de tu blog, de una tienda online etc.

instalar google tag manager en wordpress

Crear cuenta de GTM

Configurar contenedor de Tag Manager

El contenedor de tu cuenta de Tag Manager corresponde con la propiedad a la que vas a hacerle el seguimiento. Siguiendo con el tutorial imagina que estamos configurando la cuenta de Tag Manager de una tienda online para España

  1. Elige un nombre descriptivo para el contenedor. Por ejemplo: tienda online ES.
  2. Selecciona la plataforma donde vas a utilizar el contenedor: en un sitio web, una App, AMP o en un server (fase beta, reciente incorporación). En este caso, seleccionamos “Sitio web”.

como funciona google tag manager

Crear contenedor GTM. Ejemplo tienda online

Te dejamos un ejemplo de la estructura de la cuenta de Tag Manager cuando tienes un contenedor:

que es google tag manager y como funciona

Ejemplo estructura cuenta de GTM con un contenedor

En caso de que la empresa tenga una tienda online en otro país y con otro dominio, la estructura de la cuenta de Tag Manager es la siguiente:

tutorial google tag manager

Ejemplo estructura cuenta de GTM con dos contenedores

La cuenta corresponde con la empresa en cuestión. Dentro de una cuenta puede haber varios contenedores. En este caso, te recomiendo que cada contendor sea un dominio diferente.

En cambio, si gestionas proyectos distintos entre sí, por ejemplo el blog de marketing de tu amigo y tu tienda online, tendrás que crear una cuenta de GTM por proyecto.

Instalar el contenedor de Tag Manager

Una vez aceptamos el acuerdo de condiciones de servicios de Google Tag Manager, solo queda instalar el contenedor de GTM en el sitio web. 

El contenedor de Tag Manager lo forman dos scripts. El primer fragmento de código debe ir obligatoriamente lo más alto posible de la etiqueta <head> del HTML de la página web. El segundo fragmento de código tiene que ir inmediatamente después de la etiqueta <body> de apertura del HTML de la página web.

para que sirve el google tag manager

Contenedor de Tag Manager

Si utilizas WordPress, puedes utilizar el plugin Google Tag Manager for WordPress. Solo necesitas el ID del contenedor y seleccionar la opción de instalación personalizada, por la que tendrás que añadir el fragmento de código que se te facilita.

para que sirve google tag manager

Si no eres de plugin, te dejamos este post de cómo instalar Google Tag Manager en WordPress en Español.

Una vez tienes instalado tu contenedor de Tag Manager, accede a la interfaz de GTM y selecciona el botón “enviar” de la esquina superior derecha.

que es google tag manager

¡Ya tienes el contenedor listo para empezar a crear etiquetas, variables y activadores! 

Configurar el código de Google Analytics con Tag Manager.

Y ¿cómo usar Google Tag Manager? 

Llegado a este punto tienes creada una cuenta de Tag Manager, el contenedor instalado y publicado. Ahora bien, cuando tienes un nuevo proyecto, ¿qué código de seguimiento es el primero en implementar? el código de Google Analytics. 

Pues en Tag Manager ocurre lo mismo. Cuando configuras una cuenta de Tag Manager, la primera etiqueta que se debe crear es el tag de Google Analytics.

Recuerda que en el código fuente de tu sitio web únicamente tiene que estar instalado el contenedor de GTM. Si tienes implementado el código de Google Analytics, debes eliminarlo ya que lo vamos a configurar a través de Tag Manager.

Ahora sí ¡vamos a por la configuración de la etiqueta de Google Analytics!

  • Desde Tag Manager crea una nueva etiqueta del tipo Universal Analytics.

14.configurar tag google analytics

Configuración tag Google Analytics en GTM

  • Añade un nombre a la etiqueta y elige el tipo de seguimiento. En este caso, página vista ya que este comportamiento es el que se utiliza para traquear el tráfico que llega a una web.

que es gtm

Configuración tag Google Analytics en GTM

  • Configurar una nueva variable de Google Analytics.

Es necesario incluir el ID de la propiedad de Analytics del proyecto. Este identificativo lo puedes encontrar en la propiedad de Google Analytics > información de seguimiento > código de seguimiento.

para que sirve google tag manager

Configuración variable de Google Analytics en GTM

  • Añadir el activador. Recuerda que cualquiera etiqueta necesita de un activador para funcionar. En este caso, añadimos el activador “All Pages” puesto que Analytics nos indica que su código de seguimiento debe estar incluido en todas las páginas de una web. 

google tag manager para que sirve

Activador All Pages GTM

que es google tag manager

Configuración tag Google Analytics en GTM

  • Guarda y publica el contenedor haciendo clic de nuevo a “enviar”. De esta forma, la etiqueta empezará a recoger datos en el momento que empiece a llegar tráfico al sitio web.

tutorial gtm

Publicar contenedor de GTM

  • Por último, instala en tu navegador la extensión de Google Tag Assistant para comprobar que has configurado correctamente el contenedor de GTM y la etiqueta de Google Analytics.

    Por si no conocías esta extensión gratuita, Google Tag Assistant te permite saber si los códigos de seguimiento que has implementado están correctamente configurados e instalados.

Cómo usar Google Tag Assistant en 4 pasos:

  1. Instalar la extensión en tu navegador.
  2. Acceder al sitio web en el que quieres comprobar la implementación de tus etiquetas.
  3. Clic en “enable”.
  4. Refresca el sitio web.

que es google tag manager y como funciona

Extensión tag assistant

Enhorabuena ¡Ya tienes configurada la etiqueta de Google Analytics para una propiedad web! 

¿Qué te ha parecido el tutorial? ¿Conocías la herramienta y su utilidad? Ya no tienes excusa para empezar a utilizar Tag Manager en tus proyectos. Sin duda, conocer a fondo esta herramienta te salvará de muchos apuros en el sector del marketing digital, y esto no es nada comparado con todo lo que puedes llegar a hacer con GTM. Por eso, en Experts Academy hemos preparado nuestro propio máster avanzado de marketing digital, en el que se incluyen este y muchas mas competencias para que salgas siendo un verdadero experto. ¡Apuntate ahora!

Cuéntanos tu experiencia 🙂

¿Quieres empezar o cambiar tu rumbo laboral?