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:

estructura de la información en google tag manager


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

contenedores de Google Tag Manager


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:

menú de etiquetas 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.

etiquetas creadas de Google Tag Manager


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.

acciones en bloque para etiquetas de google tag manager

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”.

boton nueva etiqueta de google tag manager


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.

nueva etiqueta de google tag manager


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”.

tipos de etiquetas de google tag manager


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í:

agregando la etiqueta de configuracion de google analytics 4


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”.

configuracion completa de una etiqueta en google tag manager


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”.

boton de galeria 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

plantillas de etiquetas de la comunidad de google tag manager


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:

menú de activadores de google tag manager


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.

tabla de activadores de google tag manager


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.

Por cierto, tenemos un video explicando a detalle cómo enviar datos a GA4 cuando un usuario llene y envíe un formulario, míralo aquí



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.

activador de page view


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.

configuracion de acticadores de google tag manager


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í:

activador configurado para thank you page


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.

menu de variables en Google tag manager


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”.

variables incluidas en google tag manager


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.

agregar o quitar variables en tag manager


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.

boton para publicar los cambios


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.

titulo y descripción de los cambios hechos en gtm


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.

Ayudanos a seguir creando contenidos gratuitos

Dona en Paypal
Compra hosting de alta calidad en Siteground
Suscríbete a nuestro canal y dale like a este video.
Comparte este contenido.

¿Quieres apoyarnos de alguna otra manera? ¿Tienes alguna pregunta? escríbenos a info@tutopress.co

Fuente: este post proviene de Tutopress, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Con la masificación de internet y su vasto uso en dispositivos móviles, comenzamos a usar diferentes herramientas para comunicarnos, incluyendo redes sociales, aplicaciones de mensajería, buscadores, ...

Etiquetas: BlogTag Manager

Recomendamos

Relacionado

Blog Tag Manager

Google Tag Manager es una herramienta muy poderosa que te ayudará a centralizar todas tus etiquetas para captar datos tales como: Google Analytics, Google Ads, Hotjar, CrazyEgg, etc. Con Google Tag Manager también puedes capturar eventos e información valiosa para tu negocio, tal como la información de comercio electrónico mejorado. En este completo tutorial, te enseñaremos qué es Google Tag Manag ...

Blog Tag Manager

Google Tag Manager es una herramienta muy poderosa que te ayudará a centralizar todas tus etiquetas para captar datos tales como: Google Analytics, Google Ads, Hotjar, CrazyEgg, Pixel de Facebook. En este completo tutorial, te enseñaremos cómo instalar el pixel de Facebook paso a paso. ¿Qué es Google tag manager y cómo funciona? Aprende a instalar Tag Manager en WordPress Documentación del plugin ...

Blog Google Analytics Tag Manager

Google Analytics 4 es la última versión de la plataforma de análisis de datos de Google. A diferencia de Google Analytics Universal, GA4 se centra en eventos en lugar de sesiones, lo que significa que los eventos personalizados son una parte fundamental para entender cómo los usuarios interactúan con su sitio web. En este artículo, explicaremos qué son los eventos y cómo crear eventos en Google An ...

Blog Google Analytics Tag Manager ...

Si tienes un sitio web creado con WordPress, es importante que tengas instalado Google Analytics 4 para poder medir y analizar el tráfico del mismo. En este artículo, te explicaremos cómo configurar Google Analytics 4 en tu sitio web WordPress para que puedas obtener información valiosa sobre tus visitantes. ¿Qué es Google Analytics 4 y para qué sirve? Google Analytics 4 es una herramienta de anál ...

Actualidad cookies GDPR ...

¿Guardas cookies de tus usuarios antes de que den su consentimiento? ¿Utilizas Google Analytics y te preocupa perder datos de tu web por cumplir el Reglamento de Protección de datos (GDPR)? Soy Carlos Estévez, COO en Internet República, y en este post te explico paso a paso cómo utilizar Google Analytics sin cookies, tanto para Google Analytics 4 como para Universal, e incluso a configurar Google ...