Las plantillas personalizadas te permiten escribir tus propias definiciones de etiquetas y variables para que otras personas de tu organización las usen junto con las plantillas integradas de etiquetas y variables. La naturaleza de zona de pruebas centrada en los permisos de las plantillas personalizadas hace posible 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 personalizadas de etiquetas y variables se definen en la sección Plantillas de Google Tag Manager. En la pantalla principal de Templates, se mostrará cualquier etiqueta o plantilla variable que ya se haya definido en tu contenedor. También puedes crear plantillas nuevas desde esta pantalla.
Puedes exportar una plantilla y compartirla con otros miembros de tu organización. Las plantillas se pueden desarrollar para una distribución más amplia en la Galería de plantillas de la comunidad.
Editor de plantillas
El Editor de plantillas le permite crear plantillas personalizadas, obtener vistas previas de ellas y probarlas. Tiene cuatro áreas principales de entrada para ayudarlo a definir su plantilla de etiqueta:
- Información: Define las propiedades básicas de la plantilla, como el nombre y el ícono de la etiqueta o la variable.
- Campos: es un editor visual para agregar campos de entrada a tu plantilla de etiqueta.
- Código: ingresa JavaScript en zona de pruebas para definir el comportamiento de la etiqueta o la variable.
- Permisos: Visualiza y establece límites sobre lo que se permite que haga tu etiqueta o variable.
Cree su primera plantilla de etiquetas personalizada
En este ejemplo, se explica cómo crear una etiqueta de píxel de ejemplo básica. Cuando se active esta etiqueta en una página web, se enviará 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 la barra de navegación izquierda y haz clic en el botón New en la sección Tag Templates.
2. Haz clic en Información y define el Nombre (obligatorio), la Descripción y el Ícono 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 como suena: una descripción breve (200 caracteres o menos) de lo que hace esta etiqueta.
Icon te permite elegir una imagen que aparecerá cuando se muestre la etiqueta en listas que admiten la propiedad del ícono. Las imágenes de los íconos deben ser archivos PNG, JPEG o GIF cuadrados que no superen los 50 KB y, como mínimo, 64 px por 64 px.
3. Haz clic en Actualizar para obtener una vista previa de tu plantilla.
A la derecha de las entradas de los campos, hay una ventana Template Preview. Cada vez que se realice un cambio en el editor, aparecerá el botón Actualizar. Haga clic en Actualizar para ver cómo afectan sus cambios al aspecto de su etiqueta.
4. Haga clic en Campos para agregar campos a su plantilla de etiqueta.
La pestaña Campos del Editor de plantillas te permite crear y editar campos en la plantilla de etiquetas. Los campos se usan para ingresar datos personalizados, como un ID de cuenta. Puedes agregar los elementos estándar del formulario, como campos de texto, menús desplegables, botones de selección y casillas de verificación.
5. Haz clic en Agregar campo y selecciona Entrada de texto. Reemplaza el nombre predeterminado (p.ej., "text1") por "accountId". En la Vista previa de la plantilla, haz clic en Actualizar.
El campo tendrá el ícono de selector de variables conocidas (
El siguiente paso es agregar una etiqueta al campo:
6. Haz clic en el ícono para expandir (
Debería aparecer una etiqueta de texto titulada "ID de 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 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 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 requeridos y realiza una solicitud a la URL especificada. Los valores data.gtmOnSuccess y data.gtmOnFailure le indican a Google Tag Manager cuando la etiqueta completó o falló su tarea. Luego, Google Tag Manager la usa para funciones como la secuencia de etiquetas o el modo de vista previa.
8. Haga clic en Guardar para guardar el progreso. Esto cargará los permisos detectados en el Editor de plantillas.
Algunas API de plantillas tienen permisos asociados que determinan lo que pueden o no pueden hacer. Cuando usas una API de plantillas 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 puede enviar datos sendPixel. En la entrada Enviar píxeles, haz clic en el ícono para expandir (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 con el permiso asociado a fin de restringir a dónde se pueden enviar los datos. Si la URL especificada en tu código no coincide con un patrón permitido de coincidencia de URL, la llamada sendPixel fallará.
Un patrón de coincidencia de URL debe 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 de acceso debe constar de al menos un "/". Usa un asterisco (*) como comodín para indicar un subdominio o patrón de ruta de acceso de cualquier longitud (p. ej., "https://\*.example.com/test/"). El asterisco es un carácter comodín que coincidirá con los diferentes patrones posibles, p. ej., ".", .
Especifica patrones adicionales de coincidencia de URL en líneas separadas.
10. Haz clic en Run Code y observa si hay problemas en la ventana Console.
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 usar.
Utilice su nueva etiqueta
El proceso para crear una etiqueta nueva que usa la plantilla de etiqueta personalizada que acabas de definir es como cualquier otra etiqueta:
- En Google Tag Manager, haga clic en Etiquetas > Nueva.
- Su nueva etiqueta aparecerá en la sección Personalizar de la ventana Etiqueta nueva. Haga clic en ella para abrir la plantilla de etiqueta.
- Complete los campos necesarios para la configuración de la plantilla de etiquetas.
- Haz clic en Activación y selecciona un activador adecuado para el momento en que se debe activar la etiqueta.
- Guarde la etiqueta y publique su contenedor.
Cree su 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 Tags > New para crear una nueva variable basada en tu variable personalizada, ve a Variables > New.
Consulta Crea 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 exportar la plantilla personalizada y, luego, importarla a otros contenedores de Tag Manager. Para exportar una plantilla:
- En Tag Manager, haga clic en Plantillas.
- Haga clic en el nombre de la plantilla que desea exportar de la lista. Se abrirá la plantilla en el Editor de plantillas.
- Haz clic en el menú Más acciones (more_vert) y selecciona Exportar.
Para importar una plantilla:
- En Tag Manager, haga clic en Plantillas.
- Haz clic en Nueva. Se abrirá una plantilla en blanco en el Editor de plantillas.
- Haz clic en el menú Más acciones (more_vert) y selecciona Importar.
- Selecciona el archivo
.tplque deseas importar.