Cómo organizar Google Tag Manager (GTM): buenas prácticas

6 min de lectura Artículos
como-organizar-gtm-buenas-practicas

A menudo la personas empezamos a trabajar en una idea, un objetivo, una tarea… Sin antes pararnos a pensar y a planificar cómo va a ser, cómo se va a llevar a cabo, qué cosas hay que tener en cuenta. Lo mismo ocurre con la información que almacenamos en las herramientas que utilizamos, por eso vamos a hablar de cómo organizar Google Tag Manager.

A los desarrolladores nos suele ocurrir que nos lanzamos directamente a escribir código para poder obtener un resultado visible lo antes posible y esto puede acabar siendo un problema.

¿Qué es Google Tag Manager? ¿Para qué se utiliza?

Google Tag Manager (GTM) es una herramienta que permite hacer cambios sencillos en la web de una forma rápida, fácil y reversible. Dentro de la herramienta hay varios elementos como las carpetas, las etiquetas, los disparadores, las variables y las plantillas. Con todo este conjunto de elementos que provee Google, es muy fácil, por ejemplo, ejecutar un código JS (JavaScript) que agregue alguna funcionalidad al sitio web a modo de experimento para validar de una forma rápida si tiene sentido o no invertir tiempo de desarrollo en esta nueva versión.

Google Tag Manager (GTM)
Vista general de Google Tag Manager (GTM).

Otro ejemplo de uso podría ser la instrumentación del sitio web, agregando así etiquetas y disparadores cuando sea interesante mandar eventos a las herramientas de analíticas.

Planificar, organizar y definir una forma de trabajar clara y estándar es muy importante, sobre todo cuando se trabaja en un entorno compartido con otras personas como es el caso de GTM. Esto puede parecer obvio y sencillo, pero no lo es. Lo más fácil y rápido es (como he comentado anteriormente) empezar a crear etiquetas, definir disparadores, lanzar eventos y publicar.

Además, el hecho de ver algo ya en producción, produce una sensación de trabajo avanzado/acabado que es muy gratificante, pero que, a la larga, si se sigue trabajando así, se acabará transformando en frustración. ¿La razón? Que no se sabrá qué hace cada etiqueta porque cada miembro del equipo utiliza una nomenclatura o qué disparador utilizar en cada momento porque los nombres no son descriptivos, entre otros problemas.

A continuación te dejo algunos consejos para empezar a organizar tu entorno de GTM y que cualquier persona del equipo pueda entrar y entenderlo a la perfección.

Utilizar los espacios de trabajo de Google Tag Manager

Un espacio de trabajo es una copia paralela del contenido actual de tu GTM. Y ahí va la primera recomendación: crear espacios de trabajo para realizar cambios es una buena manera de no pisar el trabajo de otros compañeros.

Sirve también como medida de seguridad contra errores. En caso de haber un fallo en producción y tener que pausar o modificar una etiqueta, se podría hacer desde el espacio de trabajo por defecto sin tener que eliminar o publicar el contenido que se esté haciendo en el nuevo espacio.

Google Tag Manager (GTM)
Áreas de trabajo de Google Tag Manager (GTM).

Crear carpetas en Google Tag Manager

Las carpetas son un buen método de organización, hay muchas maneras categorizar estas carpetas. Algunas ideas son:

  • Por tipo de experimento (adquisición, retención…)
  • Por página en la que se ejecuta el contenido de la carpeta (home, checkout…)
  • Por comportamiento (instrumentación, experimentación…)
  • Por nombre del experimento (CTA, modal de descarga…)

No importa cómo quieras organizar las carpetas, el objetivo de estas es que todo el contenido de GTM esté estructurado y cada miembro del equipo sepa dónde buscar cada cosa.

Google Tag Manager (GTM)
Organización de carpetas en Google Tag Manager (GTM).

Establece una nomenclatura para las etiquetas

Dentro de la organización de Google Tag Manager, la nomenclatura de cada uno de los elementos es muy importante pero es imprescindible que las etiquetas tengan un nombre claro, descriptivo y, sobre todo, estándar.

Es necesario decidir con el equipo qué nomenclatura elegir para las etiquetas. Así, de un vistazo, todos los miembros del equipo sabrán identificar a qué hace referencia el nombre, de esta manera evitaremos confusiones.

Un par de ejemplos

Un nombre para una etiqueta de un experimento en Google Tag Manager podría ser PH-CHECKOUT-0023:

  • La primera parte PH hace referencia a las siglas de la empresa, de esta manera evitaremos confusión con nomenclaturas de terceros.
  • La segunda parte CHECKOUT hace referencia a la parte en la que se está experimentando.
  • La tercera parte 0023 es el identificador del experimento, en este caso es el experimento número 23.

Un nombre para una etiqueta de una instrumentación podría ser AMP-HOME-SEARCH o GA-HOME-SEARCH:

  • La primera parte de esta nomenclatura hace referencia a la herramienta de analítica que se está utilizando en la etiqueta, en este caso AMP (Amplitude) GA (Google Analytics).
  • La segunda parte se refiere a la página en la que se ejecuta esta etiqueta.
  • Y por último, la tercera parte hace referencia al evento que se trackea, en este caso el search.

Estos son algunos ejemplos que se me han ocurrido. Pero lo ideal es que cada equipo (empresa) establezca su nomenclatura y que quede claro qué representa cada parte de esta.

Google Tag Manager (GTM)
Etiqueta de ejemplo en Google Tag Manager (GTM).

Usa un nombre descriptivo para los disparadores

Los disparadores se utilizan para ejecutar etiquetas, por tanto, estos disparadores pueden ser utilizados para lanzar una única etiqueta o varias. Es importante definir un nombre claro y que un disparador no se modifique una vez se esté utilizando porque puede afectar a todas las etiquetas.

Siguiendo con los ejemplos anteriores un nombre para un disparador de una etiqueta de experimento podría ser PH-CHECKOUT-DOM_READY:

  • Este nombre haría referencia en primer lugar a las siglas de la empresa igual que antes.
  • En segundo lugar a la página en la que se ejecuta el activador.
  • Y por último, cuándo se ejecuta, en este caso, en el DOM ready

Un nombre para un disparador de una instrumentación podría ser CLICK-HOME-SEARCH:

  • El primer elemento hace referencia al evento que lanza la etiqueta, en este caso un click.
  • El segundo a la página en la que se lanza este disparador.
  • Y el tercero el elemento en que se hace este primer evento click.

Igual que en las etiquetas, estos son ejemplos que se me han ocurrido a mí, que me parecen lógicos y que se entienden. No obstante, este estándar debería definirlo cada equipo/empresa y que todas las personas que utilicen la herramienta sepan qué significa cada sigla.

Ejemplo de activador en Google Tag Manager (GTM).

Elige un nombre auto descriptivo para las variables

Las variables son el último elemento que falta por repasar de GTM, son un elemento algo más avanzado que los anteriores y que muchas veces se les pone un nombre poco descriptivo que puede llevar a confusión.

Estos elementos pueden ser de muchos tipos y puede tener sentido que cada tipo tenga un modo diferente de formar la nomenclatura. Las más utilizadas son:

Variables de tipo booleano (TRUE o FALSE):

Para este tipo de variables se suele utilizar (heredado del inglés) el formato verbo + nombre: 

  • isMobile o esMóvil
  • isLogged o estáLoggeado

Variables de tipo constante:

Para este tipo de variables se suele utilizar un nombre descriptivo y claro que refleje a que hace referencia el contenido de la variable.

  • AMPLITUDE_API_KEY
  • PAGE_URL
  • REFERRER
Ejemplo de variable en Google Tag Manager (GTM).

En este post se han recogido algunos consejos y recomendaciones para mantener GTM ordenado y accesible a todo el equipo, espero que haya sido de utilidad y que se puedan aplicar estos tips en los próximos experimentos.

¡Mucho Growth!

“El desorden no es más que decisiones pospuestas”

Barbara Hemphill

Comparte en tus RRSS

Twitter LinkedIn
Post /Comentarios

Tu dirección de correo electrónico no será publicada.


Post /Relacionados
NoCode y Desarrollo de Software- Enemigos íntimos

NoCode y Desarrollo de Software: Enemigos íntimos

introduccion-a-docker-nginx

Introducción a Docker: Nginx

5-buenas-practicas-ui-i

5 buenas prácticas UI (I)