Las plantillas personalizadas te permiten escribir tus propias definiciones de variables y etiquetas para para que otras personas en tu organización puedan usarlas junto con la etiqueta integrada y plantillas de variables. La naturaleza centrada en los permisos y de zona de pruebas de las plantillas personalizadas permite 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 de etiquetas y variables personalizadas se definen en la sección Plantillas de Google Tag Manager La pantalla principal de Plantillas mostrará cualquier etiqueta o variable plantillas que ya se definieron en el contenedor. También puedes crear plantillas nuevas de esta pantalla.
Puedes exportar una plantilla y compartirla con otros miembros de tu organización. se pueden desarrollar plantillas para una distribución más amplia en el Galería de plantillas de la comunidad.
El Editor de plantillas
El Editor de plantillas te permite crear plantillas personalizadas, obtener una vista previa de ellas y probarlas. Tiene cuatro áreas principales de entrada para ayudarte a definir tu plantilla de etiqueta:
- Info: define propiedades básicas de la plantilla, como la etiqueta o el nombre de la variable y el ícono.
- Campos: Es un editor visual que te permite agregar campos de entrada a tu plantilla de etiqueta.
- Código: Ingresa JavaScript de zona de pruebas para definir cómo tu etiqueta o variable. la regla de firewall.
- Permisos: Consulta y establece límites sobre tu etiqueta o variable. tiene permitido hacer.
Crea tu primera plantilla de etiqueta personalizada
En este ejemplo, se explica cómo crear una etiqueta de píxel de ejemplo básica. Cuándo esta etiqueta se activa en una página web y enviará un hit con la cuenta correcta información a los servidores del proveedor de etiquetas.
1. Para comenzar con tu primera plantilla, haz clic en Plantillas en el panel de navegación izquierdo 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 (Description) y los atributos Ícono.
El nombre es el que se les presentará a los usuarios cuando implementen esta etiqueta. en toda la interfaz de usuario de Tag Manager.
La descripción es justo lo que parece: una introducción (200 caracteres o menos). descripción de su función.
Ícono: Te permite elegir una imagen que se mostrará cuando la etiqueta se muestre en listas que admiten la propiedad del ícono. Las imágenes de los íconos deben ser formatos cuadrados PNG, JPEG o Archivos GIF que no superen los 50 kB y que midan al menos 64 px por 64 px.
3. Haz clic en Actualizar para obtener una vista previa de tu plantilla.
A la derecha de las entradas del campo, hay la ventana Template Preview. Cada cada vez que se realice un cambio en el editor, aparecerá el botón Actualizar. Haz clic en Actualice la página para ver qué efecto tienen sus cambios en el aspecto de su etiqueta.
4. Haz clic en Campos para agregar campos a tu plantilla de etiqueta.
La pestaña Campos del Editor de plantillas te permite crear y editar campos en la etiqueta plantilla. Los campos se utilizan para ingresar datos personalizados, como un ID de cuenta. Puedes agregar los elementos estándares 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") con "accountId". En Vista previa de la plantilla, haz clic en Actualizar.
El campo tendrá un ícono de selector de variables conocidas (
El siguiente paso es agregar una etiqueta al campo:
6. Haz clic en el ícono de expandir (
Una etiqueta de texto con el título "ID de la cuenta" debe aparecer 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 el
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.
creada en el paso 5, y la 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
de Google Analytics y el ID de la cuenta codificado con el que se ha
configurado.
La última línea, sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure), ejecuta el
función sendPixel() con los parámetros obligatorios y realiza una solicitud al
la URL especificada. Los valores data.gtmOnSuccess y data.gtmOnFailure indican
Google Tag Manager cuando la etiqueta completa o falla su tarea, y luego
utilizado por Google Tag Manager para funciones como la secuenciación de etiquetas o
modo de vista previa.
8. Haz clic en Guardar para guardar el progreso. Se cargarán los permisos detectados en el Editor de plantillas.
Algunas APIs de plantillas tienen permisos asociados que determinan qué
pueden o no pueden hacer. Cuando usas una API de plantilla, 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 qué dominios puede enviar sendPixel
a la que se envían los datos. En la entrada Enviar píxeles, haz clic en el ícono de 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 valor
Patrón de coincidencia de URL según el permiso asociado para restringir dónde pueden
a la que se enviará el mensaje. Si la URL especificada en tu código no coincide con una URL permitida
de coincidencia con el patrón, la llamada a sendPixel fallará.
Un patrón de coincidencia de URL debe usar HTTPS y especificar patrones de host y de ruta de acceso. El
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 duración (por ejemplo, "https://\*.example.com/test/"). El asterisco es un comodín
que captará los diversos patrones posibles, p.ej.,
“\*.example.com/” coincidirá con www.example.com, shop.example.com,
blog.example.com, etc. El asterisco debe escaparse con una barra inversa.
carácter: "\*". Una URL sin caracteres adicionales (p.ej.,
“https://example.com/”) se trata como la terminación en un comodín (es decir, equivalente a
“https://example.com/\*”.
Especifica patrones de coincidencia de URL adicionales en líneas separadas.
10. Haz clic en Run Code y observa la ventana de la consola para ver si hay algún problema.
Los errores detectados aparecerán en la ventana de Console.
11. Haz clic en Guardar y cierra el Editor de plantillas.
La plantilla de la etiqueta ya debería estar lista para usarse.
Usa tu etiqueta nueva
El proceso de creación de una etiqueta nueva que utiliza tu plantilla de etiqueta personalizada recién definida es como cualquier otra etiqueta:
- En Google Tag Manager, haz clic en Etiquetas > Nuevo.
- Tu nueva etiqueta aparecerá en la sección Personalizada de la ventana Etiqueta nueva. Haz clic en él para abrir la plantilla de etiqueta.
- Completa los campos necesarios para la configuración de la plantilla de etiqueta.
- Haz clic en Activación (Triggering) y selecciona un activador adecuado para cuando aparezca la etiqueta. debería activarse.
- Guarda la etiqueta y publica tu contenedor.
Crea tu primera plantilla de variable personalizada
Las plantillas de variables personalizadas son similares a las de etiquetas, diferencias:
Las plantillas de variables personalizadas deben mostrar un valor.
En lugar de llamar a
data['gtmOnSuccess']para indicar la finalización, las variables devuelve un valor directamente.Las plantillas de variables personalizadas se usan en diferentes partes de Tag Manager de la IU de Google.
En lugar de ir a Etiquetas > Nuevo para crear una nueva variable basada en tu variable personalizada, ve a Variables > Nuevo
Consulte cómo crear una variable personalizada para obtener una guía completa sobre cómo crear una variable personalizada. plantilla.
Importa y exporta
Para compartir una plantilla personalizada con tu organización, puedes exportar la plantilla y, luego, importarla a otros contenedores de Tag Manager. Para exportar una plantilla, sigue estos pasos:
- En Tag Manager, haz clic en Plantillas.
- En la lista, haz clic en el nombre de la plantilla que deseas exportar. Si confirmas esta acción, abre la plantilla en el Editor de plantillas.
- Haz clic en el menú Más acciones (more_vert) y Selecciona Exportar.
Para importar una plantilla, sigue estos pasos:
- En Tag Manager, haz clic en Plantillas.
- Haz clic en Nuevo. 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.