Crear una plantilla personalizada de GTM paso a paso

En este post vamos a hablar de una funcionalidad avanzada dentro de GTM: las plantillas personalizadas. Un recurso al que normalmente acceden y configuran los perfiles más técnicos, pero cuyo resultado será utilizado por aquellos menos técnicos, facilitándoles la vida enormemente. Como siempre, voy a intentar aplicar la técnica de «Learning by doing», utilizando un ejemplo básico para crear una plantilla personalizada de GTM paso a paso. ¡Vamos a por ello!

¿Qué es una plantilla personalizada de GTM?

Empecemos por el principio. Debemos entender qué es una plantilla y para qué se utiliza, de esta forma será mucho más fácil avanzar por los distintos pasos de la creación de ésta.

Aunque igual no eres consciente, si has configurado alguna etiqueta en GTM en realidad has utilizado una de las plantillas integradas que trae la herramienta por defecto, como la etiqueta de GA4 o de Google Ads. GTM dispone de plantillas de etiquetas para los productos de Google y también para algunas herramientas populares como Hotjar, Crazy Egg, AdRoll, Pinterest, LinkedIn, Ve Interactive, Awin…

Sin embargo, seguro que has echado en falta en algún momento etiquetas para otros píxeles muy populares, como Facebook, que es uno de los grandes ausentes (supongo que por falta de acuerdos entre ambas compañías). En estos casos tienes dos opciones:

• Implementar el pixel utilizando una etiqueta de tipo HTML personalizado, donde directamente insertas el código que te proporciona la herramienta a la que quieres enviar los datos (por ejemplo, el pixel de Facebook). Suele requerir unos mínimos conocimientos técnicos, ya que estás insertando código en la web y cualquier error que comentas puede derivar en un problema en el funcionamiento de ésta.
• Buscar la etiqueta que necesitas en la galería de plantillas comunitarias. Esto no dejan de ser plantillas personalizadas (las que vamos a explicar en este artículo) que distintas personas/empresas de la comunidad han desarrollado para facilitar la vida a la gente menos técnica. El problema que pueden tener es que estén desactualizadas y no funcionen correctamente.

En resumen, una plantilla personalizada de GTM no es más que una interfaz amigable que facilita el envío de datos a una herramienta de terceros a través de GTM. Las suelen configurar los equipos técnicos asegurando la calidad y eficiencia de los códigos que se inyectarán en las webs. Y las suelen utilizar los equipos menos técnicos, a través de esa interfaz amigable se les facilita el envío de los datos y además tienen la confianza de que no van a «romper» nada en la página cuando publiquen la etiqueta (como podría ocurrir con una etiqueta de tipo HTML personalizado).

¿Por qué crear una plantilla personalizada de GTM?

Configurar y desarrollar una plantilla personalizada de GTM requiere un esfuerzo por parte del equipo técnico, por lo que es importante valorar si merece la pena o no invertir tiempo en esa tarea.

Por lo general, si el píxel sólo lo vas a implementar una vez, será más rápido que los técnicos utilicen una etiqueta HTML personalizada y listo. Sin embargo, si es algo que potencialmente vas a utilizar varias veces o que quieres poner a disposición de los equipos menos técnicos, es cuando debes plantearte configurar una plantilla personalizada.

Desde mi punto de vista hay tres situaciones en las que claramente merece la pena invertir en la creación de plantillas personalizadas:

1. Corporaciones con varios activos digitales donde GTM lo gestionan perfiles poco técnicos: Suelen ser grandes grupos con diferentes marcas/webs, que pueden tener un contenedor de GTM para cada uno de ellos. Es probable que se quiera implementar el mismo píxel en varias de esas marcas y merece la pena que el equipo cree plantillas personalizadas bajo sus criterios y condiciones de seguridad del código. Después pondrán a disposición de los perfiles no técnicos dichas plantillas para que puedan trabajan de forma ágil e independiente.
2. Agencias/freelance que deben de configurar el mismo píxel en diferentes clientes: Todo el que ha trabajado configurando píxeles en GTM para distintos clientes sabe que hay algunos muy populares que se repiten en todos ellos (como el ya mencionado Facebook). Merece la pena crear una plantilla y tenerla a mano para agilizar la integración de esos píxeles y ser más eficientes.
3. Empresas de software que requieren la recolección de datos para sus servicios/productos: Si has creado un servicio/producto que requiere de la integración de un pixel en las webs de tus clientes para recolectar ciertos datos de los usuarios, tiene sentido que intentes facilitar el envío de esos datos a través de una herramienta tan ampliamente extendida como GTM. En este caso estoy hablando de todas esas herramientas a las que queremos enviar datos (Facebook, TikTok, Weborama…), si ellos mismos como empresas creasen esas plantillas asegurarían y facilitarían el envío de datos a sus plataformas. Añadiendo una ventaja adicional, que si hacen modificaciones en sus APIs de recolección de datos, podrían actualizar también sus plantillas evitando la pérdida de datos.

Pasos para crear una plantilla personalizada de GTM

Ahora que tenemos claro qué es una plantilla personalizada y por qué querríamos configurar una, ha llegado el momento de meternos en faena y hacer una paso a paso.

Paso 0: Entender cómo se envía la información a la herramienta

Todas las herramientas que recolectan datos lo hacen de forma muy similar. Disponen de una API a la que envías una petición GET o POST y les pasas los datos a través de parámetros de la URL o del body. Lo importante es enviar la información tal y como nos indican desde la herramienta, ya que sólo así podrán procesar correctamente los datos en sus servidores.

El punto clave aquí (y en el que desgraciadamente fallan muchas de las herramientas de recolección de datos) es disponer de una documentación clara donde se explique detalladamente cómo se ha de enviar la información desde nuestros activos digitales: qué parámetros debemos enviar, cómo, cuáles son obligatorios y cuales opcionales…. Una vez que tenemos esta información debemos de estudiarla e identificar cuáles son los parámetros que debemos recolectar desde nuestra web. Veámoslo con un ejemplo.

Ejemplo: Herramienta de recomendación de productos

Supongamos que en Datola hemos desarrollado una herramienta de recomendación de productos. Tenemos un algoritmo que recibe como entradas un feed con todos los productos disponibles en la tienda, las compras con los productos que han adquirido los usuarios a través de la web en los últimos x meses y además recibe un id de un producto que un usuario ha añadido a la cesta. El algoritmo devuelve posibles productos relacionados con el que se ha añadido a la cesta en base a todos los datos que tenemos, de forma que podremos incentivar el cross-selling en tiempo real.

Estos son los distintos datos que necesita nuestro algoritmo:

• Feed de productos: esta información nos la pasará el cliente periódicamente, en función de la rotación que tengan de productos.
• Productos comprados por los clientes: se recogerán directamente de la web del cliente a través de un pixel que debe saltar en la página de confirmación de compra, la propia herramienta almacenará y procesará estos datos durante un tiempo, para su posterior uso en el algoritmo de recomendación. Este es el píxel para el que vamos a crear nuestra plantilla de GTM.
• Producto añadido al carrito: cuando se quieran mostrar productos relacionados, se hará una llamada al servicio de recomendación, pasándole el id del producto añadido a la cesta. En base a este id y a los otros dos conjuntos de datos, se devolverá un listado de productos recomendados.

Como comentábamos los productos comprados por los clientes en la web se recogerán a través de un pixel en la página de confirmación de compra. En esa página se debe de hacer una llamada a nuestra API con los siguientes parámetros:

https://recomend.datola.es/transaction?aid=<account_id>&tid=<transaction_id>&pid=<product_id1;product_id2;...>&uid=<user_id>

aid: es el identificador de cuenta - Obligatorio
tid: es el identificador de la transacción - Obligatorio
pid: array de los identificadores de todos los productos comprados en esa transacción, deben ir separados por ; - Obligatorio
uid: es el identificador del usuario que haya hecho la compra - Opcional

Paso 1: Configurar la información de la plantilla

Una vez que tenemos claro cómo recoge la información la herramienta, podemos ir a GTM a crear nuestra plantilla. Para ello dentro de GTM tenemos que ir a la sección de plantillas y pulsar sobre el botón de Nueva.

Se inicia aquí un proceso de cinco pasos, el primero simplemente consiste en definir el nombre de la plantilla, una pequeña descripción y un icono.

Ejemplo: Información del recomendador de productos

Para nuestro ejemplo podríamos poner algo así:

En todas los pasos tendremos una parte de configuración a la izquierda y una vista previa de cómo queda la plantilla a la derecha.

Paso 2: Configurar los campos de la plantilla

El segundo paso es para configurar todos los campos dinámicos de la plantilla. Serán aquellos valores/parámetros que vamos a enviar a la herramienta (como el id de transacción o el id de producto). Estos datos deberían de estar en su mayoría expuestos en el dataLayer.

Para cada parámetro tendremos que crear un campo nuevo con el botón Añadir campo. Te aparecerá un listado de distintos formatos de campos: para introducir texto, menús desplegables, checkbox… Tendrás que valorar en cada caso cuál es el tipo de campo que mejor se adapta a la información que quieres recoger.

Además, cada campo tendrá unas opciones de configuración que te permitirán definir cómo se va a mostrar el campo en la plantilla. Puedes añadir un nombre al campo, un texto de información, reglas de validación del campo, condiciones de habilitación….Las combinaciones son enormes y mi recomendación es que juegues con ellas.

En todo momento podrás ver los cambios en la parte de vista previa y así saber cómo quedará la plantilla.

Ejemplo: Campos del recomendador de productos

Volviendo a nuestro ejemplo, como vimos en el paso 0, tendremos 4 campos que configurar: id de cuenta, el id de transacción, los ids de productos y el id de usuario.

• aid: Identificador de cuenta. Va a ser un campo de tipo entrada de texto. Es obligatorio, por lo que añadiremos la regla de que no puede quedar en blanco. Es un valor que nos dará Datola para identificar nuestra cuenta, y va a ser un valor alfanumérico de 10 caracteres (añadiremos una regla también con esto).
• tid: Identificador de la transacción. También es un campo de tipo entrada de texto y obligatorio. En este caso no sabemos el formato que utiliza cada empresa para identificar la transacción, por lo que dejaremos que introduzcan cualquier tipo de valor.
• pid: Identificador de los productos. También es un campo de tipo entrada de texto y obligatorio. Y de nuevo dejaremos que sea de formato libre.
• uid: Identificador de usuario. También de tipo entrada de texto y en este caso no pondremos ninguna regla de validación, ya que no es obligatorio.

Veamos cómo quedaría la configuración del aid, el resto serían muy similares:

Con todos los campos configurados, nos quedaría una plantilla muy simple, como vemos en la siguiente imagen:

En este caso todos los campos son de tipo entrada de texto, pero vamos a hacer un ejemplo de otro tipo de campo para que veas que es muy similar. Supongamos que podemos enviar a la herramienta dos eventos distintos, el de transacción que ya tenemos y también el de añadir a cesta. En la propia plantilla podríamos añadir un campo de tipo menú desplegable que permita elegir entre los dos eventos:

Este ejemplo nos lleva a otro caso que creo que es muy interesante y útil, que son las condiciones de habilitación de un campo. Con esto puedes hacer que un campo esté disponible o no en función de los valores que tienen otros campos. Por ejemplo, si seleccionamos el evento addtocart no tendría sentido enviar el campo de Id de transacción, ya que seguramente ni siquiera dispongamos de esa información cuando el usuario añade un producto al carrito. Para gestionar esto podemos añadir en el campo de Id de transacción condiciones de habilitación, de forma que solo aparezca cuando tenemos seleccionado el evento de transacción, pero no el de addtocart. En este caso el campo de Id de transacción quedaría así:

Como puedes ver en la imagen de arriba, el Id de transacción sólo estará habilitado cuando el campo event (Tipo de evento) tenga el valor transaction. En la vista previa vemos que si seleccionamos el evento addtocart el campo de Id de transacción desaparece. Con esto te puedes hacer una idea de la infinidad de combinaciones y configuraciones que puedes hacer en una plantilla.

Paso 3: Código para enviar la información a la herramienta

El siguiente paso es generar el código para enviar el pixel con toda la información a la herramienta. En este caso GTM utiliza lo que llama JavaScript en entorno aislado, que no es más que un subconjunto de JavaScript para utilizar de forma segura las plantillas.

Hay una API con ciertas funciones que debemos utilizar siguiendo las recomendaciones de GTM. En ella nos encontraremos algunos métodos JavaScript que nos ayudarán con el envío de la información como encodeUri, encodeUriComponent, sendPixel, injectScript… Puedes consultar esta API aquí. Antes de lanzarte a desarrollar esta parte te recomiendo que veas ejemplos de códigos de otras plantillas que están compartidas en la galería de plantillas, todas ellas van acompañadas de un repositorio donde podrás ver el código implementado, siempre sirven de fuente de inspiración.

Un punto importante a la hora de enviar la información es saber cómo acceder a los valores de los campos configurados en el paso previo. Es decir, en esos campos se incluirán ciertos valores a los que debemos acceder para enviar a la herramienta final. Todo ello se gestiona a través del objeto data. Veamos como se haría siguiendo con nuestro ejemplo del recomendador.

Ejemplo: Código para enviar la información al recomendador de productos

Veamos poco a poco el código necesario para enviar los datos al recomendador de Datola.

Empezamos accediendo a algunos de los métodos de la API que nos proporciona GTM. logToConsole nos permite mostrar información en la consola. encodeUri y encodeUriComponent nos ayudará a construir la petición final de forma correcta. sendPixel hará el envío final del pixel.

Después definimos la url a la que vamos a enviar la información, que no es más que la URL del recomendador de Datola:

A continuación definimos un array parameters donde vamos a almacenar todos los parámetros que se recogen en los campos. Para cada uno de los campos accedemos a la información utilizando el objeto data y a cada campo con el id que le hemos puesto cuando lo configuramos:

Fíjate que para cada campo le aplicamos el método encodeUriComponent, esto nos codificará de forma correcta caracteres especiales para la URI. En la última parte donde recogemos el identificador del usuario se utiliza un condicional para añadirlo sólo cuando se haya completado esta información, ya que este campo era opcional.

Una vez que tenemos la url y los parámetros, construimos la petición final que se va a enviar. Utilizamos el método encodeURI para asegurarnos de que la codificación de la url es correcta.

Finalmente enviamos el pixel con el método sendPixel y avisamos de que el código de la plantilla está completo con data.gtmOnSuccess();, esta siempre será la última instrucción de nuestro código.

Por supuesto, este es un ejemplo de cómo se podría hacer este código, pero se puede hacer de mil maneras distintas. Lo importante es que enviemos la información tal y como se especifica desde la herramienta.

Paso 4: Configurar permisos de la plantilla

En la siguiente pestaña se configuran los permisos que se necesitan en la plantilla. Estos permisos se añaden de forma automática cuando se usan algunos de los métodos de la API de las plantillas. Será necesario revisarlos y configurarlos para que todo funcione correctamente. Por ejemplo, al utilizar el sendPixel tendremos que configurar el permiso de Envía Píxeles. Veamos como hacerlo con nuestro ejemplo.

Ejemplo: Permisos en el recomendador de productos

Con el código que hemos utilizado en nuestra plantilla nos aparecen dos permisos: Registra información en la consola y Envía píxeles. Para el primero podemos especificar si los mensajes en consola se envían sólo en el modo de depuración o siempre. Para el segundo podemos limitar las URLs a las que se puede enviar la información, en nuestro caso lo limitaremos a la ruta específica del recomendador (https://recomend.datola.es/transaction):

Paso 5: Pruebas de la plantilla

El último paso sería probar que nuestra plantilla funciona correctamente antes de compartirla con el resto del mundo.

Para las plantillas más complicadas podemos configurar tests unitarios en la pestaña de Pruebas, esto nos permitirá comprobar que ante diferentes entradas de datos obtenemos la salida deseada.

También podemos hacer pruebas manuales en la parte de vista previa. Simplemente tendremos que rellenar los campos configurados con diferentes valores y pulsar sobre Ejecutar código.

Ejemplo: Pruebas manuales en el recomendador de productos

Para la plantilla de nuestro ejemplo no hemos planteado tests unitarios ya que se trata de un ejemplo muy simple. Pero sí que podemos hacer algunas pruebas manuales. Simplemente en la parte de vista previa rellenamos los campos y pulsamos sobre ejecutar código. En la parte de consola vemos las distintas salidas que obtenemos.

Este sería un ejemplo del pixel que se envía con valores correctos:

En la siguiente imagen vemos que nos aparece un error porque el id de cuenta no cumple con las reglas de validación del campo (habíamos especificado que tenía que ser un string de 10 caracteres):

Es importante que dediques cierto tiempo a hacer este tipo de pruebas para validar que el código de la plantilla es correcto antes de compartirla.

Compartir la plantilla

Ya hemos visto como crear una plantilla paso a paso. Ahora es el momento de compartirla. En este caso tenemos dos opciones: exportar e importar o subirla a la galería de plantillas.

Exportar e importar plantillas

Esta opción lo que nos permite es exportar un archivo de tipo .tpl. Ese archivo se puede importar desde cualquier contenedor de GTM, de forma que se podrá usar esa plantilla en ese contenedor. Puede ser interesante compartir así la plantilla si somos una gran corporación y queremos que la plantilla la utilicen distintos equipos dentro de nuestra organización, pero que no sea accesible desde fuera. Podría ser útil incluso tener un repositorio interno con todos los archivos .tpl disponibles.

Subir la plantilla a la galería de plantillas de la comunidad

Esta opción nos sirve para compartir la plantilla con toda la comunidad. Al igual que en la opción anterior tienes que exportar la plantilla a un archivo .tpl. Además tienes que generar otros tres archivos: metadata.yaml, LICENSE y README.me. Después hay que subir los cuatro archivos a un repositorio de GitHub y enviar la plantilla a la galería de plantillas. En el siguiente enlace puedes encontrar la documentación sobre todo el proceso.

Una vez que se ha enviado la plantilla, el equipo de Google revisará el repositorio de GitHub, si todo está correcto publicará la plantilla en la galería. Si detectan alguna incidencia con el código dejará un comentario en GitHub para que lo soluciones.

Conclusiones y recursos

En este post hemos visto un ejemplo muy sencillo de como crear paso a paso una plantilla de GTM, pero se puede complicar bastante. Como decíamos al principio es una parte más avanzada de GTM donde los perfiles más técnicos desarrollan estas plantillas para facilitarles la vida a los menos técnicos. Para finalizar me gustaría dejarte por aquí algunos recursos interesantes sobre este tema:

• Documentación oficial de la plantillas
• Guía de plantillas de Simo Ahava: Todos sabemos que la documentación de Google no siempre es la mejor, si quieres saber absolutamente todo sobre cómo crear plantillas revisar esta guía del gran Simo.
• GitHub de plantillas de Luratic: Si quieres ver ejemplos de plantillas muy pros, puedes revisar el GitHub de Luratic donde encontrarás un montón de ejemplos. También puedes utilizar directamente sus plantillas buscándolas en la galería.
• Guía de estilo y recomendaciones de GTM: Si aún estás dando tus primeros pasos con GTM no dejes de leer este post de Brais Calvo.

Espero que este artículo te ayude con tus primeros pasos con las plantillas de GTM y que te animes a compartir tu experiencia a través de los comentarios.