Ajout d’un élément de données, d’une règle et d’une bibliothèque
Au cours de cette leçon, vous allez créer votre premier élément de données, votre première règle et votre première bibliothèque.
Les éléments de données et les règles sont les blocs de création de base des balises. Les éléments de données stockent les attributs que vous souhaitez envoyer à vos solutions de marketing et publicitaires, tandis que les règles déclenchent les requêtes vers ces solutions dans les bonnes conditions. Les bibliothèques sont les fichiers JavaScript qui se chargent sur la page pour effectuer toutes les tâches. Dans cette leçon, vous utiliserez les trois pour faire fonctionner notre page d’exemple.
- Le platform launch (côté client) est désormais tags
- Le platform launch côté serveur est désormais event forwarding
- Les configurations Edge sont désormais datastreams
Objectifs d’apprentissage
À la fin de cette leçon, vous saurez comment :
- créer un élément de données ;
- créer une règle ;
- créer une bibliothèque ;
- ajouter des modifications à une bibliothèque ;
- valider le chargement de la bibliothèque dans votre navigateur web ;
- utiliser la fonction « Bibliothèque de travail » pour travailler plus efficacement.
Création d’un élément de données pour le nom de page
Les éléments de données sont la version des balises d’une couche de données. Ils peuvent stocker des valeurs de votre propre objet de couche de données, de cookies, d’objets de stockage local, de paramètres de chaîne de requête, d’éléments de page, de balises META, etc. Au cours de cet exercice, vous allez créer un élément de données pour le nom de page, que vous utiliserez ultérieurement pour les implémentations de Target et Analytics.
Création d’un élément de données
-
Dans le volet de navigation de gauche, cliquez sur Éléments de données
-
Comme vous n’avez pas encore créé d’éléments de données dans cette propriété, une courte vidéo s’affiche et vous montre des informations supplémentaires sur cette rubrique. Regardez cette vidéo si vous le souhaitez.
-
Cliquez sur le bouton Créer un élément de données :
-
Nommez l’élément de données. Par exemple,
Page Name. -
Utilisez le type d’élément de données Variable JavaScript pour pointer vers une valeur dans la couche de données de votre page d’exemple :
digitalData.page.pageInfo.pageName. -
Cochez les cases pour Forcer la valeur minuscule et Nettoyer le texte pour normaliser la casse et supprimer les espaces superflus.
-
Laissez Aucun comme paramètre pour le paramètre Durée de stockage, car cette valeur est généralement différente sur chaque page.
-
Cliquez sur le bouton Enregistrer pour enregistrer l’élément de données.
Création d’une règle
Vous utiliserez ensuite cet élément de données dans une règle simple. Les règles sont l’une des fonctionnalités les plus puissantes des balises et vous permettent de spécifier ce qui doit se produire lorsque le visiteur interagit avec votre site web. Lorsque les critères définis dans une règle sont satisfaits, celle-ci déclenche l’action indiquée.
Vous allez créer une règle transmettant la valeur de l’élément de données Nom de page à la console du navigateur.
Création d’une règle
-
Dans le volet de navigation de gauche, cliquez sur Règles
-
Comme vous n’avez pas encore créé de règle dans cette propriété, une courte vidéo s’affiche et vous montre des informations supplémentaires sur cette rubrique. Regardez cette vidéo si vous le souhaitez.
-
Cliquez sur le bouton Cliquez sur le bouton Créer une règle :
-
Attribuez un nom à la règle
All Pages - Library Loaded. Cette convention d’affectation des noms indique où et quand la règle se déclenchera, ce qui facilite l’identification et la réutilisation à mesure que votre propriété de balise se développe. -
Sous Événements, cliquez sur Ajouter. L’événement indique aux balises quand la règle doit se déclencher et peut être de nombreux éléments, y compris un chargement de page, un clic, un événement JavaScript personnalisé, etc.
-
Pour Event Type (Type d’événement), sélectionnez Chargé par bibliothèque - Haut de page. Notez que lorsque vous sélectionnez le type d’événement, les balises prérenseignent le nom de l’événement à l’aide de votre sélection. Notez également que l’ordre par défaut de l’événement est 50. La commande est une puissante fonctionnalité des balises qui vous permet de contrôler précisément la séquence d’actions lorsque plusieurs règles sont déclenchées par le même événement. Vous utiliserez cette fonctionnalité plus loin dans le tutoriel.
-
Cliquez sur le bouton Conserver les modifications.
-
-
Puisque cette règle doit se déclencher sur toutes les pages, laissez vide le champ Conditions. Si vous ouvrez le modal Conditions, vous verrez que les conditions peuvent ajouter des restrictions aussi bien que des exclusions en fonction d’une grande variété d’options, y compris les URL, les valeurs d’élément de données, les périodes, etc.
-
Sous Actions, cliquez sur Ajouter.
-
Sélectionnez Type d’action > Code personnalisé, qui est la seule option disponible pour l’instant. Plus loin dans le tutoriel, au fur et à mesure que vous ajouterez des extensions, plus d’options deviennent disponibles.
-
Sélectionnez </> Ouvrir l’éditeur pour ouvrir l’éditeur de code.
-
Ajoutez l’élément ci-dessous à l’éditeur de code. Ce code génère la valeur de l’élément de données Nom de page dans la console du navigateur afin que vous puissiez confirmer son fonctionnement :
code language-javascript console.log('The page name is '+_satellite.getVar('Page Name')); -
Enregistrez l’éditeur de code.
-
Dans l’écran Configuration de l’action, cliquez sur Conserver les modifications.
-
Cliquez sur Enregistrer pour enregistrer la règle.
Sur la page Règles , la nouvelle règle doit s’afficher :
Enregistrer des modifications effectuées dans une bibliothèque
Après avoir configuré une collection d’extensions, d’éléments de données et de règles dans l’interface Collecte de données, vous devez regrouper ces fonctionnalités et logiques dans un ensemble de codes JavaScript que vous pouvez déployer sur votre site web afin que les balises marketing se déclenchent lorsque les visiteurs se connectent au site. Une bibliothèque est un ensemble de codes JavaScript qui effectue cette opération.
Dans une précédente leçon, vous avez mis en œuvre le code incorporé de votre environnement de développement sur la page d’exemple. Lorsque vous avez chargé la page d’exemple, une erreur 404 s’est affichée pour l’URL du code incorporé, car aucune bibliothèque de balises n’avait été créée et affectée à l’environnement. Vous allez maintenant placer votre nouvel élément de données et votre nouvelle règle dans une bibliothèque pour que votre page d’exemple puisse faire quelque chose.
Ajout et création d’une bibliothèque
-
Dans le volet de navigation de gauche, cliquez sur Flux de publication
-
Cliquez sur Ajouter une nouvelle bibliothèque
-
Nommez la bibliothèque, par exemple :
Initial Setup -
Sélectionnez Environnement > Développement
-
Cliquez sur Ajouter toutes les ressources modifiées
-
Notez qu’après avoir cliqué sur Ajouter toutes les ressources modifiées Les balises résument les modifications que vous venez d’effectuer.
-
Cliquez sur Enregistrer et générer pour le développement
Après quelques moments, l’état devient vert, ce qui indique que la bibliothèque a été créée.
Validation de votre travail
Vérifiez maintenant que votre règle fonctionne comme prévu.
Rechargez votre page d’exemple. Si vous consultez l’onglet Outils de développement -> Réseau , vous devriez maintenant voir une réponse 200 pour votre bibliothèque de balises !
Si vous consultez Outils de développement > Console, le texte « Le nom de la page est la page d’accueil » s’affiche.
Félicitations, vous avez créé votre premier élément de données et votre première règle et créé votre première bibliothèque de balises !
Utilisation de la fonctionnalité Bibliothèque de travail
Lorsque vous effectuez de nombreuses modifications dans les balises, il n’est pas pratique d’avoir à accéder à l’onglet Publication, d’ajouter des modifications et de créer la bibliothèque chaque fois que vous souhaitez voir le résultat. Une fois votre bibliothèque de configuration initiale créée, vous pouvez utiliser la fonctionnalité Bibliothèque de travail pour enregistrer rapidement vos modifications et recréer la bibliothèque en une seule étape.
Apportez un petit changement à la règle « Toutes les pages - Bibliothèque chargée ». Dans le volet de navigation de gauche, cliquez sur Règles puis cliquez sur le bouton All Pages - Library Loaded pour l’ouvrir.
Sur la page Edit Rule, cliquez sur la liste déroulante Bibliothèque de travail et sélectionnez votre bibliothèque Initial Setup.
Une fois que vous avez sélectionné la bibliothèque, vous devriez voir que la variable Enregistrer par défaut, le bouton Enregistrer dans la bibliothèque. Lorsque vous effectuez une modification des balises, vous pouvez utiliser cette option pour ajouter automatiquement la modification à votre bibliothèque de travail et/ou la recréer.
Faites le test. Ouvrez votre action Code personnalisé et ajoutez un point-virgule après le texte « Le nom de page est » afin que le bloc de code entier soit :
console.log('The page name is: '+_satellite.getVar('Page Name'));
Enregistrez le code, conservez les modifications dans l’action, puis cliquez sur le bouton Enregistrer dans la bibliothèque et Créer.
Patientez jusqu’à ce que le point vert réapparaisse en regard de la liste déroulante Bibliothèque de travail. Maintenant, chargez à nouveau votre page d’exemple. Vous devriez voir votre modification se refléter dans le message de la console (vous devrez peut-être pour cela vider le cache de votre navigateur et le charger à nouveau) :
C’est une façon beaucoup plus rapide de travailler et ce sera la méthode utilisée pour le reste du tutoriel.
Suite : « Changement d’environnements avec l’Experience Cloud Debugger » >