Créer une variable personnalisée
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Ce guide vous explique comment créer un modèle de variable personnalisée. Quand ?
cette variable est utilisée, elle utilise un tableau de valeurs et les renvoie sous forme
délimitée par des virgules.
Pour commencer votre premier modèle de variable, cliquez sur "Modèles" à gauche.
et cliquez sur le bouton Nouveau sous Modèles de variable.
.
Dans l'onglet Informations, définissez le nom et la description de la variable.
Le nom est le nom qui sera présenté aux utilisateurs lorsqu'ils effectueront l'implémentation
dans l'interface utilisateur de Tag Manager.
Comme son nom l'indique, la description est brève (200 caractères ou
less) description de cette variable.
Cliquez sur Refresh (Actualiser) pour prévisualiser votre modèle.
À droite des entrées du champ, une fenêtre Template Preview (Aperçu du modèle) s'affiche.
Chaque fois qu'une modification est apportée dans l'éditeur, le bouton Actualiser
s'affichent. Cliquez sur "Actualiser" pour voir l'effet des modifications
.
Cliquez sur Champs pour ajouter des champs à votre modèle de variable.
Dans l'onglet Champs de l'éditeur de modèles, vous pouvez créer et modifier des champs dans le
modèle de variable. Les champs sont utilisés pour saisir des données personnalisées, telles qu'un compte
ID. Vous pouvez ajouter des éléments de formulaire standards, tels que des champs de texte, des menus déroulants,
des menus, des cases d'option et des cases à cocher.
Cliquez sur Ajouter un champ et sélectionnez Table simple. Remplacez le nom par défaut (par exemple,
"simpleTable1") par "list". Dans Aperçu du modèle, cliquez sur Actualiser.
Répétez cette étape pour une saisie de texte et appelez-la "array", et deux cases à cocher.
appelé "use_array" et "sort", et un texte d'entrée appelé "délimiteur".
Attribuez la valeur par défaut "," au champ "délimiteur". en cliquant sur l'icône en forme de roue dentée,
Activez Valeur par défaut et renseignez la nouvelle valeur par défaut.
.
Cliquez sur l'onglet Code et saisissez le code JavaScript de bac à sable dans l'éditeur:
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 || ',');
Le code de cette variable est assez simple, mais il existe quelques
choses qui méritent d’être soulignées.
data.
Certains champs sont accessibles en dehors du data global.
data contiendra les valeurs que vous avez configurées à l'étape précédente.
C'est pourquoi nous pouvons accéder à data.use_array, data.sort,
data.list et data.delimiter.
delimiter est défini sur la valeur par défaut "," si data.delimiter est défini sur
non fourni. Il est recommandé de définir des valeurs par défaut pour un champ si
l'une est logique. Cela permet aux utilisateurs d'utiliser plus facilement la variable
modèle, car ils n'ont pas besoin de remplir tous les champs pour pouvoir utiliser
la variable.
Cliquez sur Enregistrer pour enregistrer votre progression. Toutes les autorisations détectées seront chargées
dans l'éditeur de modèles.
Certaines API de modèles sont associées à des autorisations qui déterminent ce que
ce qu'ils peuvent ou ne peuvent pas faire. Lorsque vous utilisez un modèle d'API comme sendPixel dans
votre code, Tag Manager affiche les autorisations pertinentes dans la section Autorisations
.
Dans l'onglet Aperçu du modèle, ajoutez des valeurs pour le champ "valeurs". saisie, cliquez sur
Exécutez le code, puis consultez la console pour voir le résultat de votre variable.
Si des erreurs se sont produites, elles s'affichent dans la fenêtre Console.
Cliquez sur Enregistrer, puis fermez l'éditeur de modèles.
Le modèle de variable doit maintenant être prêt à l'emploi.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/25 (UTC).
[null,null,["Dernière mise à jour le 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."]]
