En este tutorial de Google Tag Manager 2019 te explicaré paso a paso como aprender a usar la herramienta, cómo instalar su código en tu web y como comprobar si lo has hecho correctamente. Esta es la guía más completa para que entiendas cómo funciona y puedas aprender GTM para principiantes.
Google Tag Manager es un sistema de gestión de etiquetas (en inglés llamado TMS). Para que me entiendas, te diré que cada etiqueta es un trocito de código que antes debías colocar en las entrañas de tu web mientras que ahora, con Google Tag Manager, lo añades cómodamente a esta fantástica herramienta.
GTM gestiona el etiquetado de tus campañas de marketing así como de eventos y funciones avanzadas independientes. En este tutorial para aprender a usar Google Tag Manager te cuento:
- Por qué empezar a usar Google Tag Manager
- Definición de conceptos
- Como introducir el código en tu web
- Cómo comprobar si has instalado correctamente Google Tag Manager
TUTORIAL DE GOOGLE TAG MANAGER
Si eres experto en código y puedes hacer y deshacer a tu antojo en el corazón de tu web, Google Tag Manager te aportará organización y centralización de todas tus etiquetas pero es que, si no sabes de código, ¡te salvará la vida!
Con Google Tag Manager tendrás todos esos pequeños trocitos de código llamados etiquetas agrupados en un solo lugar y con una estética que dista mucho del lenguaje difícilmente descifrable del código puro informático.
Además, como esta es una herramienta de Google, al buscador le encanta que uses GTM porque favorece la velocidad de carga de tu web. En vez de cargarse los fragmentos de código poco a poco, se cargan de una sola vez al cargar Google Tag Manager.
Siendo una herramienta gratis y bastante intuitiva a la hora de usarla, nos da datos precisos y nos permite hacer seguimiento de eventos y clics con opciones avanzadas que no podemos tener en Google Analytics ni Google AdWords.
DEFINICIÓN DE CONCEPTOS DE GOOGLE TAG MANAGER
Si bien en Google Analytics la jerarquía de la herramienta consta de Cuenta / Propiedad / Vista en Google Tag Manager los elementos a tener en cuenta son: Etiquetas / Activadores /Variables.
Google Tag Manager funciona con proyectos. En este tutorial quiero hacer hincapié en los conceptos porqué son indispensables para comprender bien cómo funciona el programa.
Los proyectos contienen contenedores. Para que me entiendas, un proyecto puede ser un cliente y ese cliente (proyecto) puede tener varias webs (contenedores). En un caso así crearías un proyecto que tendría en su interior tantos contenedores como webs tuviese el cliente.
Etiqueta: Como ya te he comentado, la etiqueta es un fragmento de código HTML o JavaScript que sirve para etiquetar nuestro sitio.
Activador: Es una condición o regla necesaria para que esa etiqueta empiece a funcionar. Por ejemplo, una vista a la página de confirmación de compra o un click en un botón determinado. Cuando esa acción sucede, el ‘Activador’ activa la etiqueta que previamente has creado.
Variable: Las variables son elementos que pueden afectar tanto a las etiquetas como a los acrtivadores. Son datos dinámicos que extraemos del sitio web y enriquecen todavía más las funciones de Google Tag Manager.
Simplificando: Las etiquetas se activan según unas reglas (activadores) y esas reglas son cambiantes (variables).
Te interesa: 15 Trucos SEO para Instagram, Facebook y Twitter
CÓMO PONER EL CÓDIGO DE GOOGLE TAG MANAGER EN MI WEB
Iremos paso a paso porqué es fácil perderse durante el proceso de creación.
1- Crea el contenedor de tipo Sitio Web
Entramos a tagmanager.google.com y arriba a la derecha le das a “CREAR CUENTA”.
Ante ti se abre esta página que te pide que le des un nombre a esa cuenta y que la sitúes en tu país. Rellena los datos y haz clic en ‘continuar’.
Acto seguido te pide que configures el contenedor. Debes escribir la URL de tu web (recuerda especificar si va con http o con https) y debes seleccionar “Sitio Web” donde pone ‘Dónde Utilizar el Contenedor’. Haz clic en ‘Crear’
Tras aceptar las condiciones legales que Google te presenta, se abrirá ante ti una pantalla con el código de Google Tag Manager que debes introducir en tu web. Como ves, el código va en dos partes. La parte más larga, la primera, tiene que ir dentro de la etiqueta <Head>, es decir, en el Header de tu web.
La parte de código que falta, tiene que ir colocada después de la apertura de la etiqueta <body> de tu sitio web.
Hay varias maneras de introducir el código de Google Tag Manager en tu web, lo puedes hacer -si tienes WordPress- desde Apariencia/Editor y buscas luego el header y el body. También lo puedes hacer modificando el archivo desde el servidor o, simplemente, usando un plugin.
Yo te recomiendo pegarlo en el header y el body de tu web de manera manual, es una sola vez y ya lo tienes para siempre, además, es sencillo.
Tu header debe quedar así una vez añadas la etiqueta de código de Google Tag Manager. Yo la tengo puesta antes del cierre de Head y justo después del inicio de body.
Si durante el proceso perdieras de vista tu código de Google Tag Manager no pasa absolutamente nada. Lo puedes recuperar de manera sencilla y manual yendo al inicio de todo, entrando en Google Tag Manager y haciendo clic en la ruedecita de herramientas correspondiente a la cuenta que acabas de crear.
Se te abrirá la configuración de tu cuenta y sólo tienes que hacer clic en la opción ‘Instalar Google Tag Manager’ para que la pantalla con tu código se te vuelve a abrir y puedas copiarlo y pegarlo en tu sitio web.
Una vez tienes el código pegado en tu web, ya puedes empezar a crear etiquetas con activadores y variables. Recuerda que si quieres fusionar Google Tag Manager y Google Analytics, deberás borrar el código de Analytics que tenías previamente en tu web para no duplicar información y generar errores. Lo mismo pasa con el Píxel de Facebook u otras aplicaciones que ahora podrás agrupar cómodamente en Google Tag Manager. Te enseñaré a hacerlo todo en mi próximo post, si no te lo quieres perder, te lo puedo enviar por email, entra y no te lo perderás.
CÓMO SABER SI HE INSTALADO BIEN GOOGLE TAG MANAGER
Una vez hayas insertado el código de Google Tag Manager en el interior de tu web y lo hayas guardado, tienes que ir a Chrome y agregar la extensión Google Tag Assistant. Esta extensión del navegador reconoce todas las etiquetas de Google que tienes instaladas en cualquier web y, por lo tanto, te dirá si tienes o no instalado GTM.
Cuando ya tengas la extensión de Chrome instalada, ve a tu web tecleando la URL y activa Google Tag Assistant. Si te aparece la etiqueta de Tag Manager como te muestro en la fotografía, ¡lo tienes todo bien hecho y listo para funcionar!
Esta herramienta es relativamente nueva y, sobre todo, novedosa. Aunque al inicio puede parecer compleja de usar, con la práctica te darás cuenta de lo útil y eficaz que es y podrás decir adiós a ese código que, de no saber insertarlo, tantos dolores de cabeza te da. En las próximas semanas te contaré cómo instalar Google Analytics, el Píxel de FB y crear varias etiquetas muy útiles para los botones, el scroll y el tráfico de tu web. Recuerda suscribirte si prefieres que te llegue directamente al correo electrónico.
Si te ha sido útil este post dale ⭐️⭐️⭐️⭐️⭐️ por favor. Cualquier duda que te surja durante el proceso, ¡escríbemela en comentarios y te ayudaré! Y tú, ¿estás preparado para usar Google Tag Manager?
Hola! mil gracias me ayudaste mucho, entendí todo a la perfección solo que ahora tengo la duda ¿como agregar eventos del pixel de fb a mi sitio con GTM?
Es exactamente igual, creas una nueva etiqueta y en vez de introducir el html personalizado del pixel, pones el del evento que hayas creado en FB, también las variables como id de producto, nombre etc. También puedes crear etiquetas para «añadido al carrito o purchase etc.) Más adelante prepararé un post avanzado sobre esto, pero habiendo instalado el pixel, es el mismo procedimiento Vicente, ¡un saludo!
Para instalar el píxel de Facebook a través de Google Tag Manager tengo que tener configurado Tag Manager en la web, ¿no?
Hola! Sí, primero tienes que instalar Tag Manager, es decir, seguir los sencillos pasos de este post y luego instalar el pixel de facebook en Tag Manager siguiendo este otro post https://annakubrickcontent.com/pixel-facebook-tag-manager/