Curso básico de Google Tag Manager gratis y desde cero

En este curso básico de Google Tag Manager aprenderás lo necesario para gestionar todas tus etiquetas script como por ejemplo Google Analytics, Google Ads, Linkedin, Facebook y cualquier otra que se te ocurra.

Aprenderás a crear, editar, gestionar y publicar las etiquetas, activadores y variables.

¿Qué es Google Tag Manager?

Google Tag Manager es una herramienta creada para ayudarte a gestionar etiquetas Script o fragmentos de código necesarios para que herramientas como Google Analytics, Google Ads, Facebook Ads y muchas otras herramientas funcionen en un sitio web.

Una vez Google Tag Manager es correctamente instalado en un sitio web, desde su interfaz puedes gestionar, agregar y publicar de manera visual y sencilla todas las etiquetas que necesites desde una interfaz web y sin necesidad de código.

Estructura de la información en Google Tag Manager

Google Tag Manager en su estructura de información cuenta en el nivel más alto con una cuenta, que puedes crear fácilmente con tu correo de Gmail. Una cuenta puede contener múltiples contenedores, piensa en un contenedor como la colección de configuraciones, variables, activadores y etiquetas que un sitio web puede necesitar para funcionar.

En una vista general, la estructura de información de Google Tag Manager tendría un aspecto como el siguiente:

Esta estructura de contenedores en un proyecto real de Google Tag Manager tiene el siguiente aspecto:

Etiquetas en Google Tag Manager

Las etiquetas de Google Tag Manager son los scripts o fragmentos de código que de hecho se ejecutarán cuando algo pase o cuando se cumpla la regla de un activador que veremos más adelante de qué se trata.

El menú de etiquetas o Tags se encuentra de segundo en el menú principal de Google Tag Manager:

En el menú de etiquetas encontrarás todas las etiquetas actualmente creadas en tu contenedor en formato tabla, con la cual podrás ordenar por nombre, fecha, tipo y por supuesto cuentas con un buscador para buscar por cualquiera de estos atributos ya mencionados.

La tabla de etiquetas también cuenta con una casilla para seleccionar una o más etiquetas y aplicar acciones en bloque, tales como editar activadores, pausar, mover a una carpeta o eliminar la etiqueta.

Cómo crear una etiqueta en Google Tag Manager

Para crear una nueva etiqueta en Google Tag Manager, debes dar clic en el botón “New” o “Nuevo”.

Verás un nuevo panel que se desliza desde el costado derecho, allí deberás ingresar un nombre de la etiqueta, elegir un tipo de etiqueta y un activador.

Para seleccionar el tipo de etiqueta o tag, haz clic en el cuadro “Tag Configuration” o “Configuración de la etiqueta”, verás un nuevo menú deslizarse desde la parte derecha de la pantalla.

¿Qué tipo de etiqueta elegir en Google Tag manager?

Hay muchos tipos de etiquetas soportados nativamente tales como:

• Google Analytics Universal
• Google Analytics: configuración de GA4
• Google Analytics: evento de GA4
• Google Ads conversion tracking
• Google Ads Remarketing
• Google Marketing Platform
• Conversion Linker
• Google Optimize
• Google Surveys
• Custom HTML
• Custom Image
• Muchos más

Deberás elegir la etiqueta de la plataforma con de la que quieras instalar la etiqueta, por ejemplo, si quieres agregar Google Analytics 4 a tu sitio web, debes agregar el tipo de etiqueta “Google Analytics: GA4 Configuration”.

Una vez selecciones el tipo de etiqueta, debes proceder a agregar sus configuraciones, normalmente deberás agregar un ID o un número de seguimiento. Continuando con el ejemplo de Google Analytics 4, deberás agregar el ID del stream de GA4 así:

Dependiendo del tipo de etiqueta que elijas, podrás configurar algunos otros aspectos. La etiqueta de GA4 permite configurar “Campos adicionales de medición” y “Propiedades de usuarios” que son opcionales.

Ahora lo único que resta es agregar un activador, que es básicamente cuándo se debe ejecutar la etiqueta que estamos creando. Lo normal para un tipo de etiqueta como GA4 es activarla en todas las páginas.

Por suerte este es el único activador que viene creado por defecto creado en la cuenta.

Haz clic en el cuadro de “Triggering” o “Activadores”, verás un nuevo menú deslizarse por la parte derecha de la pantalla, allí deberás elegir “All pages” o “Todas las páginas”.

Ya tienes toda la configuración necesaria de una etiqueta para activarla en tu sitio web.

Ahora solo resta hacer clic en el botón “Save” o “Guardar”.

Deberías tener tu nueva etiqueta creada en la tabla de etiquetas.

Galería de etiquetas de Google Tag Manager

Google Tag Manager cuenta con una gran comunidad de usuarios que crean templates o plantillas de etiquetas para facilitar la vida de otros usuarios, dando soporte a otras plataformas que por defecto no están disponibles en el menú de tipos de etiquetas.

Para agregar una etiqueta de la galería de plantillas, repite todos los pasos anteriores hasta llegar a la sección para seleccionar el tipo de etiqueta y haz clic en la opción “Discover more tag types in the Community Template Gallery” o “Descubrir más tipos de etiquetas en la galería de etiquetas de la comunidad”.

Usa el ícono del buscador para encontrar la plataforma de la que quieres agregar la etiqueta, como por ejemplo Facebook

Escoge una de ellas y acepta las condiciones para agregarlo a tu espacio de trabajo, como todas las demás etiquetas, estas tendrán diferentes configuraciones que puedes cambiar y deberás agregar un activador.

Activadores o Triggers en Google Tag Manager

Los activadores de Google Tag Manager básicamente se encargan de “escuchar” los eventos de usuario para lanzar una etiqueta en el momento adecuado.

Puedes encontrar los activadores en el menú principal de la izquierda en la interfaz de Google Tag Manager ubicado en la tercera posición:

Similar a como se pueden gestionar las etiquetas, el menú de activadores cuenta con una tabla con los activadores disponibles que se puede filtrar y organizar. Si tu cuenta de Tag Manager es nueva, este apartado aparecerá vacío hasta que crees un primer activador.

Cómo funcionan los activadores o triggers en GTM

Pongámoslo más sencillo con un ejemplo, digamos que queremos enviar un evento a GA4 cuando un formulario sea enviado. En ese caso debemos crear un activador o trigger que escuche los envíos de formularios y activar la etiqueta de GA4 cuando este ocurra.

Cómo crear un activador o trigger en Google Tag manager

Para crear un nuevo activador, haz clic en el botón “New” o “Nuevo” ubicado arriba de la tabla de activadores creados, verás un menú deslizarse desde la parte derecha de la pantalla.

Agrega un nombre descriptivo a tu activador que se refiera a la acción en la cual se va a activar, por ejemplo: envío de formulario de newsletter o páginas de agradecimiento.

Haz clic en el cuadro “Trigger configuration” o “Configuración del activador”, verás un menú contextual deslizarse desde la parte derecha de la pantalla. Aquí deberás seleccionar el tipo de activador que quieres usar.

Tipos de activadores disponibles en Google Tag Manager

Por defecto, Google Tag Manager cuenta con una amplia variedad de activadores para prácticamente cualquier ocasión que puedas necesitar, esta es la lista de triggers:

• Page View o Vista de página
  • Consent Initialization: se dispara antes de todas las etiquetas y es usado para comprobar si el usuario dió permiso para almacenar cookies.
  • Initialization: se dispara cuando se carga el contenedor en el sitio web.
  • Page View: se dispara inmediatamente después del evento initialization y es el más usado para cargar scripts como por ejemplo el de Google Analytics.
  • DOM Ready: se dispara cuando se puede interactuar con el sitio web.
  • Window Loaded: se dispara cuando todos los elementos del sitio web están cargados, incluídos los scripts y las imágenes.
• Click
  • All Elements: se dispara cuando se da clic a cualquier elemento.
  • Just Links: se dispara cuando se da clic a cualquier link de HTML “etiqueta <a href=”…”>Link</a>”
• User engagement
  • Element visibility: se dispara cuando un elemento es visible en el viewport.
  • Form submission: se dispara cuando se envía un formulario.
  • Scroll depth: se dispara cuando se alcanza cierto porcentaje de scroll de la pantalla.
  • YouTube video: se dispara cuando se interactúa con videos de YouTube en el sitio web.
• Other
  • Custom event: se dispara cuando se ejecuta un evento personalizado en la capa de datos.
  • History change: se dispara cuando el historial del navegador cambia.
  • Javascript error: se dispara cuando se encuentra un error de Javascript en la consola.
  • Timer: se dispara después de cierto tiempo.

Escoge el tipo de activador que más se ajuste a la situación que necesitas cubrir, por ejemplo si quieres crear un activador para las páginas de agradecimiento o thank you page, deberías seleccionar el activador de Page View o Vista de página.

Independientemente del activador que elijas, todos ellos se pueden configurar de la misma manera, puedes ejecutar el activador en todas las instancias del evento (en este caso en todas las páginas) o puedes seleccionar que se ejecute en algunas de ellas.

Como queremos que este activador se dispare en las páginas de agradecimiento o thank you pages, debemos seleccionar “Some Page Views” o “Algunas vistas de página”, aparecerán tres campos para seleccionar la variable, el tipo de comprobación y el valor así:

En el primer campo seleccioné Page URL para capturar la URL actual del sitio, en el campo de validación seleccioné Contains y en el campo de valor puse thank-you. Esto lo podemos leer de la siguiente manera: Cuando la URL contenga la palabra “thank-you” dispara este activador.

Si el campo Page URL no está disponible, debes activarlo en el menú de variables, Mira el apartado de variables de este mismo post.

Ahora solo resta guardar el activador y estaría disponible para ser usado con cualquier etiqueta.

Variables de Google Tag Manager

Las variables en Google Tag Manager son datos que podemos tomar para tener información dinámica de ciertos elementos, como por ejemplo la URL del navegador, el texto de un enlace, el ID de un formulario y prácticamente lo que te puedas imaginar.

Para acceder a las variables de Google Tag Manager, haz clic en el menú “Variables” ubicado en el menú principal en la cuarta posición.

Tal como en las etiquetas y en los activadores, este menú es una tabla donde puedes gestionar las variables, ordenarlas, crearlas, activarlas y desactivarlas.

Tipos de variables

Google Tag Manager cuenta con dos tipos de variables:

• Variables incluídas (Built-in variables): son las que vienen integradas en Google Tag Manager, entre ellas:
  • Page URL
  • Page Hostname
  • Page Path
  • Referrer
  • Event
  • Environment Name
  • Container ID
  • Container Version
  • Random Number
  • HTML ID
  • Error Message
  • Error URL
  • Error Line
  • Debug Mode
  • Click Classes
  • Click Element
  • Click ID
  • Click Target
  • Click Text
  • Click URL
  • Form Classes
  • Form Element
  • Form ID
  • Form Target
  • Form Text
  • Form URL
  • Page Hostname
  • Page Path
  • Page URL
  • Video Current Time
  • Video Duration
  • Video Percent
  • Video Provider
  • Video Status
  • Video Title
  • Video URL
  • Video Visible
  • Scroll Depth Threshold
  • Scroll Depth Units
  • Scroll Direction
  • Percent Visible
  • On-Screen Duration

• Variables definidas por el usuario (User-Defined variables): son aquellas creadas por los usuarios, y pueden ser de los siguientes tipos:
  • HTTP Referrer
  • URL
  • 1st Party Cookie
  • Custom JavaScript
  • Data Layer Variable
  • JavaScript Variable
  • Auto-Event Variable
  • DOM Element
  • Element Visibility
  • Constant
  • Custom Event
  • Environment Name
  • Google Analytics Settings
  • Lookup Table
  • Random Number
  • RegEx Table
  • Undefined Value
  • User-Provided Data
  • Random Number
  • RegEx Table
  • Undefined Value
  • User-Provided Data
  • Container ID
  • Container Data
  • Container Version Number
  • Debug Mode

Cómo activar o desactivar variables en Google Tag Manager

En la sección de variables incluídas, haz clic en el botón “Configurar”.

Verás un nuevo menú deslizándose desde la parte derecha de la pantalla que incluye todas las variables incluídas soportadas por Tag Manager.

Para activarlas o desactivarlas tan solo debes hacer clic en el campo de selección y estas se irán agregando o quitando de la lista de variables.

Una vez agregadas las variables, estas estarán disponibles para ser usada en cualquiera de las etiquetas o activadores.

Cómo publicar los cambios hechos en Google Tag Manager

Una vez hayas terminado de hacer todos los cambios, debes publicarlos para hacerlos visibles a todos tus usuarios. Para publicar lo unico que debes hacer es dar clic en el botón “Submit” o “Publicar” ubicado en la parte superior derecha de la pantalla.

Se abrirá una nueva ventana donde deberás agregar un titulo y una descripción de lo que hiciste, esto se usa para llevar un control detallado de los cambios y es altamente recomendado.

Ahora solo resta hacer clic en el botón de Publicar para que los cambios puedan ser visualizados por los usuarios.

Cómo instalar Google Tag Manager en WordPress

Instalar Google Analytics en WordPress es cuestión de instalar un plugin, sigue el paso a paso de este post para lograrlo.