Creare una variabile personalizzata
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Questa guida illustra come creare un modello di variabile personalizzata. Quando
questa variabile viene utilizzata, prenderà un array di valori e li restituirà come
stringa delimitata da virgole.
Per iniziare il tuo primo modello di variabile, fai clic su Modelli nella parte sinistra
e fai clic sul pulsante Nuovo sotto Modelli di variabili
.
Nella scheda Informazioni, definisci il Nome e la Descrizione della variabile.
Il nome è quello che verrà mostrato agli utenti quando implementano questa funzionalità
nell'interfaccia utente di Tag Manager.
Descrizione: è esattamente quello che dice il suo nome: una breve (200 caratteri o
meno) descrizione di ciò che fa questa variabile.
Fai clic su Aggiorna per visualizzare l'anteprima del modello.
A destra degli input dei campi, c'è una finestra Anteprima modello.
Ogni volta che viene apportata una modifica all'editor, il pulsante Aggiorna
vengono visualizzate. Fai clic su Aggiorna per verificare l'aspetto del tuo
.
Fai clic su Campi per aggiungere campi al modello di variabile.
La scheda Campi dell'editor di modelli consente di creare e modificare i campi nella
modello di variabile personalizzata. I campi vengono utilizzati per inserire dati personalizzati, ad esempio un account
ID. Puoi aggiungere elementi standard al modulo come campi di testo, menu a discesa
menu, pulsanti di opzione e caselle di controllo.
Fai clic su Aggiungi campo e seleziona Tabella semplice. Sostituisci il nome predefinito (ad es.
"simpleTable1") con "list". In Anteprima modello, fai clic su Aggiorna.
Ripeti questo passaggio per un input di testo e denominalo "array", due caselle di controllo
chiamato "use_array" e "sort", oltre a un Input di testo chiamato " delimitatore".
Per " delimitatore", assegna il valore predefinito "," facendo clic sull'icona a forma di ingranaggio
attivare "Default value" (Valore predefinito) e inserire il nuovo valore predefinito
campo di immissione.
Fai clic sulla scheda Codice e inserisci il codice JavaScript con sandbox nell'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 || ',');
Il codice per questa variabile è abbastanza chiaro, ma esistono alcune
vale la pena sottolineare.
data campi.
Alcuni campi sono a cui si accede al di fuori del data globale.
data conterrà i valori che hai configurato nel passaggio precedente.
Ecco perché possiamo accedere a data.use_array, data.sort,
data.list e data.delimiter.
delimiter è impostato sul valore predefinito di "," se data.delimiter è
non specificato. È buona norma impostare valori predefiniti per un campo se
uno ha senso. In questo modo, gli utenti possono utilizzare più facilmente la variabile
perché non è necessario compilare tutti i campi per poter utilizzare
la variabile.
Fai clic su Salva per salvare i tuoi progressi. Verranno caricate le autorizzazioni rilevate
nell'editor dei modelli.
Alcune API Template sono associate ad autorizzazioni che determinano quali
che possono o non possono fare. Quando utilizzi un'API del modello come sendPixel in
il tuo codice, Tag Manager mostrerà le autorizzazioni pertinenti nella sezione Autorizzazioni
.
Nella scheda Anteprima modello, aggiungi alcuni valori per i "valori" input, fare clic
Esegui codice e apri la console per vedere l'output della variabile.
Gli eventuali errori verranno visualizzati nella finestra della console.
Fai clic su Salva e chiudi l'editor dei modelli
Il modello di variabile dovrebbe essere pronto per l'uso.
Salvo quando diversamente specificato, i contenuti di questa pagina sono concessi in base alla licenza Creative Commons Attribution 4.0, mentre gli esempi di codice sono concessi in base alla licenza Apache 2.0. Per ulteriori dettagli, consulta le norme del sito di Google Developers. Java è un marchio registrato di Oracle e/o delle sue consociate.
Ultimo aggiornamento 2025-07-25 UTC.
[null,null,["Ultimo aggiornamento 2025-07-25 UTC."],[[["\u003cp\u003eThis guide provides step-by-step instructions to create a custom variable template in Google Tag Manager.\u003c/p\u003e\n"],["\u003cp\u003eThis template transforms an array of values into a comma-separated string using JavaScript code within the template.\u003c/p\u003e\n"],["\u003cp\u003eThe template utilizes fields like 'list', 'array', 'use_array', 'sort', and 'delimiter' to customize its functionality.\u003c/p\u003e\n"],["\u003cp\u003eUsers can preview and test the template using the 'Template Preview' and 'Console' sections within the editor.\u003c/p\u003e\n"],["\u003cp\u003eOnce saved, the custom variable template is ready to be implemented within Google Tag Manager.\u003c/p\u003e\n"]]],["To create a variable template that returns a comma-delimited string from an array, start by creating a new template, defining its name and description in the *Info* tab. Then, in the *Fields* tab, add fields for a simple table (\"list\"), text input (\"array\"), checkboxes (\"use_array\", \"sort\"), and text input (\"delimiter\"). In the *Code* tab, enter sandboxed JavaScript to process these fields, joining the array with the specified delimiter, and save. Then preview the result and save the variable.\n"],null,["# Create a custom variable\n\nThis guide will walk you through how to create a custom variable template. When\nthis variable is used, it will take an array of values and return them as a\ncomma delimited string.\n\n1. To begin your first variable template, click Templates in the left\n navigation and click the *New* button under the *Variable Templates*\n section.\n\n2. In the *Info* tab, define the variable's *Name* and *Description*.\n\n **Name** is what will be presented to users when they go to implement this\n variable throughout the Tag Manager user interface.\n\n **Description** is just what it sounds like - a brief (200 characters or\n less) description of what this variable does.\n3. Click *Refresh* to preview your template.\n\n To the right of the field inputs, there is a *Template Preview* window.\n Every time a change is made in the editor, the **Refresh** button will\n appear. Click Refresh to see what your changes do to the appearance of your\n variable.\n4. Click *Fields* to add fields to your variable template.\n\n The Template Editor's **Fields** tab lets you create and edit fields in the\n variable template. Fields are used to enter custom data, such as an account\n ID. You can add the standard form elements like text fields, drop down\n menus, radio buttons, and checkboxes.\n5. Click *Add Field* and select *Simple table* . Replace the default name (e.g.\n *\"simpleTable1\"* ) with *\"list\"* . In the *Template Preview* , click *Refresh*.\n\n Repeat this step for a *Text Input* and call it *\"array\"* , two *Checkboxes*\n called \"*use_array* \" and *\"sort\"* , and a *Text Input* called *\"delimiter\"* .\n For *\"delimiter\"* , give it a default value of \",\" by clicking the gear icon,\n toggling *\"Default value\"* to on, and then filling in the new Default Value\n input field.\n6. Click the *Code* tab and enter sandboxed JavaScript in the editor:\n\n var input = data.array;\n\n if (!data.use_array) {\n input = [];\n for (var i = 0; i \u003c data.list.length; i++) {\n input.push(data.list[i].values);\n }\n }\n\n if (data.sort) {\n input.sort();\n }\n\n return input.join(data.delimiter || ',');\n\n The code for this variable is fairly straightforward, but there are a few\n things worth pointing out.\n - `data` fields.\n\n There are a few fields that are being accessed off of the `data` global.\n `data` will contain the values that you set up in the previous step.\n That's why we're able to access `data.use_array`, `data.sort`,\n `data.list`, and `data.delimiter`.\n - `delimiter` is set to a default value of `\",\"` if `data.delimiter` is\n not provided. It's a good practice to set default values for a field if\n one makes sense. This makes it easier for users to use the variable\n template, since they don't have to fill out every field in order to use\n the variable.\n\n7. Click *Save* to save your progress. This will load any detected permissions\n into the Template Editor.\n\n Some Template APIs have [permissions](/tag-platform/tag-manager/templates/permissions) associated with them that dictate what\n they can or cannot do. When you use a template API such as `sendPixel` in\n your code, Tag Manager will show relevant permissions in the **Permissions**\n tab.\n8. In the *Template Preview* tab, add some values for the \"values\" input, click\n **Run Code** , and look at the *Console* to see the output for your variable.\n\n If there are any errors, they will appear in the **Console** window.\n9. Click *Save*, and close the Template Editor\n\n The variable template should now be ready for use."]]
