Guía de inicio rápido sobre plantillas personalizadas

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 el entorno aislado, 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 muestra una lista con las plantillas de etiquetas o variables que ya se hayan definido en tu contenedor. Desde esta pantalla también puedes crear plantillas.

Puedes exportar una plantilla y compartirla con otros usuarios de tu organización. También puedes publicar plantillas en la galería de plantillas comunitarias para que otros muchos usuarios puedan utilizarlas.

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 una plantilla de etiqueta:

  • Información: aquí se definen 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: aquí se introduce código JavaScript en entorno aislado para determinar el funcionamiento de la etiqueta o variable.
  • Permisos: en esta área se ve y limita 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, haz clic en "Plantillas" en el panel de navegación de la izquierda y, a continuación, en 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 los 50 kB y deben medir al menos 64x64 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 influyen los cambios en el 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 usan 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 (por ejemplo, texto1) por accountId. Después, accede a Vista previa de la plantilla y haz clic en Actualizar.

Junto al campo, aparecerá el icono del selector de variables (icono de selector 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 entorno aislado:

// 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 endpoint 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 usa 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 APIs de plantillas tienen permisos asociados que determinan lo que pueden hacer y lo que no. Al incluir en el código alguna de estas APIs, como sendPixel, Tag Manager muestra los permisos correspondientes en la pestaña Permisos.

9. Haz clic en Permisos para acotar los dominios a los que sendPixel puede enviar datos. En la entrada de enviar píxeles, haz clic en el 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 concuerda 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 (por ejemplo, https://example.com/) o un subdominio específico (por ejemplo, https://sub.example.com/). La ruta debe contener al menos una barra (/). Usa un asterisco (*) como comodín para indicar un subdominio o patrón de ruta de cualquier tamaño (por ejemplo, https://\*.example.com/test/). El asterisco es un carácter comodín que abarcará los posibles patrones (por ejemplo, \*.example.com/ se ajustará a www.example.com, shop.example.com, blog.example.com, etc.). El asterisco debe escaparse con una barra inversa (\*). Las URLs que no incluyan más caracteres (por ejemplo, https://example.com/) se tratarán como si terminaran con un comodín (es decir, https://example.com/\*).

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

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 accionarse 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 usan 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 una variable personalizada para saber cómo crear una plantilla de variable personalizada.

Exportar e importar

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

  1. En Tag Manager, haz clic en Plantillas.
  2. En la lista, haz clic en el nombre de la plantilla que quieres 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, sigue estos pasos:

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