Las plantillas personalizadas en Google Tag Manager permiten crear tags y variables mediante JavaScript para integrar cualquier herramienta de terceros. Estas plantillas se programan de forma segura en un entorno aislado y ofrecen APIs para tareas comunes como crear cookies o cargar scripts. Además, permiten compartir, actualizar y estandarizar tags de forma más sencilla.

1. Google Tag Manager - Custom Templates
(Plantillas Personalizadas)
David Vallejo
@thyng
25 Mayo 2019

2. David Vallejo
@thyng
Blog: https://www.thyngster.com
Freelance.
Especialista Senior en Implementaciones.

3. Hasta Ahora ...
La cantidad de tags de
vendors soportados por
Google Tag Manager era
limitada… Muchos de los
píxeles más utilizados (
Facebook … ), no estaban
soportados, y muchos de los
nuevos añadidos pasaban
desapercibidos.

4. ¿Qué son las plantillas
personalizadas?
Los Custom Templates nos van a permitir crear
plantillas de tags y variables en Google Tag Manager
Para poder integrar cualquier herramienta o third
Party vendor en nuestros contenedores.

5. ¿Y esto no se podía hacer ya con
Custom HTML?
Si. Pero los Custom HTML no disponían
De ningún control de permisos, ni corrían bajo
Un entorno cerrado ( sandbox ), ni eran
reutilizables, ni disponían de librerías
específicas para realizar las tareas más comunes
A la hora de añadir un pixel
( crear cookies, cargar un JS , etc ), y por supuesto no eran tan
intuitivas una vez configuradas.

6. Antes ...

7. … Ahora!

8. Características Plantillas

9. ● Se programan en JavaScript,pero no tendremos acceso a las
funciones standard de JS. Todo se ejecuta bajo un sandbox
limitado.
● Deberemos cargar las librerías que nos ofrece GTM ( para
escribir mensajes en la consola, para leer y declarar variables
globales, para cargar archivos externos, para lanzar pixeles,
… )
● Podremos utilizar “partes” de ES6 ( uso de const, let y
arrow functions, en un futuro se añadirán más )

10. Listado de API’s Disponibles ( Se añadirán más en el futuro )
Link: https://developers.google.com/tag-manager/templates/api

11. Disponen de
opciones de
validación para
“forzar” a los
usuarios a que
introduzcan de
manera correcta los
campos en los tags

12. Se pueden configurar los
mensajes de error,
personalizar los textos de
ayuda, los valores por defecto,
con el fin de poder ayudar a
los usuarios primerizos a
entender qué valores deben
introducir en los campos de
los tags

13. Control preciso de permisos.
Por cada una de las API’s que
carguemos podremos definir
qué permisos tendrá nuestra
plantilla, por ejemplo desde
que URL’s se podrán inyectar
scripts, o a qué variables
globales tendrá acceso
nuestro tag.

14. Se pueden compartir:
https://www.gtmtemplates.com

15. Reutilizables:
Si tenemos que
hacer un update
a nuestros tags,
por ejemplo para
Añadir una nueva funcionalidad o cambiar el dominio
desde el cual cargamos el script, con tan solo actualizar
nuestra plantilla, todos los tags se verían beneficiados de
manera automática.

16. Más Ventajas

17. ● Más control y “governancia” sobre lo que hacen los
usuarios en los contenedores.
Las plantillas personalizadas están pensadas para el
entorno lo más seguro posible, de ahí que corra todo bajo
un sandbox limitado.
● Incluso podríamos bloquear a través del dataLayer el
lanzamiento de Custom Scripts y de esta manera obligar a
los usuarios a utilizar plantillas. ( Sin probar )

18. ● Posibilidad de descarga de plantillas realizadas por otros
profesionales y compañeros de profesión.
No sería descabellado en pensar que un futuro allá algún
tipo de marketplace que además de ofrecer plantillas,
pueda incluso a través del API de Google Tag Manager
añadirlas con tan solo un click, e include incluir la
posibilidad de avisar cuando hay updates de estas
plantillas o actualizarlas automáticamente.

19. ● Estandarización de funciones ( no tendremos 4 funciones
diferentes en 4 tags para escribir cookies )
● Mejores prácticas de programación ( al utilizar el API, nos
obligaremos a tener que hacer las cosas de una manera
concreta y optimizada ,que nos ayudará a coger hábitos )
● Evitaremos la sobreescritura de variables de manera
accidental. ( la mayoría de APIs comprobarán si una
variable ya existe antes de inicializarla)

20. Pero No Todo Es Tan Bonito ...

21. Learning Curve + Limitaciones
Al no utilizar las funciones
habituales de JS y estar todo bajo el
sandbox nos llevará un tiempo
aprender a utilizar todos estos
nuevos los APIs así como hacernos
con las limitaciones que ellos
mismo imponen.

22. Learning Curve + Limitaciones
Al no utilizar las funciones
habituales de JS y estar todo bajo el
sandbox nos llevará un tiempo
aprender a utilizar todos estos
nuevos los APIs así como hacernos
con las limitaciones que ellos
mismo imponen.

23. Missing Libraries, Funcionalidades
Seguramente, en algún momento
nos veremos limitados por los API’s
ofrecidos por el editor de plantillas,
pero Google irá añadiendo nuevas
funcionalidades según se vayan
reclamando/necesitando.

24. Lecturas Recomendadas
¿ Quieres saber más sobre Custom Templates o Google Tag Manager
en General ? No búsques más.

25. Lecturas Recomendadas
Custom Templates Guide For Google Tag Manager (
Simo Ahava )
https://www.simoahava.com/analytics/custom-templates-guide-for-google-tag-manager/
Create Facebook Pixel Custom Tag Template ( Video -
Simo Ahava )
https://www.youtube.com/watch?v=5ESEtwq7fxc
¿ Quieres saber más sobre Custom Templates o Google Tag Manager
en General ? No búsques más.
Simo-san ( @simoahava ) tiene todas las respuestas:

26. Lecturas Recomendadas
Tag Manager: Introducing Custom Templates ( Blog Google )
https://blog.google/products/marketingplatform/analytics/tag-manager-introducing-custom-templates/
Documentación Oficial
https://developers.google.com/tag-manager/templates/

27. Gracias
David Vallejo
@thyng
https://www.thyngster.com