Las plantillas personalizadas le permiten escribir sus propias etiquetas y definiciones de variables para que otras personas dentro de su organización puedan usarlas junto con las plantillas integradas de etiquetas y variables. La naturaleza de espacio aislado y 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 JavaScript personalizadas .
Las etiquetas personalizadas y las plantillas de variables se definen en la sección Plantillas de Google Tag Manager. La pantalla principal Plantillas enumerará cualquier etiqueta o plantilla variable que ya se haya definido en su contenedor. También puede crear nuevas plantillas desde esta pantalla.
Puede exportar una plantilla y compartirla con otras personas de su organización, y las plantillas se pueden desarrollar para una distribución más amplia en la Galería de plantillas de la comunidad .
El editor de plantillas
El Editor de plantillas le permite crear, obtener una vista previa y probar plantillas personalizadas. Tiene cuatro áreas principales de entrada para ayudarlo a definir su plantilla de etiqueta:
- Información : defina las propiedades básicas de la plantilla, como la etiqueta o el nombre y el icono de la variable.
- Campos : este es un editor visual para agregar campos de entrada a su plantilla de etiqueta.
- Código : ingrese JavaScript en espacio aislado para definir cómo debe comportarse su etiqueta o variable.
- Permisos : vea y establezca límites sobre lo que se le permite hacer a su etiqueta o variable.
Crea tu primera plantilla de etiqueta personalizada
Este ejemplo lo guiará a través de cómo crear una etiqueta de píxel de ejemplo básica. Cuando esta etiqueta se activa en una página web, enviará un hit con la información de cuenta correcta a los servidores del proveedor de la etiqueta.
1. Para comenzar su primera plantilla, haga clic en Plantillas en la barra de navegación izquierda y haga clic en el botón Nuevo en la sección Plantillas de etiquetas .
2. Haga clic en Información y defina el Nombre de la etiqueta (obligatorio), Descripción e Icono .
El nombre es lo que se le presentará a los usuarios cuando vayan a implementar esta etiqueta en la interfaz de usuario de Tag Manager.
La descripción es exactamente lo que parece: una descripción breve (200 caracteres o menos) de lo que hace esta etiqueta.
Icon le permite elegir una imagen que aparecerá cuando la etiqueta se muestre en listas que admitan la propiedad icon. Las imágenes de íconos deben ser archivos PNG, JPEG o GIF cuadrados que no superen los 50 kB y que tengan un tamaño mínimo de 64 px por 64 px.
3. Haga clic en Actualizar para obtener una vista previa de su plantilla.
A la derecha de las entradas de campo, hay una ventana de vista previa de la plantilla . Cada vez que se realice un cambio en el editor, aparecerá el botón Actualizar . Haga clic en Actualizar para ver qué hacen sus cambios en la apariencia de su etiqueta.
4. Haga clic en Campos para agregar campos a su plantilla de etiquetas.
La pestaña Campos del Editor de plantillas le permite crear y editar campos en la plantilla de etiquetas. Los campos se utilizan para ingresar datos personalizados, como una ID de cuenta. Puede agregar los elementos de formulario estándar como campos de texto, menús desplegables, botones de opción y casillas de verificación.
5. Haga clic en Agregar campo y seleccione Entrada de texto . Reemplace el nombre predeterminado (por ejemplo, "text1" ) con "accountId" . En la vista previa de la plantilla , haga clic en Actualizar .
El campo tendrá un selector de variable familiar ( 
El siguiente paso es agregar una etiqueta al campo:
6. Haga clic en el icono de expansión ( 
Una etiqueta de texto titulada " ID de cuenta " debería aparecer sobre el campo.
7. Haga clic en la pestaña Código e ingrese JavaScript en espacio aislado 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 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 extremo de URL fijo que registra datos analíticos 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 cuándo la etiqueta ha completado o fallado en su tarea, y luego Google Tag Manager los usa para funciones como la secuenciación de etiquetas o el modo de vista previa .
8. Haga clic en Guardar para guardar su progreso. Esto cargará todos los permisos detectados en el Editor de plantillas.
Algunas API de plantilla tienen permisos asociados que dictan lo que pueden o no hacer. Cuando usa una API de plantilla como sendPixel en su código, Tag Manager mostrará los permisos relevantes en la pestaña Permisos .
9. Haga clic en Permisos para refinar los dominios a los que sendPixel puede enviar datos. Para la entrada Enviar píxeles , haga clic en el icono de expansión ( https://endpoint.example.com/ en Patrones de coincidencia de URL permitidos .
Cuando una plantilla de etiqueta está configurada para enviar datos, debe especificar un patrón de coincidencia de URL permitido en el permiso asociado para restringir a dónde se pueden enviar los datos. Si la URL especificada en su código no coincide con un patrón de coincidencia de URL permitido, la llamada sendPixel fallará.
Un patrón de coincidencia de URL debe usar HTTPS y especificar patrones tanto de host como 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 constar de al menos un " / ". Utilice un asterisco ( * ) como comodín para indicar un subdominio o un patrón de ruta de cualquier longitud (por ejemplo, " https://\*.example.com/test/ "). El asterisco es un carácter comodín que capturará los distintos patrones posibles, por ejemplo, " \*.example.com/ " coincidirá con www.example.com , shop.example.com , blog.example.com , etc. El asterisco debe ser escapado con un carácter de barra invertida: " \* ". Una URL sin caracteres adicionales (por ejemplo, " https://example.com/ ") se trata como si terminara en un comodín (es decir, equivalente a " https://example.com/\* ").
Especifique patrones de coincidencia de URL adicionales en líneas separadas.
10. Haga clic en Ejecutar código y busque en la ventana de la Consola cualquier problema.
Cualquier error detectado aparecerá en la ventana Consola .
11. Haga clic en Guardar y cierre el Editor de plantillas.
La plantilla de etiqueta ahora debería estar lista para usar.
Usa tu nueva etiqueta
El proceso para crear una nueva etiqueta que use su plantilla de etiqueta personalizada recién definida es como cualquier otra etiqueta:
- En Google Tag Manager, haga clic en Etiquetas > Nuevo .
- Su nueva etiqueta aparecerá en la sección Personalizada de la ventana Nueva etiqueta . Haga clic en él para abrir la plantilla de etiqueta.
- Rellene los campos necesarios para la configuración de la plantilla de etiquetas.
- Haga clic en Activación y seleccione un activador apropiado para cuando 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 devolver un valor.
En lugar de llamar
data['gtmOnSuccess']para indicar la finalización, las variables devuelven un valor directamente.Las plantillas de variables personalizadas se utilizan en diferentes partes de la interfaz de usuario de Tag Manager.
En lugar de ir a Etiquetas > Nuevo para crear una nueva variable basada en su variable personalizada, vaya a Variables > Nuevo
Consulte crear una variable personalizada para obtener una guía completa sobre cómo crear una plantilla de variable personalizada.
Exportar e importar
Para compartir una plantilla personalizada con su organización, puede exportar la plantilla personalizada e 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. Esto abrirá la plantilla en el Editor de plantillas.
- Haga clic en el menú Más acciones ( more_vert ) y seleccione Exportar .
Para importar una plantilla:
- En Tag Manager, haga clic en Plantillas .
- Haga clic en Nuevo . Esto abrirá una plantilla en blanco en el Editor de plantillas.
- Haga clic en el menú Más acciones ( more_vert ) y seleccione Importar .
- Seleccione el archivo
.tplque desea importar.