Ce guide vous explique comment créer un modèle de variable personnalisée. Lorsque cette variable est utilisée, elle prend un tableau de valeurs et les renvoie sous forme de chaîne délimitée par des virgules.
Pour commencer votre premier modèle de variable, cliquez sur "Modèles" dans le panneau de navigation de gauche, puis sur le bouton Nouveau dans la section Modèles de variable.
Dans l'onglet Infos, définissez le nom et la description de la variable.
Le nom est présenté aux utilisateurs lorsqu'ils implémentent cette variable dans l'interface utilisateur de Tag Manager.
Description : il s'agit d'une brève description de ce que cette variable fait (200 caractères maximum).
Cliquez sur Actualiser pour prévisualiser votre modèle.
Une fenêtre Aperçu du modèle s'affiche à droite des entrées du champ. Chaque fois qu'une modification est apportée dans l'éditeur, le bouton Actualiser apparaît. Cliquez sur "Actualiser" pour voir ce que vos modifications apportent à l'apparence de votre variable.
Cliquez sur Champs pour ajouter des champs à votre modèle de variable.
L'onglet Champs de l'éditeur de modèles vous permet de créer et de modifier des champs dans le modèle de variable. Les champs permettent de saisir des données personnalisées, par exemple un ID de compte. Vous pouvez ajouter des éléments de formulaire standards tels que des champs de texte, des menus déroulants, des cases d'option et des cases à cocher.
Cliquez sur Ajouter un champ, puis sélectionnez Tableau simple. Remplacez le nom par défaut (par exemple, "simpleTable1") par "list". Dans Preview du modèle, cliquez sur Actualiser.
Répétez cette étape pour une saisie de texte et appelez-la "array", deux checkbox appelées "use_array" et "sort", et une Text Input nommée "delimiter". Pour "delimiter", attribuez-lui la valeur par défaut "," en cliquant sur l'icône en forme de roue dentée, en activant "Default value" (Valeur par défaut), puis en remplissant le nouveau champ de saisie "Default Value" (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 convient de souligner quelques points.
data
.L'accès à certains champs depuis le global
data
est limité.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
etdata.delimiter
.delimiter
est défini sur une valeur par défaut de","
sidata.delimiter
n'est pas fourni. Il est recommandé de définir des valeurs par défaut pour un champ si celui-ci est pertinent. Cela facilite l'utilisation du modèle de variable, car les utilisateurs n'ont pas besoin de remplir tous les champs pour utiliser la variable.
Cliquez sur Enregistrer pour enregistrer votre progression. Toutes les autorisations détectées sont alors chargées dans l'éditeur de modèles.
Certaines API de modèle sont associées à des autorisations qui déterminent ce qu'elles peuvent ou ne peuvent pas faire. Lorsque vous utilisez une API de modèle telle que
sendPixel
dans votre code, Tag Manager affiche les autorisations pertinentes dans l'onglet Autorisations.Dans l'onglet Aperçu du modèle, ajoutez des valeurs pour l'entrée "values", cliquez sur Exécuter le code et consultez la console pour afficher le résultat de votre variable.
Si des erreurs sont détectées, 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 à être utilisé.