Guía de inicio rápido sobre plantillas personalizadas

Introducción

Las plantillas personalizadas te permiten crear tus propias etiquetas y definiciones de variables para que otros usuarios de tu organización puedan usarlas junto con las plantillas integradas de variables y de etiquetas. Como las plantillas personalizadas se basan en permisos y se desarrollan en la zona de pruebas, permiten crear etiquetas y variables personalizadas de forma más segura y eficiente que usando etiquetas HTML personalizadas y variables de JavaScript personalizadas.

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

Puedes exportar una plantilla y compartirla con otros usuarios de tu organización. Además, las plantillas se pueden distribuir para que lleguen a una audiencia más amplia a través de la galería de plantillas de la comunidad.

Editor de plantillas

El Editor de plantillas te permite crear, revisar y probar plantillas personalizadas. Tiene cuatro partes principales en las que puedes introducir datos para definir la plantilla de etiquetas:

  • Información: define las propiedades básicas de la plantilla, como el nombre de la etiqueta o variable y su icono.
  • Campos: es un editor visual que permite añadir campos de entrada a la plantilla de etiqueta.
  • Código: permite introducir código JavaScript en la zona de pruebas para determinar el funcionamiento de la etiqueta o variable.
  • Permisos: permiten ver y limitar lo que puede hacer la etiqueta o variable.

Crear la primera plantilla de etiqueta personalizada

En este ejemplo se explica cómo crear una etiqueta de píxel básica. 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 la etiqueta.

1. Para crear tu primera plantilla, selecciona Plantillas en el panel de navegación de la izquierda y, a continuación, el botón Nueva de la sección Plantillas de etiquetas.

2. Haz clic en Información y define los campos Nombre (obligatorio), Descripción e Icono de la etiqueta.

El nombre es el texto que se mostrará a los usuarios cuando vayan a implementar esta etiqueta en la interfaz de usuario de Tag Manager.

La descripción tiene un máximo de 200 caracteres e indica para qué sirve la etiqueta.

El icono es la imagen que aparecerá cuando la etiqueta se muestre en listas que admitan la propiedad de iconos. Las imágenes de los iconos deben ser archivos cuadrados en formato PNG, JPEG o GIF, no deben superar superen los 50 kB y deben medir al menos 64 píxeles x 64 píxeles.

3. Haz clic en Actualizar para previsualizar la plantilla.

A la derecha de los campos, verás la ventana Vista previa de plantilla. Cada vez que se haga un cambio en el editor, se mostrará el botón Actualizar. Haz clic en él para ver cómo afectan los cambios al aspecto de la etiqueta.

4. Haz clic en Campos para añadir campos a la plantilla de etiqueta.

La pestaña Campos del editor de plantillas permite añadir y editar campos en la plantilla de etiqueta. Los campos se utilizan para introducir datos personalizados, como un ID de cuenta. Puedes añadir elementos de formulario estándar, como campos de texto, menús desplegables, botones de selección y casillas.

5. Haz clic en Añadir campo y selecciona Entrada de texto. Sustituye el nombre predeterminado (p. ej., texto1) por accountId. Después, ve a Vista previa de plantilla y haz clic en Actualizar.

Junto al campo, aparecerá el icono de selección de variables (icono de selección de variables), que permite a los usuarios de la plantilla seleccionar las variables que están activas en ese contenedor.

A continuación, debes añadir una etiqueta al campo.

6. Para ver más opciones, haz clic en el icono de mostrar (icono de mostrar) situado junto al campo de texto. En el campo Nombre visible, introduce ID de cuenta. Después, ve a Vista previa de plantilla y haz clic en Actualizar.

Sobre el campo debe aparecer la etiqueta de texto ID de cuenta.

7. Haz clic en la pestaña Código e introduce en el editor el código JavaScript en zona de pruebas:

// 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 sendPixel.

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

La siguiente línea, 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 punto de conexión de URL fijo que registra datos de analíticas y el ID de cuenta codificado con el que se ha configurado la etiqueta.

La última línea, sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure), ejecuta la función sendPixel() con los parámetros necesarios y envía una solicitud a la URL especificada. Los valores data.gtmOnSuccess y data.gtmOnFailure indican a Google Tag Manager si la etiqueta ha completado o no la tarea. Después, Google Tag Manager los utiliza en funciones como la secuenciación de etiquetas o el modo de vista previa.

8. Haz clic en Guardar para guardar los cambios. Al hacerlo, se cargarán en el editor de plantillas los permisos que se detecten.

Algunas API de plantillas tienen permisos asociados que determinan lo que pueden hacer y lo que no. Al incluir en el código alguna de estas API, como sendPixel, Tag Manager mostrará los permisos relevantes en la pestaña Permisos.

9. Haz clic en Permisos para acotar los dominio a los que sendPixel puede enviar datos. En la entrada Send Pixels, haz clic e nel icono de mostrar (icono de mostrar) e introduce https://endpoint.example.com/ en Patrones de coincidencia de URL permitidos.

Cuando una plantilla de etiqueta está configurada para enviar datos, debes especificar un patrón de coincidencia de URL permitido en el permiso asociado para indicar a dónde se pueden enviar los datos. Si la URL incluida en el código no coincide con el patrón de coincidencia de URL permitido, la llamada de sendPixel no se hará correctamente.

Los patrones de coincidencia de URL deben usar HTTPS y especificar patrones de host y de ruta. El host puede ser un dominio (p. ej., https://example.com/) o un subdominio específico (p. ej., https://sub.example.com/). La ruta debe contener al menos un carácter "/". Usa un asterisco (*) como comodín para indicar un subdominio o patrón de ruta de cualquier tamaño (p. ej., https://\*.example.com/test/). El asterisco es un carácter comodín que cubrirá los posibles patrones (p. ej., \*.example.com/ se ajustará a www.example.com, shop.example.com, blog.example.com, etc.). El asterisco debe escaparse con una barra invertida: \*. Las URL que no incluyan más caracteres (p. ej., https://example.com/) se tratarán como si terminasen con un comodín (es decir, https://example.com/\*.

Debes indicar cada patrón de coincidencia de URL adicional en una línea.

10. Haz clic en Ejecutar código y consulta la ventana Consola para comprobar si hay algún problema.

Si se detecta algún error, aparecerá en la ventana Consola.

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

Al hacerlo, la plantilla de etiqueta debería estar disponible.

Usar la nueva etiqueta

El proceso para crear una etiqueta que use la plantilla personalizada es el mismo que el de cualquier etiqueta:

  1. En Google Tag Manager, haz clic en Etiquetas > Nueva.
  2. La nueva etiqueta aparecerá en la sección Personalizado de la ventana Nueva etiqueta. Haz clic en ella para abrir la plantilla.
  3. Rellena los campos necesarios para configurar la plantilla de etiqueta.
  4. Haz clic en Activación y selecciona el activador con el que debe activarse la etiqueta.
  5. Guarda la etiqueta y publica el contenedor.

Crear la primera plantilla de variable personalizada

Las plantillas de variable personalizada son similares a las plantillas de etiqueta, aunque hay algunas diferencias importantes entre ambas:

  • Las plantillas de variable personalizada deben devolver un valor.

    En lugar de llamar a data['gtmOnSuccess'] para indicar que han terminado, las variables devuelven directamente un valor.

  • Las plantillas de variable personalizada se utilizan en partes diferentes de la UI de Tag Manager.

  • Para crear una variable basada en una variable personalizada, en lugar de ir a Etiquetas > Nueva, ve a Variables > Nueva.

Consulta el artículo Crear variables personalizadas para saber cómo crear una plantilla de variable personalizada.

Exportar e importar

Para compartir una plantilla personalizada con tu organización, puede exportar la plantilla personalizada e importarla a otros contenedores de Tag Manager. Para exportar una plantilla:

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

Para importar una plantilla:

  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 quieras importar.