🖖 Inicio

SERVICIOS

Salir

nochedía

Configurar GTM

1600 palabras
6 minutos
May 14, 2020

Entramos en materia para instalar y configurar Google Tag Manager, una herramienta que nos dará una flexibilidad brutal

vamos allá

Inicializar y configurar GTM

Para instalar el Google Tag Manager o GTM lo primero es crearnos una cuenta en GTM

Y esto lo haremos de forma muy sencilla yendo a la página web de turno, aquí

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

Como comenté en el post anterior, lo que haremos será insertar ese código vía plugin y no directamente, y esto lo veremos en el siguiente capítulo

Seguimos

Aquí tenemos nuestro dashboard 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 "necesario" 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

Ejemplo de ruido: necesitas saber si el usuario ha rellenado un formulario?

Y no será mejor monitorear si el usuario ha visitado esa página concreta que sólo puede visitar una vez ha rellenado ese formulario?

Porque este seguimiento ya lo puedes hacer con Analytics, no hace falta crear un tag específico

Pero habrá casos donde sí, en los vídeos por ejemplo (aunque YouTube o Vimeo tienen analytics que te permiten ver estos datos), o si quieres gestionar errores con GTM (un usuario rellena el formulario pero luego se va, por ejemplo, quizá el botón no se ve suficientemente bien?)

En mi opinión, para ver lo que hace y piensa el usuario es mejor verlo literalmente con herramientas como HotJar, pero siempre depende del caso

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

*Con esto cumplimos con la normativa europea

Guardamos, y listos

Triggers

Con esto definimos los eventos, es decir, decimos qué se monitoreará y que 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 lo que te decía antes, poder ver cuantas veces los usuarios utilizan algo de tu página

Otro ejemplo, te has currado 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 clicke 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

Etc etc etc etc

El modo de hacerlo sería equivalente al anterior, con una serie de tipos pre-definidos

image

De aquí yo 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

Por qué?

Porque Analytics no tiene ni idea de cuándo la persona se va de la página (a no ser que visite otra página)

Con este trigger sabremos que, aunque la persona se vaya, habrá pasado más de 45 segundos en nuestra casa

Si quisiésemos algo más sofisticado podríamos insertar JavaScript en el website que se encargase de mandar una señal (hacer una petición http normal y corriente) cuando el ratón de la persona saliese de la pantalla (para ir a buscar el botón de cierre, quizás)

O ir repitiendo este timer indefinidamente

En este caso me quedo satisfecho con una única medida a un tiempo que ya considero decente y así poder ver un bounce rate más cercano a la realidad

Para hacerlo, seleccionamos el evento Timer, le ponemos 45000 milisegundos y un limit de 1

image

Aquí podríamos tener una duda razonable

  • Este trigger se activará? Necesitamos decirle que se tiene que activar para todas las páginas? O por defecto ya lo hace si no especificamos nada?

La duda nos desaparece rápido porque sin ponerle nada no nos deja continuar, por lo que 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

Nos faltan los tags, las etiquetas, y lo que hacen es literalmente lo que parece que hacen, esto es, etiquetar

Es decir, tenemos los triggers que son eventos que monitoreamos

Pues los tags lo que hacen es colgar una etiqueta a esos eventos, y es cuando tienen etiqueta que esos eventos se van a Analytics (o a otros servicios)

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

Ojo, la pregunta razonable sería, tenemos también que incluir el trigger de todas las páginas aquí?

La respuesta es no, el trigger de 45 segundos se activará en todas las páginas cuando pasen 45 segundos

Si añadimos un segundo trigger que se active al visitar todas las páginas, entonces tendríamos que este tag se activaría dos veces en respuesta a los 2 triggers

Y para la configuración del tag pues verás que 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 tendremos también en la lista ya que hemos configurado antes la variable
image

Testear

Y para terminar, es crítico testear antes de publicar, y muy recomendable por lo cómodo que es de hacer, basta con clicar el botón Preview a la derecha, entonces te saldrá un mensaje conforme estás en modo preview

Y eso qué significa?

Que ahora puedes ir a tu página con el navegador y te aparecerá un frame abajo con todos los eventos que aparecen

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

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

En mi caso con kuworking.com, puedo comprobar como los tags se ejecutan correctamente

image

Y si te fijas el tag del timer aún (en la imagen) no se ha ejecutado, es cuestión de esperarse los 45 segundos y pasará a la fila de arriba indicando que finalmente se ha ejecutado

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

Ojo, que se ha dicho rápido esto

Listos quiere decir que ya está en vivo, que ya está funcionando, desde GTM sin tener que pasar por el servidor o por el editor de código ni nada de nada

Se me saltan las lágrimas ...

Pero en realidad aquí no hemos terminado, en Gatsby necesitamos pulir un par de detalles más, y lo vemos en el segundo capítulo

Final del primer capítulo donde lo hemos visto ya casi todo, sólo no falta la instalación en Gatsby porque implica algo más de trabajo, aunque una vez entendida la estructura de GTM será exageradamente sencillo

Esto lo vemos en el segundo capítulo, en Instalación de GTM

Qué tal este capítulo?
👌 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 🙏

Newsletter de kuworking, un correo de tanto en cuanto

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]