Guía de inicio sobre las Plantillas Personalizadas de Google Tag Manager

Las Custom Templates o Plantillas Personalizadas de Google Tag Manager (GTM) llegaron el año pasado para cambiar la forma de trabajar con esta herramienta. ¿Sabes qué son y cómo funcionan exactamente?

Si estás pez, sigue leyendo porque te proponemos una Guía de inicio rápido sobre las Plantillas Personalizadas de GTM y un ejemplo práctico para Crear nuestro tag de Facebook y usarlo o compartirlo con otros colaboradores.

¿Qué son las Plantillas Personalizadas de Google Tag Manager?

Las plantillas de Google Tag Manager son una funcionalidad de la herramienta que nos permite generar de manera sencilla y controlada nuestras propias configuraciones personalizadas de HTML y Javascript. Gracias a esta característica podremos crear etiquetas y variables que podremos testear y posteriormente exportar y compartir con otros usuarios o contenedores.

guia plantillas

Las Plantillas tienen un gran potencial y nos traen una nueva manera de trabajar con la herramienta. Como se puede incluir código Javascript o HTML se puede llegar a convertir en todo lo complejo que necesitemos.

Tipos de Plantillas

Existen dos tipos de Plantillas en GTM que podremos utilizar dentro de nuestro contenedor:

  • Plantillas de etiqueta. Son las más complejas ya que nos permitirán configurar absolutamente todo sobre la etiqueta: su apariencia, valores, código, texto que deberemos introducir, etc. Tienen una gran versatilidad y gracias a ellas podremos tener nuestros propios tags personalizados (En la guía incluimos cómo crear un píxel de Facebook)
  • Plantillas de variable. Son menos usadas, pero igual de útiles. Podremos crear variables personalizadas que contengan Javascript y nos devuelvan un valor. De esta manera, podremos crear, por ejemplo, variables que nos devuelva el título de la página, condicionar el valor de salida según las variables de entrada, etc.

Una vez creamos nuestra plantilla personalizada disponemos de un editor con las siguientes secciones:

  • 1) Información: en este apartado anotaremos el nombre de nuestro tag que aparecerá en GTM, junto una descripción de la funcionalidad y un icono para identificarlo más fácilmente si lo deseamos.
  • 2) Campos: desde aquí se definen las variables o campos que el usuario tendrá que rellenar cuando use nuestro tag personalizado. Existen varios tipos de campos y cada uno de ellos tiene múltiples configuraciones y características que podremos usar.

A continuación, los diferentes campos que podemos configurar son:

  • Entrada de texto: campo simple de texto para incluir valores arbitrarios.
  • Menú desplegable: como su nombre indica para incluir un menú en el que seleccionaremos solamente una opción de este.
  • Casilla de verificación: incluirá un checkbox para habilitar o deshabilitar funciones que configuremos.
  • Botones de selección: listado de botones en las que el usuario solamente podrá seleccionar una de las opciones disponibles.
  • Tabla simple: entrada de una tabla simple en la que podremos introducir nuevas filas. Cada una de las mismas solamente podrá tener o campos de texto o menús desplegables.
  • Tabla de parámetros: para introducir una tabla más compleja en la que no podremos modificar un elemento de manera individual. La unidad más pequeña que se puede modificar es la fila completa.
  • Grupo: es un parámetro especial que incluye un conjunto de parámetros de plantilla.
  • Etiqueta: se utiliza para añadir texto a la interfaz de GTM que proporcione información al usuario. Es un parámetro especial al que no se le puede asignar un valor

 

  • 3) Código: el core de nuestra plantilla. Aquí deberemos incluir todo el código Javascript que utilicemos para darle funcionalidad a nuestro tag personalizado.

Esta sección pertenece a un entorno de pruebas de Javascript que permite ejecutar de manera segura la lógica implementada. Para proporcionar un entorno seguro se deshabilitan o retiran algunas opciones y características del propio lenguaje Javascript. Para más información sobre limitaciones y uso podremos visitar la página oficial de la documentación. Además, este Sandboxed Javascript requiere el uso de APIs propias de Google Tag Manager para poder añadirle funcionalidades que deberemos de conocer.

codigo GTM

  • 4) Permisos: dependiendo de las funcionalidades de nuestro Tag será necesario que agreguemos los permisos según las APIs que hayamos incluido.
  • 5) Pruebas: en este último apartado podremos probar a fondo nuestra etiqueta añadiendo diferentes configuraciones y ejecutando el código de manera segura. El sistema nos informará de cualquier error de ejecución, sintaxis de código o problema que nos encontremos al realizar cada prueba.

Ahora, con todos estos elementos, podríamos crear un nuevo Custom Template para nuestro tag de Facebook y usarlo o compartirlo con otros colaboradores como proponíamos en el principio del artículo.

¡No te asustes! A continuación, puedes consultar una Guía paso a paso para crear una etiqueta para un píxel de Facebook. Guía Paso a Paso Etiqueta Facebook

boton descarga

Apasionado de la informática y las nuevas tecnologías. Autodidacta y curioso, nunca me canso de testear y ver cosas nuevas!
Siempre pendiente del detalle, del dato. Gamer hasta la médula y siempre acompañado de un buen libro.

Enviar comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *