Cómo crear una variable personalizada

En esta guía, se explica cómo crear una plantilla de variable personalizada. Cuando se usa esta variable, toma un arreglo de valores y los muestra como una string delimitada por comas.

1. Para comenzar tu primera plantilla de variable, haz clic en Plantillas en la barra de navegación izquierda y, luego, en el botón New en la sección Variable Templates.

2. En la pestaña Info (Información), define el Name (Nombre) y la Description (Descripción) de la variable.

   Nombre es el nombre que se mostrará a los usuarios cuando implementen esta variable en 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 variable.

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. Haz clic en Actualizar para ver cómo afectan la apariencia de la variable.

4. Haz clic en Campos para agregar campos a tu plantilla de variable.

   La pestaña Campos del Editor de plantillas te permite crear y editar campos en la plantilla variable. Los campos se usan para ingresar datos personalizados, como el ID de la 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. Haga clic en Agregar campo y seleccione Tabla simple. Reemplaza el nombre predeterminado (p.ej., "simpleTable1") por "list". En Plantilla de vista previa, haz clic en Actualizar.

   Repite este paso para una entrada de texto y llámalo "array", dos casillas de verificación llamadas "use_array" y "sort", y una entrada de texto llamada "delimiter". En el caso de "delimiter", asígnale un valor predeterminado de "," haciendo clic en el ícono de ajustes, activando "Default value" y, luego, completa el nuevo campo de entrada Valor predeterminado.

6. Haz clic en la pestaña Code y, luego, ingresa JavaScript de zona de pruebas en el editor:

   var input = data.array;
   
   if (!data.use_array) {
     input = [];
     for (var i = 0; i < data.list.length; i++) {
       input.push(data.list[i].values);
     }
   }
   
   if (data.sort) {
     input.sort();
   }
   
   return input.join(data.delimiter || ',');
   

   El código de esta variable es bastante sencillo, pero vale la pena mencionar algunos aspectos.

   • data.

     Se accede a algunos campos fuera del data global. data contendrá los valores que configuraste en el paso anterior. Es por eso que podemos acceder a data.use_array, data.sort, data.list y data.delimiter.

   • delimiter se establece en un valor predeterminado de "," si no se proporciona data.delimiter. Se recomienda establecer valores predeterminados para un campo si tiene sentido. Esto facilita que los usuarios usen la plantilla de variable, ya que no tienen que llenar todos los campos para poder usar la variable.

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

8. En la pestaña Vista previa de la plantilla, agrega algunos valores para la entrada "valores", haz clic en Ejecutar código y observa Console a fin de ver el resultado de tu variable.

   Si hay algún error, aparecerán en la ventana Console.

9. Haga clic en Guardar y cierre el Editor de plantillas.

   La plantilla de la variable ya debería estar lista para usar.