Guía de inicio rápido sobre plantillas personalizadas

Resumen

Con las plantillas personalizadas puedes crear tus propias definiciones de variables y etiquetas 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.

Editor de plantillas

Con el editor de plantillas puedes crear, revisar y probar plantillas personalizadas. Tiene cuatro partes principales en las que puedes introducir datos para definir una plantilla de etiqueta:

  • 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, 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 obtener una vista previa de 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 sirven para introducir datos personalizados, como el 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, text1) 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 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 cifrado 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 cuándo ha terminado la etiqueta la tarea o en qué momento se ha producido un error durante el proceso, respectivamente. Luego, 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 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 Send Pixels, 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 que se especifica 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 (como "https://sub.example.com/"). La ruta debe tener al menos una "/". Si quieres indicar un patrón de ruta o subdominio de cualquier longitud, usa un asterisco (*) como comodín (por ejemplo, "https://\*.example.com/test/"). Este carácter comodín incluye los diversos patrones posibles, por ejemplo, "\*.example.com/" corresponderá a www.example.com, shop.example.com, blog.example.com, etc. El asterisco debe escaparse con el carácter de barra invertida: "\*". Las URL que no contengan caracteres adicionales (por ejemplo, "https://example.com/") se tratarán como si terminaran con un comodín (es decir, como en "https://example.com/\*").

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

10. Haz clic en Probar y echa un vistazo a la ventana Consola para comprobar si hay algún problema.

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

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 etiqueta 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.