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 en plus des modèles de balises et de variables intégrés. La nature en bac à sable et axée sur les autorisations des modèles personnalisés permet d'écrire des balises et variables personnalisées de manière plus sûre et efficace que si vous utilisiez 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" répertorie tous les modèles de balises ou de variables déjà 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 développer des modèles pour une distribution plus large dans la galerie de modèles de la communauté.

É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. Elle comporte quatre sections principales qui vous aideront à définir votre modèle de tag:

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

Créer votre premier modèle de tag personnalisé

Cet exemple vous montre comment créer un exemple de tag de pixel 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 balises.

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

2. Cliquez sur Infos et définissez le nom (obligatoire), le description et l'icône du tag.

Le nom est celui qui sera présenté aux utilisateurs lorsqu'ils implémenteront cette balise dans l'interface utilisateur de Tag Manager.

Description : brève description de ce tag (200 caractères maximum).

L'icône vous permet de choisir une image qui s'affiche lorsque le tag est affiché dans des listes qui acceptent la propriété d'icône. Les images d'icône doivent être des fichiers PNG, JPEG ou GIF carrés d'une taille inférieure ou égale à 50 Ko et d'au moins 64 x 64 pixels.

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 apportée dans l'éditeur, le bouton Actualiser apparaît. Cliquez sur "Actualiser" pour voir les modifications apportées à l'apparence de votre tag.

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

L'onglet Champs de l'éditeur de modèle 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, telles qu'un numéro 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 Template Preview (Aperçu du modèle), cliquez sur Refresh (Actualiser).

Une icône de sélecteur de variable (icône de 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 les 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. Saisissez ID de compte dans le champ Nom à afficher. Dans Preview du modèle, cliquez sur Actualiser.

Le libellé Numéro 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;, récupère 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 à quel moment la balise est terminée ou a échoué. 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 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.

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 format de correspondance d'URL autorisé sous l'autorisation associée afin de limiter l'endroit 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 échoue.

Un format de correspondance d'URL doit utiliser le protocole HTTPS, et spécifier des formats d'hôte et de chemin d'accès. L'hôte peut être un domaine (par exemple, "https://example.com/") ou un sous-domaine spécifique (par exemple, "https://sub.example.com/"). Le chemin doit être composé d'au moins un /. Utilisez un astérisque (*) comme caractère générique pour indiquer un sous-domaine ou un schéma de chemin d'accès de n'importe quelle longueur (https://\*.example.com/test/). L'astérisque est un caractère générique qui accepte les différents modèles possibles :

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

10. Cliquez sur Run Code (Exécuter le code) et recherchez les éventuels problèmes dans la fenêtre Console.

Toutes les erreurs détectées apparaissent dans la fenêtre Console.

11. Cliquez sur Enregistrer, puis fermez l'éditeur de modèles.

Le modèle de tag doit maintenant être prêt.

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 à celui de toutes les autres balises:

  1. Dans Google Tag Manager, cliquez sur Balises > Nouveau.
  2. Votre nouveau tag apparaît dans la section Personnalisé de la fenêtre Nouveau tag. Cliquez dessus pour ouvrir le modèle de tag.
  3. Renseignez les champs nécessaires à la configuration du modèle de tag.
  4. Cliquez sur Déclenchement et sélectionnez le 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, à quelques différences notables:

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

    Au lieu d'appeler data['gtmOnSuccess'] pour indiquer la fin, 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, vous devez accéder à Variables > Nouvelle.

Pour découvrir comment créer un modèle de variable personnalisée, consultez l'article Créer une variable personnalisée.

Exporter et importer

Pour partager un modèle personnalisé avec votre organisation, 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 alors dans l'éditeur de modèles.
  3. Cliquez sur le menu Plus d'actions () et 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 alors dans l'éditeur de modèles.
  3. Cliquez sur le menu Plus d'actions () et sélectionnez Importer.
  4. Sélectionnez le fichier .tpl que vous souhaitez importer.