Fin mai, Google a introduit une nouvelle fonctionnalité dans Google Tag Manager (GTM): des modèles personnalisés ou des modèles personnalisés. Voyons pourquoi il est nécessaire, comment l'utiliser, quelles sont les différences avec les balises HTML et les variables JavaScript.
Par exemple, envisagez de créer un modèle personnalisé pour un pixel de reciblage dynamique VKontakte et de personnaliser davantage les balises GTM à travers lui.
Mots simples sur les modèles personnalisésCréation d'un modèle personnalisé• Onglet Info• Onglet Champs• Onglet Code• Onglet AutorisationsPersonnalisation et test de la balise sur le modèle personnalisé créé• Page vue• AddToCart• Test minierConclusionMots simples sur les modèles personnalisés
Les modèles personnalisés sont des modèles grâce auxquels les utilisateurs peuvent créer de nouvelles balises ou variables. GTM a des modèles prêts à l'emploi (dans la section En vedette ou recommandé), par exemple, la balise Google Analytics, Google Optimize et autres. Nous pouvons maintenant les compléter avec nos modèles. Une fois créés, ils apparaîtront dans l'onglet Personnalisé:
La principale différence avec les balises HTML et les variables JS est que lorsqu'un utilisateur crée une balise ou une variable à l'aide d'un modèle prêt à l'emploi, il n'interagit pas avec le code JS.
Le code du modèle utilisateur est écrit par le développeur ou l'analyste Web au stade de sa création. Ensuite, lors de la création d'une balise ou d'une variable selon un modèle utilisateur, toutes les interactions sont effectuées via l'interface (qui est également configurée lors de la création d'un modèle utilisateur):
Par conséquent, par rapport à l'écriture d'une balise HTML ou d'une variable JS, la personnalisation d'une balise ou d'une variable selon un modèle utilisateur devient un ordre de grandeur plus facile, car cela ne nécessite pas de connaissances et de compétences pour travailler avec JavaScript.
Un autre grand avantage des modèles personnalisés est que la probabilité de "mettre" un site est réduite d'un ordre de grandeur en raison d'une erreur dans le code JS de la balise.
Dans notre exemple, pour configurer la balise de reciblage dynamique "VKontakte", vous n'avez plus besoin de contacter les développeurs - tout peut être configuré indépendamment, même le transfert de données sur les marchandises (lorsque le commerce électronique avancé de Google est configuré sur le site), n'ayant qu'une expérience avec GTM.
Création d'un modèle personnalisé
Puisque nous créons un modèle de balise, nous devons aller dans la section Modèles et cliquer sur le bouton Nouveau dans la section Modèles de balises.
Après cela, l'éditeur de modèle s'ouvre:
Sur le côté gauche de l'éditeur, il y a une fenêtre de paramètres, sur le côté droit il y a une fenêtre d'aperçu et une console. La fenêtre des paramètres contient quatre onglets nécessaires à la création et à l'utilisation du modèle.
Onglet Info
Les informations sur le tag sont renseignées sur cet onglet: nom, description, icône. Voici les informations que nous verrons lors de la création d'une nouvelle balise dans la liste des modèles:
Il y a des exigences pour l'icône de balise: format PNG, JPEG ou GIF, une résolution d'au moins 64x64 pixels et une taille ne dépassant pas 50 Ko.
Onglet Champs
Cette section crée l'interface de notre modèle. L'interface se compose de divers champs et formulaires avec lesquels l'utilisateur interagit au stade de la création d'une nouvelle balise ou variable.
À l'avenir, les informations entrées par l'utilisateur lors de la création de la balise à l'aide de l'interface seront utilisées dans le code du modèle.
Pour ajouter un nouvel élément, cliquez sur le bouton Ajouter un champ. La fenêtre de sélection du type d'élément apparaît:
GTM vous permet de sélectionner les types d'éléments d'interface suivants:
- zone de texte
- menu déroulant
- case à cocher ;
- interrupteurs
- tableau simple , ici vous pouvez éditer chaque cellule.
- table étendue , vous ne pouvez modifier qu'une ligne, ce type de table est pratique à utiliser pour créer un dictionnaire à partir de paires clé-valeur;
- groupe d'éléments , vous permet de regrouper plusieurs types en un groupe;
- le raccourci est utilisé pour ajouter du texte à l'interface; il ne nécessite pas que l'utilisateur entre des données.
Après avoir ajouté un élément, vous devez lui donner un nom convivial, qui sera ensuite utilisé dans le code. Il s'agit d'une sorte de nom de variable - il doit être compréhensible et révéler l'essence de l'élément d'interface créé. Par exemple, le nom «ID» ne signifie rien de spécifique, mais le nom «pixelIDs» montre déjà que les identifiants de pixel saisis par l'utilisateur sont stockés dans cet élément:
Ensuite, accédez aux paramètres de chaque élément et activez les propriétés nécessaires.
Dans différentes situations, différentes propriétés de l'élément d'interface sont requises, donc par défaut, elles sont toutes cachées et nous devons activer celles qui sont nécessaires maintenant:
Pour différents types d'éléments, les propriétés disponibles diffèrent, je vais indiquer les plus utilisées, qui sont presque tous des éléments:
1. Nom d'affichage . Voici le nom que l'utilisateur verra dans l'interface lors de la création de la balise:
2. Exemple de valeur . Voici un indice pour l'utilisateur sur les valeurs à saisir dans le champ:
3. Texte d'aide . Voici le texte que l'utilisateur verra s'il survole l'icône d'aide de l'élément:
4. Règles de vérification des données . Dans cette propriété, vous pouvez définir certaines règles pour vérifier les données entrées par l'utilisateur dans le champ et, si nécessaire, le texte d'erreur qui apparaît lorsque vous essayez d'enregistrer une balise avec des données qui n'ont pas réussi le test.
Par exemple, vous pouvez spécifier que le champ doit être rempli. Le deuxième exemple: vous devez obtenir une adresse e-mail de l'utilisateur, puis vous pouvez vérifier que les données saisies par l'utilisateur doivent correspondre à l'expression régulière
. * @. * \ .. * .
Pour spécifier le texte d'erreur qui apparaît si les données saisies ne sont pas conformes aux règles de vérification, vous devez activer les paramètres de règle avancés:
De plus, dans les paramètres avancés, vous pouvez spécifier les conditions dans lesquelles cette règle est activée (le champ Activer la condition).
5. Conditions d'inclusion . Ce sont les conditions dans lesquelles l'utilisateur aura cet élément d'interface.
Par exemple, afin de ne pas surcharger le modèle avec des éléments d'interface, vous pouvez faire apparaître les éléments nécessaires lorsque la case est cochée. Autrement dit, supposons que si un utilisateur souhaite configurer le transfert des données de produit dans un pixel (cela est possible avec le site de commerce électronique avancé de Google configuré sur le site), il sélectionne la case "Utiliser dataLayer pour transférer les données de produit", et après avoir coché la case, des éléments apparaissent dans l'interface du tag nécessaire pour configurer un tel transfert. Si la case n'est pas cochée, il n'y a aucun élément dans l'interface.
Je note qu'ici, il est nécessaire d'indiquer le nom de l'élément, qui devait lui être attribué immédiatement après l'ajout.
Lorsque vous ajoutez des paramètres et créez une interface, toutes les modifications peuvent être immédiatement visualisées et testées dans la fenêtre d'aperçu:
Onglet Code
Cet onglet est un éditeur de code.
Le code GTM Custom Templates est écrit en JavaScript «allégé» ES6 et s'exécute dans un environnement isolé où toutes les communications avec les données globales (c'est-à-dire directement avec la page) se font via l'API. Il n'y a pas d'objets globaux, tels que fenêtre ou document, respectivement, dans les méthodes habituelles. Par exemple, les constructeurs (nouvel objet et similaires), setTimeout, parseInt, delete, etc. - tout cela ne fonctionnera pas dans le modèle personnalisé.
Mais il y a une API pour tout ça. Et par conséquent, l'écriture de code pour un modèle personnalisé doit commencer par le fait que nous définissons les API que nous utiliserons dans notre code:
Consultez l'
aide aux développeurs Google pour obtenir une liste complète des API avec une documentation détaillée.
Je vais vous montrer des exemples de la façon de travailler avec l'API:
Comme vous pouvez le voir dans le tableau d'exemple, après avoir défini l'API, vous devez l'utiliser à la place des constructions JS standard.
Après avoir défini l'API, il est souhaitable de définir un objet avec les paramètres que l'utilisateur a saisis. Cela peut également être fait après, par exemple, pendant le code exécutable, en demandant les données nécessaires aux paramètres de l'utilisateur. Mais si nous définissons l'objet settings depuis le tout début, travailler avec le code devient plus facile et plus compréhensible, car tous les paramètres utilisateur sont stockés dans un objet séparé.
Pour obtenir des données d'un élément d'interface, vous devez utiliser la construction de données.
{{nom d'élément}}:
Remarque: si vous passez undefined à la méthode makeTableMap, cela provoquera une erreur de script, donc j'utilise une construction avec un opérateur ternaire (un enregistrement abrégé de la construction if-else) pour filtrer ces scripts.
À propos de la méthode makeTableMap.Si l'interface utilise une table étendue, les données qu'elle contient sont stockées sous cette forme:
[ 'key': 'k1', 'value': 'v1'}, 'key': 'k2', 'value': 'v2'} ]
Après traitement avec la méthode makeTableMap, les données deviennent un objet normal avec des paires clé-valeur:
{ 'k1': 'v1', 'k2': 'v2' }
Autre exigence pour le code du modèle personnalisé: si la balise est correctement exécutée, vous devez appeler la méthode data.gtmOnSuccess () et en cas d'erreur, appeler la méthode data.gtmOnFailure ().
Par exemple, dans mon code, la méthode data.gtmOnSuccess () est appelée après que la demande a été envoyée avec succès et la méthode data.gtmOnFailure () est appelée si le téléchargement échoue sur la page de script externe VK openapi.js.
Après avoir défini l'API et défini l'objet avec les paramètres, vous pouvez commencer à écrire un algorithme pour travailler le pixel.
La principale chose à retenir ici est:
• Si vous avez besoin d'obtenir une variable globale - utilisez la méthode API copyFromWindow.
copyFromWindow('VK');
• Si vous devez définir une variable globale, nous utilisons la méthode API setInWindow.
setInWindow('openapiInject', 1);
• Si vous devez exécuter une fonction globale, nous utilisons la méthode API callInWindow.
callInWindow('VK.Retargeting.Init', p);
• Si vous devez ajouter un script externe à la page - utilisez la méthode API injectScript.
injectScript('https://vk.com/js/api/openapi.js?159', pixel.setVkAsyncInit(), data.gtmOnFailure, 'vkPixel');
• Si vous devez obtenir l'URL (ou une partie de celle-ci) - utilisez la méthode API getUrl.
getUrl('host');
Comme je l'ai écrit ci-dessus, le modèle personnalisé prend en charge JS ES6. Il est conseillé d'utiliser cette syntaxe, car elle raccourcit le code et le rend plus lisible, et le travail de JS est plus prévisible et similaire à d'autres langages de programmation.
Plus d'informations sur la syntaxe JS ES6La principale chose qu'il est souhaitable d'utiliser est les fonctions fléchées et les déclarations de const et let variables au lieu de var.
Une variable déclarée via const est une constante dont la valeur ne peut pas être modifiée.
Une variable déclarée par let diffère d'une variable déclarée par var comme suit:
- let n'est pas ajouté à l'objet de fenêtre globale;
- la visibilité est limitée au bloc de déclaration;
- les variables déclarées via let ne peuvent pas être re-déclarées.
Les fonctions fléchées sont l'abréviation des fonctions habituelles:
Maintenant que nous comprenons comment utiliser l'API de modèle personnalisé, nous pouvons écrire le code d'opération de balise à l'aide de la syntaxe JavaScript ES6.
Mon code contient des méthodes pour lancer un pixel, installer VK openapi.js, récupérer les données produit de dataLayer (avec le site de commerce électronique avancé de Google configuré), traiter ces données pour les mettre sous la forme nécessaire pour l'envoi au pixel de reciblage VKontakte et la méthode de répartition des événements.
La méthode de déclenchement par pixel prend en charge trois scénarios:
- Le pixel s'exécute sur une page où openapi.js est manquant.
- Le pixel s'exécute sur la page où se trouve openapi.js, mais il n'a pas encore été chargé.
- Le pixel est lancé sur la page avec openapi.js chargé.
Le code complet de mon modèle GTM personnalisé pour le pixel de reciblage dynamique VKontakte Onglet Autorisations
Après avoir écrit le code de balise, la dernière étape reste - pour émettre des autorisations d'interagir avec les données globales de la page. Cela se fait uniquement sur l'onglet Autorisations.
Étant donné que le code est exécuté dans un environnement isolé et que l'interaction avec les données globales se produit via l'API, pour chaque méthode API (si nécessaire), nous devons spécifier manuellement les autorisations pour certaines actions.
Ceci est fait afin d'aborder le travail avec les données de page globales de manière aussi réfléchie que possible, et ainsi minimiser les chances de "mettre" le site dans une erreur dans le code de notre modèle.
Pour les méthodes API utilisées dans mon code, trois types d'autorisations doivent être émis:
1. Accède aux variables globales - lire, écrire, exécuter l'accès aux variables globales qui sont utilisées dans notre code. Les variables doivent être ajoutées manuellement et pour chacune d'elles indiquer ce que nous autorisons à faire.
Par exemple, la variable VK ne peut être lue que, vkAsyncInit peut être lu et redéfini et la méthode VK.Retargeting.Hit ne peut être exécutée.
2. Lit l'URL . Ici, vous devez spécifier quelles parties de l'URL sont autorisées à recevoir. J'autorise la réception de toutes les parties de l'URL:
Mais si vous le souhaitez, vous pouvez spécifier tout spécifique:
3. Injecte des scripts . Ici, il est nécessaire d'enregistrer les adresses à partir desquelles vous pouvez télécharger des scripts externes. Dans mon code, un seul script avec VK openapi.js est chargé, je précise son adresse:
C'est tout, la configuration du modèle personnalisé est terminée, vous pouvez enregistrer le modèle et procéder aux tests.
Personnalisation et test de la balise sur le modèle personnalisé créé
Par exemple, nous allons créer deux balises de reciblage dynamique «VKontakte» en utilisant le modèle personnalisé créé: pageview et addToCart.
Page vue
Nous allons entrer dans le conteneur GTM nécessaire, créer une nouvelle balise, sélectionner le type de balise VK Pixel dans la section personnalisée:
Remplissez le nom du tag, sélectionnez l'événement à suivre, sélectionnez Hit (il s'agit d'une page vue standard), dans le champ "Pixel ID" indiquez l'ID des deux pixels vers lesquels les données seront envoyées, et définissez le déclencheur Toutes les pages:
Enregistrez la balise créée.
AddToCart
Créer une balise pour un événement en ajoutant un produit au panier sera un peu plus compliqué qu'une balise Hit.
Tout d'abord, vous devez transférer les marchandises ajoutées au panier. Comme je l'ai écrit ci-dessus, cela est possible avec le commerce électronique avancé de Google configuré sur le site. Dans ce cas, les données produit sont extraites de dataLayer.
Pour ce faire, nous devons créer la variable dataLayer dans GTM, qui stockera l'objet de commerce électronique pour l'événement addToCart. Les paramètres variables ressemblent à ceci:
Deuxièmement, vous devez créer un déclencheur qui activera la balise lorsque l'événement de commerce électronique addToCart se produit (le déclencheur activera la balise lors de l'introduction du dataLayer lorsque l'événement addToCart se produit):
Après avoir créé une variable avec un objet de commerce électronique et un déclencheur, vous pouvez commencer à créer la balise:
Pour:
- En tant qu'événement suivi, sélectionnez Ajouter au panier.
- Nous remplissons l'ID séparé par des virgules de deux pixels dans lesquels les données doivent être transférées.
- Cochez la case «Utiliser plusieurs listes de prix»: pour Moscou et Saint-Pétersbourg, dans notre exemple, il est nécessaire d'utiliser des listes de prix différentes.
- Remplissez le tableau avec les listes de prix.
- Cochez la case «Utiliser le commerce électronique pour transférer des produits et des paramètres».
- Dans l'objet de commerce électronique de cet événement, spécifiez la variable créée précédemment.
- Nous avons défini le déclencheur de l'événement surveillé, dans ce cas - AddToCart.
- Enregistrez.
Test minier
Pour vérifier le fonctionnement des pixels du reciblage dynamique sur VKontakte, vous devez activer le mode Aperçu dans GTM, allez sur notre site Web et ouvrez la section Réseau dans la console du navigateur et entrez 'rtrg' dans le champ Filtre:
Après cela, nous actualisons la page et nous devrions avoir deux demandes - l'événement Hit envoyé en deux pixels:
Le statut 200 signifie que les demandes sont envoyées et reçues par le serveur avec succès.
Toujours dans la fenêtre Aperçu GTM, nous voyons que notre balise créée a fonctionné correctement pour l'événement Vue de page.
Pour vérifier l'événement Ajouter au panier, ajoutez le produit au panier et, dans la console, nous avons deux autres demandes:
Dans la fenêtre Aperçu GTM, nous voyons que la deuxième balise a fonctionné avec succès. Les données de produit de dataLayer sont remontées et traitées correctement, la liste de prix correcte a également été remplacée.
Pour le deuxième hôte, la liste de prix est également remplacée correctement:
Les balises des autres événements sont configurées et vérifiées de la même manière.
Conclusion
Les modèles personnalisés changent le paradigme familier de l'utilisation de GTM. Tout le monde est habitué aux balises HTML et aux variables JS, mais il existe maintenant une excellente alternative.
Il suffit de créer un modèle personnalisé de haute qualité une fois, puis toute personne familiarisée avec GTM peut l'utiliser.
Étant donné la possibilité de partager les modèles créés, je pense qu'ils devraient gagner en popularité auprès des utilisateurs.
Vous pouvez
télécharger le modèle de pixel de reciblage dynamique
personnalisé VKontakte, que nous avons examiné dans cet article.
Pour importer un modèle, vous devez créer un nouveau modèle personnalisé et sélectionner Importer dans le menu:
Matériel préparé par moi pour ppc.world