Guide de démarrage rapide des modèles personnalisés

Les modèles personnalisés vous permettent d'écrire vos propres définitions de balises et de variables afin que d'autres membres de votre organisation puissent les utiliser avec les modèles de balises et de variables intégrés. La nature bac à sable des modèles personnalisés axée sur les autorisations permet d'écrire des balises et variables personnalisées de manière plus sûre et efficace que lorsque vous utilisez des balises HTML personnalisées et des variables JavaScript personnalisées.

Les modèles de balises et de variables personnalisés sont définis dans la section Modèles de Google Tag Manager. L'écran principal "Modèles" affiche tous les modèles de balises ou de variables qui ont déjà été définis dans votre conteneur. Vous pouvez également créer des modèles à partir de cet écran.

Vous pouvez exporter un modèle et le partager avec d'autres membres de votre organisation. Vous pouvez en développer dans la galerie de modèles de la communauté pour une distribution plus large.

Éditeur de modèles

L'éditeur de modèles vous permet de créer, de prévisualiser et de tester des modèles personnalisés. Il comporte quatre zones principales pour vous aider à définir votre modèle de tag:

  • Info : définissez les propriétés de base du modèle, telles que le nom et l'icône de la balise ou de la variable.
  • Champs : cet éditeur visuel permet d'ajouter des champs de saisie à votre modèle de balise.
  • Code : saisissez du code JavaScript de bac à sable pour définir le comportement de votre balise ou variable.
  • Autorisations : affichez et définissez les limites des actions autorisées par votre balise ou variable.

Créer votre premier modèle de balise personnalisée

Cet exemple vous explique comment créer un tag de pixel de l'exemple de base. Lorsque cette balise est déclenchée sur une page Web, elle envoie un appel avec les informations de compte correctes aux serveurs du fournisseur de la balise.

1. Pour commencer votre premier modèle, cliquez sur "Modèles" dans le panneau de navigation de gauche, puis sur le bouton Nouveau dans la section Modèles de balise.

2. Cliquez sur Informations, puis définissez le nom (obligatoire), la description et l'icône de la balise.

Le nom est celui que les utilisateurs verront lorsqu'ils implémenteront cette balise dans l'interface utilisateur Tag Manager.

La description est une courte description (de 200 caractères maximum) de cette balise.

Icon vous permet de choisir une image à afficher lorsque le tag s'affiche dans les listes compatibles avec la propriété d'icône. Les images d'icônes doivent être des fichiers PNG, JPEG ou GIF carrés, d'une taille maximale de 50 Ko et d'au moins 64 x 64 px.

3. 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 effectuée dans l'éditeur, le bouton Actualiser s'affiche. Cliquez sur "Actualiser" pour vérifier l'impact de vos modifications sur l'apparence de votre balise.

4. Cliquez sur Champs pour ajouter des champs à votre modèle de balise.

L'onglet Champs de l'éditeur de modèles vous permet de créer et de modifier des champs dans le modèle de tag. 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.

5. Cliquez sur Ajouter un champ, puis sélectionnez Saisie de texte. Remplacez le nom par défaut (par exemple, "text1") par "accountId". Dans l'aperçu du modèle, cliquez sur Actualiser.

Une icône de sélecteur de variable familière (icône du sélecteur de variable) s'affiche à côté du champ. Les utilisateurs de ce modèle peuvent cliquer sur l'icône de sélecteur de variable pour choisir des variables actives dans ce conteneur.

L'étape suivante consiste à ajouter un libellé au champ:

6. Cliquez sur l'icône Développer (icône développer) à côté du champ de texte pour ouvrir d'autres options pour ce champ. Saisissez ID de compte dans le champ Nom à afficher. Dans Aperçu du modèle, cliquez sur Actualiser.

Un libellé intitulé ID de compte doit s'afficher au-dessus du champ.

7. Cliquez sur l'onglet Code et saisissez le code JavaScript de bac à sable dans l'éditeur:

// 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 première ligne de code, const sendPixel = require('sendPixel'), importe l'API sendPixel.

La deuxième ligne de code, const encodeUriComponent = require('encodeUriComponent'), importe l'API encodeUriComponent.

La ligne suivante, const account = data.accountId;, obtient la valeur de accountId créée à l'étape 5 et la stocke dans une constante appelée account.

La troisième ligne de code, const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);, définit une constante url qui concatène un point de terminaison d'URL fixe qui consigne les données d'analyse et l'ID de compte encodé avec lequel la balise a été configurée.

La dernière ligne, sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure), exécute la fonction sendPixel() avec les paramètres requis et envoie une requête à l'URL spécifiée. Les valeurs data.gtmOnSuccess et data.gtmOnFailure indiquent à Google Tag Manager quand la balise a terminé ou échoué sa tâche. Elles sont ensuite utilisées par Google Tag Manager pour des fonctionnalités telles que le séquençage des balises ou le mode Aperçu.

8. 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èle sont associées à des autorisations qui déterminent ce qu'elles peuvent faire ou non. Lorsque vous utilisez un modèle d'API tel que sendPixel dans votre code, Tag Manager affiche les autorisations pertinentes dans l'onglet Autorisations.

9. Cliquez sur Autorisations pour affiner les domaines auxquels sendPixel est autorisé à envoyer des données. Pour l'entrée Envoyer des pixels, cliquez sur l'icône de développement (icône développer) et saisissez https://endpoint.example.com/ dans Formats de correspondance d'URL autorisés.

Lorsqu'un modèle de tag est configuré pour envoyer des données, vous devez spécifier un modèle de correspondance d'URL autorisé sous l'autorisation associée afin de limiter les emplacements où les données peuvent être envoyées. Si l'URL spécifiée dans votre code ne correspond pas à un format de correspondance d'URL autorisé, l'appel sendPixel échouera.

Un format de correspondance d'URL doit utiliser HTTPS, et spécifier des formats d'hôte et de chemin d'accès. Il peut s'agir d'un domaine (par exemple, "https://example.com/") ou d'un sous-domaine spécifique (par exemple, "https://sub.example.com/"). Le chemin doit être constitué d'au moins un "/". Utilisez un astérisque (*) comme caractère générique pour indiquer un sous-domaine ou un format de chemin de n'importe quelle longueur (par exemple, "https://\*.example.com/test/"). L'astérisque est un caractère générique permettant d'intercepter les différents formats possibles : shop.example.com, blog.example.com, etc. ;https://example.com/\*.example.com/www.example.com\*https://example.com/\*

Spécifiez des formats de correspondance d'URL supplémentaires sur des lignes distinctes.

10. Cliquez sur Exécuter le code et recherchez d'éventuels problèmes dans la fenêtre Console.

Toute erreur détectée s'affiche dans la fenêtre Console.

11. Cliquez sur Save (Enregistrer) et fermez l'éditeur de modèles.

Le modèle de tag devrait maintenant être prêt à être utilisé.

Utiliser votre nouvelle balise

Le processus de création d'une balise utilisant le modèle de balise personnalisée que vous venez de définir est semblable à n'importe quelle autre balise:

  1. Dans Google Tag Manager, cliquez sur Balises > Nouvelle.
  2. Votre nouvelle balise apparaîtra dans la section Personnalisée de la fenêtre Nouvelle balise. Cliquez dessus pour ouvrir le modèle de tag.
  3. Remplissez les champs nécessaires pour configurer le modèle de balise.
  4. Cliquez sur Déclenchement et sélectionnez un déclencheur approprié pour le déclenchement de la balise.
  5. Enregistrez la balise et publiez votre conteneur.

Créer votre premier modèle de variable personnalisée

Les modèles de variables personnalisées sont semblables aux modèles de balises, avec quelques différences notables:

  • Les modèles de variables personnalisées doivent renvoyer une valeur.

    Au lieu d'appeler data['gtmOnSuccess'] pour indiquer l'achèvement, les variables renvoient directement une valeur.

  • Les modèles de variables personnalisées sont utilisés dans différentes parties de l'interface utilisateur de Tag Manager.

  • Au lieu d'accéder à Balises > Nouveau pour créer une variable basée sur votre variable personnalisée, sélectionnez Variables > Nouveau.

Consultez la section Créer une variable personnalisée pour accéder à un guide complet sur la création d'un modèle de variable personnalisée.

Exporter et importer

Pour partager un modèle personnalisé avec votre entreprise, vous pouvez l'exporter et l'importer dans d'autres conteneurs Tag Manager. Pour exporter un modèle:

  1. Dans Tag Manager, cliquez sur Modèles.
  2. Dans la liste, cliquez sur le nom du modèle que vous souhaitez exporter. Le modèle s'ouvre dans l'éditeur de modèles.
  3. Cliquez sur le menu "Autres actions" (), puis sélectionnez Exporter.

Pour importer un modèle:

  1. Dans Tag Manager, cliquez sur Modèles.
  2. Cliquez sur New (Nouveau). Un modèle vierge s'ouvre dans l'éditeur de modèles.
  3. Cliquez sur le menu "Autres actions" (), puis sélectionnez Importer.
  4. Sélectionnez le fichier .tpl que vous souhaitez importer.