hand Inicio

SERVICIOS

Salir

nochedía

Google Tag Manager básico

1800 palabras
7 minutos
July 18, 2020

La decisión entre si instalar Google Tag Manager o Analytics puede reducirse a instalar GTM sólo si necesitas algo más aparte de Analytics, por razones de rendimiento

Pero las ventajas de GTM son tantas que posiblemente te valga la pena ir con GTM sí o sí

Prólogo

Google Tag Manager (GTM), la herramienta gratuita de Google para marcar todo lo que tu quieras de tu web en relación a la actividad de tu usuario

Es como tener una aplicación dentro de tu página web, con su lenguaje de programación y con la libertad de poder hacer casi que de todo

Puedes hacer lo mismo con Analytics?

Sí, aunque resulta fácil y agradable acostumbrarse al lenguaje de GTM, a su simplicidad y a su interfaz de usuario

Y a qué viene esta reflexión?

A que en el fondo GTM te inyectará el script de Analytics por lo que estarás tendrás algo de redundancia que puede afectar al rendimiento de tu página

Por otro lado, cualquier cambio en GTM lo haces a través de su interfaz, no necesitas tocar tu página web (y en el caso de Gatsby no necesitas hacer un nuevo deployment), y eso también es un gran qué

Dicho esto, vamos a ver cómo instalar y configurar el Google Tag Manager

  1. Prólogo
  2. Inicializar y configurar Google Tag Manager (GTM)
  3. Instalar Google Tag Manager vía plugins
  4. Explorando el plugin de Gatsby

Inicializar y configurar Google Tag Manager (GTM)

Para instalar el Google Tag Manager lo primero es crearnos una cuenta en GTM yendo a marketingplatform.google.com

image

Nos creamos la cuenta GTM y luego nos creamos una cuenta dentro de la interfaz de GTM, que a su vez creará un container a la que le pondremos nombre y país

Ese contenedor es lo que en esencia será nuestro GTM, un espacio donde pondremos todo el código que queramos integrar vía GTM

Luego nos piden que definamos el tipo de plataforma al que nos estamos dirigiendo, y pondremos Web

image

Aceptamos sus condiciones, y allí tendremos el código que deberíamos insertar en nuestro website

Pero no lo haremos, sino que utilizaremos plugins (lo vemos en un momento)

En la misma página podemos ver nuestro dashboard que además es donde podemos ver nuestro código GTM

image

y vemos que en la izquierda tenemos

  1. Tags
  2. Triggers
  3. Variables
  4. Folders
  5. Templates

Lo "imprescindible" son los 3 primeros

Variables

Las variables son lo que son, elementos que nos simplifican la vida porque podemos reutilizarlos

Vamos, lo que es una variable normal y corriente

Tenemos dos tipos, las variables que ya nos vienen definidas, y las nuestras

Si nos vamos a la sección de Variables allí veremos los dos tipos, las built-in de las que vemos 5, y las user-defined de las que no vemos ninguna

De las que ya están definidas, podemos seleccionar las que queremos de un lote mayor que vemos en el botón Configure a la derecha, si lo clicamos veremos el menú completo

image

De aquí, yo sólo selecciono la última, la On-Screen Duration, que me sirve para ver si un elemento aparece dentro de la ventana del usuario y por cuánto tiempo, y los Page Path y Page URL, y del resto no me interesa ninguna

Pero en función de tu website sí te interesarán algunas, por ejemplo

  • Si te interesa saber si alguien ve un vídeo, y hasta dónde lo ve
  • Si te interesa saber si alguien clica cierto elemento que piensas que puede confundir
  • Si quieres saber si hace el Submission de algún formulario
  • Si quieres monitorear en una tienda si se añade cierto producto a la cesta

Para todo esto GTM nos puede ser muy útil, pero hay que vigilar y ser muy selectivo ya que sino lo que haremos será

  • Rellenar con ruido nuestro Analytics
  • Engordar el script GMT que cargaremos en nuestra página, que nos conviene que tenga el tamaño mínimo necesario

Una vez seleccionadas las variables built-in que nos apetecen, vamos a definir una variable nuestra que nos servirá para almacenar nuestro código de Analytics (ese código que vemos en la página de Analytics - Property Settings)

image

Pues ese código lo vamos a poner como variable en GTM, donde clicaremos en el botón de nueva variable y le pondremos de tipo Google Analytics Settings

image

Luego le ponemos el código de Analytics de antes en el Tracking ID, dejamos el Cookie Domain como auto, y en More Settings le añadimos un Field con Fields to Set

Allí le ponemos de nombre anonymizeIp y un valor de 1 y así cumplimos con la normativa europea

Guardamos, y listos

Triggers

Con esto definimos los eventos, es decir, decimos qué se monitoreará y qué no

Bueno, por defecto no se monitoreará nada, así que sólo lo que le pongamos aquí se tendrá en cuenta

Pero ojo! Analytics ya nos dice qué páginas se visitan, aquí hablamos de triggers más sofisticados como poder ver cuantas veces los usuarios utilizan algo de tu página

Otro ejemplo, has implementado en tu página un modo día y modo noche, pero no tienes ni idea de si los usuarios lo utilizan

Pues nada, en ese botón le asignas la propiedad id, o si tiene una class única también nos vale, y aquí defines que te salte un trigger cada vez que el usuario haga click en ese botón

Lo mismo te puede servir con el scroll, si tienes una página con una gran imagen principal y dudas de si el usuario sabrá tirar del scroll, puedes hacer un trigger que se active cuando el scroll se utilice

image

Por ejemplo puedes utilizar el Timer para configurar un trigger que se active a los 45 segundos de tener a la persona en la misma página web

Así generarás un evento que Analytics podrá monitorear

Con esto podrá diferenciar entre

  • Un usuario que ha pasado 2 segundos en la página
  • Otro usuario que se ha pasado 46 segundos en la página

Y es que si el usuario abandona nuestro dominio Google no tiene manera de saber cuánto tiempo ha "gastado" en nuestra página

En este caso seleccionaríamos el evento Timer, le pondríamos un valor de 45000 milisegundos y un limit de 1

image

Luego le ponemos Page Path y una expresión regular de .\*, es decir, que este trigger se active para todas las páginas

Y grabamos

image

Tags

Los tags nos sirven para etiquetar

  • Tenemos los triggers que son eventos que monitoreamos

  • Y tenemos los tags que cuelgan una etiqueta a esos eventos que entonces ya se van para Analytics

Para crear los tags hacemos lo mismo que antes, donde tendremos la configuración del tag y del trigger

image

Con el trigger es sencillo, al clicar verás que en la lista te aparece el que hemos configurado hace un momento

Y para la configuración del tag se te pide

  • El tipo de tag, ahí le pones el Google Analytics: Universal Analytics, ya que este tag se comunicará con el Analytics
  • El tipo de track, que será Page View, es decir que aplicará la etiqueta cuando se visite una página
  • La variable de analytics, que la hemos configurado antes
image

Testear

Es crítico testear antes de publicar, y muy cómodo de hacer

Basta con clicar el botón Preview a la derecha, entonces te saldrá un mensaje conforme estás en modo preview

Ahora puedes ir a tu página con el navegador y te aparecerá un frame abajo con todos los eventos que van apareciendo

  • En la columna de la izquierda saldrán los eventos (de hecho, todos los que hayamos seleccionado antes en las variables built-in)

  • En la derecha tendrás aquellos tags que se activan basado en tu configuración

image

Y cuando termines no te olvides de salir del modo preview

Publicar

Lo último que nos queda es publicar el contenedor, algo tan sencillo como apretar el botón de SUBMIT, que nos pedirá un nombre y descripción (como si estuviéramos utilizando git), y listos

Instalar Google Tag Manager vía plugins

WordPress

Para WordPress no hay misterio, vamos con el plugin de Thomas Geiger y lo instalamos como habitualmente, lo activamos y añadimos allí nuestro código GTM que tenemos del capítulo anterior

image

Gatsby

Y para Gatsby, lo mismo, tenemos el plugin gatsby-plugin-google-tagmanager que sin embargo merece cierta explicación extra

En Gatsby el uso de un plugin nos da lo mismo que con WordPress, esto es, comodidad

Primero lo instalamos

Y luego es tan sencillo como ir a gatsby-config.js y añadir el plugin como habitualmente

Donde pones tu código GTM

El resto de las opciones son opcionales (las tienes aquí)

Esto nos serviría para instalar GTM, pero no para que funcionase como queremos

La razón es porque Gatsby en realidad cuando cambia de página no termina de cambiar realmente de página, hay una parte que es persistente y esto a efectos del navegador no cuenta como una página diferente

Esto es una de las ventajas de Gatsby y su experiencia de usuario

Pero para lo que nos ocupa, necesitamos avisar a GTM que sí que hay un cambio de página

Este trabajo ya nos lo hace este plugin, que a cada evento de navegación (esto es, a cada página visitada) manda un tag con el texto gatsby-route-change

Ahora necesitamos recoger esa señal en GTM para que éste lo entienda

Se trata simplemente de

  • Añadir en la interfaz de GTM un nuevo trigger que sea un custom event de nombre precisamente gatsby-route-change y sin cambiar las demás opciones para que se ejecute siempre

  • Añadir un tag (pon un nombre descriptivo) que utilice ese trigger, lo vincule a Page View y a Google Analytics con la variable id que ya habíamos configurado

image

Y ya lo tenemos

Explorando el plugin de Gatsby

Vale la pena entretenerse y ver el github del plugin de Gatsby para ver qué nos encontramos (aquí)

Del plugin vemos 3 archivos

  • gatsby-node.js

  • gatsby-browser.js

  • gatsby-ssr.js

El primero gatsby-node.js ya lo vimos en el curso de Gatsby básico y es el archivo troncal de nuestro backend que utilizamos para generar las páginas estáticas

Este hook, el onPreInit se ejecuta lo más rápido posible una vez el plugin se carga, y recibe la API de NodeJS

Y lo que hace esta parte del código es leer las posibles opciones que le hayamos podido pasar en nuestro gatsby-config.js

En gatsby-browser.js encontramos lo siguiente

Este archivo, gatsby-browser, nos permite encapsular todo nuestro website bajo un componente común que a su vez nos permite compartir variables entre ellos

Esto nos permite por ejemplo tener un menú persistente abierto en todas las páginas sin tener que desmontar y montar ese componente

En este caso lo que hace el plugin es, a los 50 milisegundos de ejecutarse el hook onRouteUpdate, que es cuando hemos cambiado de página, enviar a dataLayer el evento de nombre gatsby-route-change

Ese array global window.dataLayer se utilizará luego en el script para comunicarse con GTM, por lo que acabamos de ver cómo se estructura la comunicación con GTM

Y en el gatsby-ssr.js encontramos lo siguiente

Un código mucho más amplio

Qué diferencia hay entre gatsby-browser y gatsby-ssr:

  • Gatsby-browser se ejecuta en el cliente, en el Chrome del usuario
  • Gatsby-ssr se ejecuta durante nuestro gatsby build

Este código hace lo siguiente:

  • Define el script de GTM
  • Y el iframe que lo encapsula
  • Define la lógica para construir el dataLayer
  • Y aprovecha el hook onRenderBody, que actúa cuando el <body> está ya preparado, y allí
  • Termina de construir el dataLayer
  • Lo incluye en el script final y dentro del head
  • E incluye también un noscript para los usuarios que desactiven JavaScript (quienes son?), si te fijas verás que es allí donde utiliza el iframe

Siempre es interesante explorar todo aquello que parece magia negra desde fuera, es imposible no aprender nada en el proceso

🙋‍♂️

Qué tal el curso?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]