Les modèles personnalisés vous permettent d'écrire vos propres définitions de balises et de variables. que d'autres membres de votre entreprise puissent les utiliser en plus de la balise intégrée modèles de variable. La nature centrée sur les autorisations et dans le bac à sable des modèles personnalisés permet d'écrire des balises et des variables personnalisées de manière plus 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 toutes les balises ou variables déjà définis dans votre conteneur. Vous pouvez également créer de nouveaux modèles sur cet écran.
Vous pouvez exporter un modèle et le partager avec d'autres membres de votre organisation. des modèles peuvent être développés pour être diffusés à plus grande échelle dans le 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. Il comporte quatre zones principales qui vous aideront à définir votre modèle de tag:
- Informations : permet de définir les propriétés de base du modèle, telles que la balise ou le nom et l'icône de la variable.
- Champs : éditeur visuel qui permet d'ajouter des champs de saisie à votre modèle de balise.
- Code : saisissez du code JavaScript exécuté en bac à sable pour définir la manière dont votre tag ou votre variable doit se comporter.
- Autorisations : affichez et définissez des limites concernant votre balise ou votre variable. que vous êtes autorisé à faire.
Créer votre premier modèle de tag personnalisé
Cet exemple vous explique comment créer un exemple de tag de pixel de base. Quand ? cette balise est déclenchée sur une page Web, elle envoie un appel avec le compte approprié aux serveurs du fournisseur de tags.
1. Pour commencer votre premier modèle, cliquez sur "Modèles" dans le panneau de navigation de gauche, Cliquez sur le bouton Nouveau sous la section Modèles de tag.
2. Cliquez sur Informations, puis définissez le nom (obligatoire), la description de la balise et Icône.
Le nom est le nom présenté aux utilisateurs lorsqu'ils vont implémenter cette balise. dans l'interface utilisateur de Tag Manager.
Comme son nom l'indique, la description est brève (200 caractères maximum). de cette balise.
Icône : permet de choisir l'image qui s'affichera lorsque le tag sera affiché dans qui prennent en charge la propriété "icon". Les images de l'icône doivent être au format carré PNG, JPEG ou Fichiers GIF ne dépassant pas 50 Ko et d'au moins 64 x 64 pixels.
3. 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. Toutes les Chaque fois qu'une modification est apportée dans l'éditeur, le bouton Actualiser s'affiche. Cliquez sur Actualisez la page pour voir l'impact de vos modifications sur l'apparence de votre tag.
4. Cliquez sur Champs pour ajouter des champs à votre modèle de tag.
Dans l'onglet Champs de l'éditeur de modèles, vous pouvez créer et modifier des champs dans le tag. modèle. Les champs permettent de saisir des données personnalisées, telles qu'un ID de compte. Vous pouvez ajouter les éléments de formulaire standard tels que des champs de texte, des menus déroulants, des cases d'option, et cases à cocher.
5. Cliquez sur Ajouter un champ et sélectionnez Saisie de texte. Remplacez le nom par défaut (par exemple, "text1") par "accountId". Dans Aperçu du modèle, cliquez sur Actualiser.
Le champ sera associé à l'icône de sélecteur de variable (
L'étape suivante consiste à ajouter un libellé au champ:
6. Cliquez sur l'icône Développer (
Un libellé intitulé Account ID doit s'afficher au-dessus du champ.
7. Cliquez sur l'onglet Code et saisissez le code JavaScript en 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
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éé à l'étape 5, puis le stocke dans une constante appelée account.
La troisième ligne de code,
const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);,
configure une constante url qui concatène un point de terminaison d'URL fixe qui consigne
et le numéro de compte encodé avec lequel la balise a été
configuré.
La dernière ligne, sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure), exécute le
sendPixel() avec les paramètres requis et envoie une requête au
l'URL spécifiée. Les valeurs data.gtmOnSuccess et data.gtmOnFailure indiquent
à Google Tag Manager lorsque la tâche de la balise n'est plus terminée ou a échoué, et que
utilisé par Google Tag Manager pour des fonctionnalités telles que le séquençage des balises ou
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è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
les autorisations pertinentes s'affichent dans l'onglet Autorisations.
9. Cliquez sur Autorisations pour préciser quels domaines sendPixel est autorisé à envoyer
les données. Dans l'entrée Envoyer des pixels, cliquez sur l'icône Développer (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 le paramètre Autorisé
Format de correspondance d'URL sous l'autorisation associée afin de limiter les endroits où les données peuvent
doit être envoyé. Si l'URL spécifiée dans votre code ne correspond pas à une URL autorisée
de correspondance, l'appel sendPixel échouera.
Un modèle de correspondance d'URL doit utiliser HTTPS, et spécifier des formats d'hôte et de chemin d'accès. La
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 d'accès doit comporter au moins "/".
Utilisez un astérisque (*) comme caractère générique pour indiquer un modèle de sous-domaine ou de chemin
n'importe quelle longueur (par exemple, "https://\*.example.com/test/"). L'astérisque est un caractère générique
qui détectera les différents motifs possibles, par exemple
\*.example.com/ correspondra à www.example.com, shop.example.com,
blog.example.com, etc. L'astérisque doit être échappé à l'aide d'une barre oblique inverse.
"\*". Une URL sans caractères supplémentaires (par exemple,
"https://example.com/") est considéré comme se terminant par un caractère générique (équivalent à
"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.
Les erreurs détectées s'affichent dans la fenêtre Console.
11. Cliquez sur Save (Enregistrer), puis fermez l'éditeur de modèles.
Le modèle de tag doit maintenant être prêt à être utilisé.
Utiliser votre nouvelle balise
Processus de création d'une balise utilisant le modèle de balise personnalisée que vous venez de définir est comme n'importe quelle autre balise:
- Dans Google Tag Manager, cliquez sur Balises > Nouveau.
- Votre nouvelle balise s'affichera dans la section Personnalisée de la fenêtre Nouvelle balise. Cliquez dessus pour ouvrir le modèle de tag.
- Remplissez les champs nécessaires pour configurer le modèle de tag.
- Cliquez sur Déclenchement et sélectionnez un déclencheur approprié lorsque la balise doit se déclencher.
- 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 balise, à quelques différences près différences:
Les modèles de variables personnalisées doivent renvoyer une valeur.
Au lieu d'appeler
data['gtmOnSuccess']pour indiquer l'achèvement, les variables renvoie directement une valeur.Les modèles de variables personnalisées sont utilisés dans différentes parties de Tag Manager UI.
Au lieu d'accéder à Tags > Nouveau pour créer une variable en fonction de votre variable personnalisée, cliquez sur Variables > Nouveau
Vous trouverez un guide complet sur la création d'une variable personnalisée dans l'article Créer une variable personnalisée. modèle.
Exporter et importer
Pour partager un modèle personnalisé avec votre organisation, vous pouvez exporter le modèle personnalisé et l'importer dans d'autres conteneurs Tag Manager. Pour exporter un modèle:
- Dans Tag Manager, cliquez sur Modèles.
- Cliquez sur le nom du modèle que vous souhaitez exporter dans la liste. Cela permettra ouvrez le modèle dans l'éditeur de modèles.
- Cliquez sur le menu "Autres actions" (more_vert), puis sélectionnez Exporter.
Pour importer un modèle:
- Dans Tag Manager, cliquez sur Modèles.
- Cliquez sur Nouveau. Un modèle vierge s'ouvre dans l'éditeur de modèles.
- Cliquez sur le menu "Autres actions" (more_vert), puis sélectionnez Importer.
- Sélectionnez le fichier
.tplque vous souhaitez importer.