13 julio, 2022 #Analítica

Google Tag Manager ¿Cómo y por qué instalarlo?

Google Tag Manager es la piedra angular del set de herramientas para medir la interacción de nuestros usuarios. Por eso te explicamos en detalle cómo funciona, cómo instalarlo y cómo usarlo en tu sitio web ¡Mide y vencerás!

¿Qué es Google Tag Manager?

GTM es el Administrador de Etiquetas de Google. A partir del sistema de etiquetas, nos permitirá mantener actualizados los diversos códigos de seguimiento que necesite nuestra web o app. Su principal ventaja es que, luego de la instalación de un primer fragmento de código (el “contenedor”) podremos implementar una enorme cantidad de herramientas de medición, de manera sencilla (como Google Analytics y los píxeles de Facebook y Google Ads, por ejemplo).

¿Cómo funciona Google Tag Manager?

En una versión simplificada para no desarrolladores (como nosotros) GTM posee cuatro de componentes que le permiten funcionar:

  • El Contenedor: un fragmento de código HTML/JavaScript que será lo único que tendrás que añadir en tu web o App.
  • Las Etiquetas (o tags): son los fragmentos de código (HTML/JavaScript) específicos de las herramientas que vamos a utilizar en nuestra web o App, que ahora podremos administrar desde nuestra cuenta de Tag Manager. Estos códigos nos sirven o bien para agregar una funcionalidad a nuestra web o bien para recolectar datos y enviarlos a una plataforma particular (Analytics o Facebook). Gracias a GTM podremos agregar estos códigos sin necesidad de modificar nuestro código fuente.
  • Los Activadores(o triggers): son las opciones que nos permiten decirle a Tag Manager cuándo y dónde “disparar” cierta etiqueta, dándonos total flexibilidad en la implementación de nuestros códigos de seguimiento (por ejemplo: en toda nuestra web, en una página particular o un banner específico de una sección de sitio web).
  • Variables: son elementos pre seteados que podemos usar tanto en los activadores como en las etiquetas. Por ejemplo: una variable que recomendamos crear es la del código de seguimiento de google analytics, ya que luego ese identificador lo usaremos para diversas etiquetas. 

Principales beneficios de usar Google Tag Manager

Uno de los principales beneficios de usar GTM es que el equipo de Marketing logre la “independencia” del equipo de IT ¿Qué significa? Que gracias a GTM, para implementar todas las herramientas que necesitemos sólo vamos a requerir 1 (una) intervención del equipo de desarrollo de nuestra organización: la necesaria para instalar el “contenedor” de Tag Manager. A partir de ese momento, todo el resto de las implementaciones las podrá realizar en forma directa el equipo de Marketing (lo cual, por lo general, nos hará ahorrar mucho tiempo).

Segunda gran ventaja de usar Tag Manager: en un solo lugar vamos a tener ordenadas todas las implementaciones de códigos de analytica. En el espacio de trabajo de GTM podremos encontrar todas las diversas etiquetas y sus respectivos activadores, más la fecha en que se configuraron.

Por último, y como extra, Tag Manager también nos permite configurar eventos de Google Analytics. Con lo cual nos permitirá emanciparnos (otra vez!) del equipo de desarrollo a la hora de generar eventos y conversiones para Analytics.

Tag Manager por primera vez: cómo crear y configurar una cuenta

Siendo el caso de aplicación más común, por el momento nos centraremos en la instalación de GTM para un sitio web, no AMP. Lo primero que debemos hacer es ir a tagmanager.google.com , acceder con la cuenta de gmail “master” (la que utilizamos o vamos a utilizar para todo el resto de la suite de marketing de Google: Analytics, Search Console, Google My Business, etc.). Una vez logueados, hacemos click en el botón de “Crear Cuenta”. Allí deberemos configurar los siguientes elementos:

Pantalla principal para la creación cuenta Google Tag Manager

Nombre de cuenta: lo que a nosotros nos ayude a identificar nuestro sitio o app con claridad. Podemos usar el nombre de la organización (es importante entender que esta es nuestra cuenta principal y que podremos administrar las personas que tendrán acceso a ella). 

País: el principal donde opera la organización.

Nombre del contenedor: podemos usar el nombre de nuestra web o aplicación.

Plataforma Objetivo: a los efectos de este tutorial, elegiremos “sitio web”.

Con estos datos se nos habilitará el botón de “Crear”. Hacemos click. Para continuar deberemos aceptar el “Acuerdo de Condiciones de Servicio de Google Tag Manager”. Una vez confirmado, vamos a ser derivados al panel principal y vamos a recibir el siguiente mensaje con los códigos de instalación de nuestro contenedor:

Instrucciones para la instalación de Google Tag Manager

¿Cómo instalamos Google Tag Manager?

Acá es cuando vamos a necesitar la primera (y última) ayuda de nuestro equipo de IT. Tenemos que pasarle estas dos etiquetas (la primera va en el header y la segunda en el body de nuestra web). Con estos códigos conectaremos GTM a nuestra página y con ello ya estaremos listos para continuar. ¿Cómo podemos verificar que se encuentre correctamente instalado? La manera más sencilla es instalar la extensión para Chrome Tag Assistant Legacy (by Google) o en su defecto el Tag Explore . Ambas herramientas nos permitirán, con un solo click, verificar si la etiqueta del GTM se encuentra bien instalada.

En el caso de que la plataforma que utilicemos para nuestra web sea WordPress (un caso bastante común) tenemos la posibilidad de usar alguno de estos dos plugins:

A) GTM4WP: es la opción más sencilla. Se instala y activa la herramienta. Luego en la configuración general nos va a pedir el ID de nuestro contenedor de Tag Manager (vamos a dejar por defecto la opción de codeless, que para eso lo instalamos!). Si eso genera algún problema con el template (generalmente no) usaremos la opción de footer (que tampoco requiere que hagamos nada especial con el código):

b) La segunda opción es Insert Headers and Footers by WPBeginner, que como su nombre lo indica, nos va a permitir agregar códigos tanto en el header como en el footer (y en el body!). Simplemente agregamos las etiquetas que vemos en el paso Crear”:

Detalle del plugin de inserción de código en headers y footers

Otros CMS de uso masivo como Wix o Webflow tienen también opciones simples de instalación del código:

Configuración de etiquetas básicas: Google Analytics 4

Ahora que ya tenemos nuestro contenedor instalado correctamente, nos queda instalar las herramientas básicas de seguimiento para comenzar a recabar información relevante para nuestra web. Gracias a Tag Manager, los siguientes pasos son muy sencillos.

Si aún no creaste tu cuenta de Google Analytics 4, podés seguir nuestra guía de instalación rápida. Si ya lo instalaste, tendremos que configurar una nueva Etiqueta, una nueva Variable y un Nuevo Activador.

1 – Dentro de Tag Manager vamos a Etiquetas /Nueva /Configuración de la Etiqueta. La guardaremos con el nombre de Analytics G4 (por ejemplo) y luego elegiremos el nuevo tipo de etiqueta: esta vez “Google Analytics: configuración de GA4”.

2- Ahora vamos a tener que agregar el “ID de Medición” que figura en nuestra propiedad de Google Analytics 4 (en el menú de  “Flujo de Datos”). Al igual que con Universal, vamos a poner como activador “All Pages”.

Instalación etiqueta Google Analytics 4 en Tag Manager

Terminamos! ya hemos configurado también el nuevo Analytics. Ahora tenemos ambos métodos de medición, ¡corriendo bajo GTM!

Validación de etiquetas

Dijimos que dos de las ventajas de utilizar Google Tag Manager es poder lograr “la independencia” del equipo de IT y, por otra parte, tener organizado los códigos de seguimiento que tiene nuestra web. 

Bien, hay una ventaja más: antes de implementar los códigos que hayamos asignado para nuestras etiquetas y disparadores, Tag Manager nos permite entrar en el modo “Vista Previa”: una suerte de entorno de pruebas que nos indicará si todo lo que hicimos está correctamente configurado y funcionando de la manera que deseamos. 

Antes que nada necesitamos instalar el addon Tag Assistant Companion. Luego en nuestro panel principal, haremos click en el botón Vista previa en la esquina superior derecha de la interfaz GTM (cerca del botón Enviar ).

Ingresar a la vista previa en Google Tag Manager

Una nueva ventana nos pedirá la URL de nuestro sitio (la probar y depurar). Puede ser la dirección de una página principal o la URL de una página específica. Hacemos click en “Conectar”:

Entrar al modo vista previa

Si todo va bien, nos aparecerá la URL que introdujimos y un pequeño cartel en el margen inferior derecho con la leyenda de conexión:

Asistente de Tag Manager correctamente conectado

Volvemos a la pestaña de Tag Assistant, hacemos click en el botón de “Continuar” y enseguida podremos ver los resultados de los tags enviados y de los eventos que se dispararon (o no). En nuestro caso podemos ver que se disparó correctamente: Analytics, las etiquetas de Google Ads y el Pixel de Facebook:

Verificando las etiquetas activadas

Si todo funcionó de la manera esperada,  salimos del modo de vista previa y detener la depuración hacemos click en “Desconectar” en la ventana de la vista previa de la url de nuestro sitio. Luego volvemos a nuestra pantalla principal de Tag Manager y esta vez le damos click en “Enviar”. 

Allí se nos pedirá que le demos un nombre a la versión (V1, por ejemplo) y que agreguemos una descripción. Una buena práctica es poner en la descripción que Tags estamos agregando en ese envío. 

Listo! Ya pudimos configurar todo lo necesario para dar los primeros pasos en la medición de nuestra web vía Tag Manager!

Conclusión

Recomendamos utilizar Google Tag Manager porque:

  • Es gratis.
  • Tiene su curva de aprendizaje, pero no es difícil de utilizar.
  • Se integra a la perfección con los productos de Google (Analytics, Ads, etc.)
  • También nos permite integrar de manera sencilla a nuestra web con otros productos (por ejemplo Facebook, Crazy Egg, Linkedin).
  • Tiene funciones avanzadas para configurar eventos y conversiones.

Esperamos que por todas estas razones Tag Manager se convierta en tu aliado a la hora de recabar información de los usuarios de tu sitio web.

Te puede interesar