Guía de inicio rápido para las plantillas personalizadas

Las plantillas personalizadas te permiten escribir tus propias definiciones de etiquetas y variables para que otros miembros de la organización puedan usarlas junto con las plantillas integradas de etiquetas y variables. La naturaleza de zona de pruebas centrada en los permisos de las plantillas personalizadas permite escribir etiquetas y variables personalizadas de una manera más segura y eficiente que cuando se usan etiquetas HTML personalizadas y variables de JavaScript personalizadas.

Las plantillas de etiquetas y variables personalizadas se definen en la sección Plantillas de Google Tag Manager. En la pantalla Plantillas principal, se mostrarán todas las plantillas de etiquetas o variables que ya se definieron en tu contenedor. También puedes crear nuevas plantillas desde esta pantalla.

Puedes exportar una plantilla y compartirla con otras personas de tu organización. Además, puedes desarrollar plantillas para una distribución más amplia en la Galería de plantillas de la comunidad.

El Editor de plantillas

El Editor de plantillas te permite crear plantillas personalizadas, obtener una vista previa de ellas y probarlas. Tiene cuatro áreas principales de entrada que te ayudarán a definir tu plantilla de etiqueta:

  • Información: Define propiedades básicas de la plantilla, como la etiqueta o el nombre de la variable y el ícono.
  • Campos: Este es un editor visual que te permite agregar campos de entrada a tu plantilla de etiqueta.
  • Code: Ingresa JavaScript de zona de pruebas para definir el comportamiento que debe tener tu etiqueta o variable.
  • Permisos: Consulta y establece límites sobre lo que puede hacer tu etiqueta o variable.

Crea tu primera plantilla de etiqueta personalizada

En este ejemplo, se te explicará cómo crear un ejemplo básico de etiqueta de píxel. Cuando esta etiqueta se activa en una página web, envía un hit con la información correcta de la cuenta a los servidores del proveedor de etiquetas.

1. Para comenzar tu primera plantilla, haz clic en Plantillas en el panel de navegación izquierdo y haz clic en el botón New en la sección Tag Templates.

2. Haz clic en Info y define el Name (obligatorio), la Description y el Icon de la etiqueta.

El nombre es lo que se mostrará a los usuarios cuando implementen esta etiqueta en toda la interfaz de usuario de Tag Manager.

La descripción es justo lo que parece: una breve descripción (200 caracteres o menos) de lo que hace esta etiqueta.

Icon te permite elegir una imagen que aparecerá cuando la etiqueta se muestre en listas que admiten la propiedad de ícono. Las imágenes de los íconos deben ser archivos PNG, JPEG o GIF cuadrados de no más de 50 KB y de 64 px por 64 px como mínimo.

3. Haz clic en Actualizar para obtener una vista previa de tu plantilla.

A la derecha de las entradas del campo, se muestra la ventana Vista previa de la plantilla. Cada vez que se realice un cambio en el editor, aparecerá el botón Actualizar. Haz clic en Actualizar para ver qué hacen los cambios en la apariencia de tu etiqueta.

4. Haz clic en Campos para agregar campos a tu plantilla de etiqueta.

La pestaña Campos del Editor de plantillas te permite crear y editar campos en la plantilla de etiqueta. Los campos se usan para ingresar datos personalizados, como un ID de la cuenta. Puedes agregar los elementos de formulario estándar, como campos de texto, menús desplegables, botones de selección y casillas de verificación.

5. Haz clic en Agregar campo (Add Field) y selecciona Entrada de texto (Text input). Reemplaza el nombre predeterminado (p.ej., "text1") por "accountId". En Vista previa de la plantilla, haz clic en Actualizar.

El campo tendrá un ícono de selector de variables conocidas (ícono de selector de variables) junto a él. Los usuarios de esta plantilla pueden hacer clic en el ícono del selector de variables para elegir las variables que están activas en este contenedor.

El siguiente paso es agregar una etiqueta al campo:

6. Haz clic en el ícono de expandir (expandir ícono) junto al campo de texto para abrir más opciones para este campo. Ingresa "ID de la cuenta" en el campo Nombre visible. En Vista previa de la plantilla, haz clic en Actualizar.

Debería aparecer una etiqueta de texto con el título "ID de la cuenta" sobre el campo.

7. Haz clic en la pestaña Code y, luego, ingresa JavaScript de zona de pruebas en el editor:

// require relevant API
const sendPixel = require('sendPixel');
const encodeUriComponent = require('encodeUriComponent');

// capture values of template fields
const account = data.accountId;

// use the provided APIs to do things like send pixels
const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);
sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure);

La primera línea de código, const sendPixel = require('sendPixel'), importa la API de sendPixel.

La segunda línea de código, const encodeUriComponent = require('encodeUriComponent'), importa la API de encodeUriComponent.

La línea siguiente, const account = data.accountId;, obtiene el valor de accountId que se creó en el paso 5 y lo almacena en una constante llamada account.

La tercera línea de código, const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);, configura una constante url que concatena un extremo de URL fijo que registra datos de estadísticas y el ID de cuenta codificado con el que se configuró la etiqueta.

La última línea, sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure), ejecuta la función sendPixel() con los parámetros necesarios y realiza una solicitud a la URL especificada. Los valores data.gtmOnSuccess y data.gtmOnFailure le indican a Google Tag Manager cuándo la etiqueta completó o no su tarea. Luego, este los usa para funciones como la secuenciación de etiquetas o el modo de vista previa.

8. Haz clic en Guardar para guardar el progreso. Esto cargará los permisos detectados en el Editor de plantillas.

Algunas APIs de plantillas tienen permisos asociados que determinan lo que pueden o no hacer. Cuando uses una API de plantilla, como sendPixel, en tu código, Tag Manager mostrará los permisos relevantes en la pestaña Permisos.

9. Haz clic en Permisos para definir mejor a qué dominios sendPixel puede enviar datos. En la entrada Enviar píxeles, haz clic en el ícono para expandir (expandir ícono) y, luego, ingresa https://endpoint.example.com/ en Patrones de coincidencia de URL permitidos.

Cuando se configura una plantilla de etiqueta para enviar datos, debes especificar un Patrón de coincidencia de URL permitido en el permiso asociado a fin de restringir el destino al que se pueden enviar los datos. Si la URL especificada en el código no coincide con un patrón de coincidencia de URL permitido, la llamada a sendPixel fallará.

Un patrón de coincidencia de URL debe usar HTTPS y especificar patrones de host y de ruta de acceso. El host puede ser un dominio (p. ej., “https://example.com/”) o un subdominio específico (p. ej., “https://sub.example.com/”). La ruta de acceso debe constar de al menos un “/”. Usa un asterisco (*) como comodín para indicar un subdominio o patrón de ruta de cualquier longitud (p. ej., “https://\*.example.com/test/”). El asterisco es un carácter comodín que captará los diversos patrones posibles, p. ej., “\*.example.com/”. Un carácter de escapehttps://example.com/www.example.comshop.example.comblog.example.com\*https://example.com/\*

Especifica patrones de coincidencia de URL adicionales en líneas separadas.

10. Haz clic en Run Code y consulta la ventana de Console para ver si hay algún problema.

Los errores detectados aparecerán en la ventana Console.

11. Haz clic en Guardar y cierra el Editor de plantillas.

La plantilla de etiqueta ya debería estar lista para su uso.

Utiliza tu nueva etiqueta

El proceso para crear una etiqueta nueva que use tu plantilla de etiqueta personalizada recién definida es igual a cualquier otra etiqueta:

  1. En Google Tag Manager, haz clic en Etiquetas > New.
  2. Su nueva etiqueta aparecerá en la sección Personalizada de la ventana Etiqueta nueva. Haz clic en él para abrir la plantilla de etiqueta.
  3. Completa los campos necesarios para la configuración de la plantilla de la etiqueta.
  4. Haz clic en Activación (Triggering) y selecciona un activador adecuado para el momento en que se debe activar la etiqueta.
  5. Guarda la etiqueta y publica tu contenedor.

Crea tu primera plantilla de variable personalizada

Las plantillas de variables personalizadas son similares a las plantillas de etiquetas, con algunas diferencias notables:

  • Las plantillas de variables personalizadas deben mostrar un valor.

    En lugar de llamar a data['gtmOnSuccess'] para indicar la finalización, las variables muestran un valor directamente.

  • Las plantillas de variables personalizadas se usan en diferentes partes de la IU de Tag Manager.

  • En lugar de ir a Etiquetas > Nuevo para crear una variable nueva basada en la variable personalizada, ve a Variables > Nueva.

Consulta Cómo crear una variable personalizada si deseas obtener una guía completa para crear una plantilla de variable personalizada.

Importar y exportar

Para compartir una plantilla personalizada con tu organización, puedes exportarla y, luego, importarla en otros contenedores de Tag Manager. Para exportar una plantilla, haz lo siguiente:

  1. En Tag Manager, haz clic en Plantillas.
  2. Haz clic en el nombre de la plantilla que deseas exportar de la lista. Esto abrirá la plantilla en el Editor de plantillas.
  3. Haz clic en el menú Más acciones () y selecciona Exportar.

Para importar una plantilla, haz lo siguiente:

  1. En Tag Manager, haz clic en Plantillas.
  2. Haz clic en Nueva. Se abrirá una plantilla en blanco en el Editor de plantillas.
  3. Haz clic en el menú Más acciones () y selecciona Importar.
  4. Selecciona el archivo .tpl que deseas importar.