Conditions préalables
Vous devez avoir terminé les leçons dans Configurer les balises et Ajouter le service d’identité.
En outre, vous aurez besoin d’au moins un identifiant de suite de rapports et de votre serveur de suivi. Si vous ne disposez pas de suite de rapports de test ou de développement que vous pouvez utiliser pour ce tutoriel, créez-en une. Si vous n’êtes pas sûr de la marche à suivre, consultez la documentation. Vous pouvez récupérer votre serveur de suivi à partir de votre mise en œuvre actuelle, ou auprès de votre consultant ou de votre représentant de l’Assistance clientèle Adobe.
Ajout de l’extension Analytics
L’extension Analytics se compose de deux parties principales :
-
La configuration de l’extension, qui gère les paramètres principaux de la bibliothèque AppMeasurement.js et qui peut définir des variables globales.
-
Les actions de règle, qui effectuent les opérations suivantes :
- Définir des variables
- Effacer des variables
- Envoyer la balise Analytics
Ajout de l’extension Analytics
-
Accédez à Extensions > Catalogue
-
Recherchez l’extension Adobe Analytics.
-
Cliquez sur Install
-
Sous Gestion des bibliothèques > Suites de rapports, saisissez les identifiants de suite de rapports que vous souhaitez utiliser avec chaque environnement de balises. Si vos utilisateurs ont accès à Adobe Analytics, notez que lorsque vous commencez à saisir du texte dans la zone, une liste préremplie de toutes vos suites de rapports s’affiche. (Dans ce tutoriel, il est possible d’utiliser une même suite de rapports pour tous les environnements, mais dans la vie réelle, vous souhaiterez utiliser des suites de rapports distinctes, comme illustré ci-dessous)
CONSEIL
Nous vous recommandons d’utiliser l’option Gérer la bibliothèque pour moi comme paramètre Gestion des bibliothèques, car cela facilite la mise à jour de la bibliothèqueAppMeasurement.js
. -
Sous Général > Serveur de suivi, saisissez votre serveur de suivi, par exemple
tmd.sc.omtrdc.net
. Entrez votre serveur de suivi SSL si votre site prend en chargehttps://
-
Dans la section Variables globales, sous Paramètres supplémentaires, définissez la variable Nom de page à l’aide de votre élément de données
Page Name
. Cliquez sur l’icônePage Name
de la page. -
Cliquez sur Enregistrer dans la bibliothèque
Envoi de la balise de page vue
Vous allez maintenant créer une règle pour déclencher la balise Analytics, qui enverra la variable Nom de page définie dans la configuration de l’extension.
Vous avez déjà créé une règle "All Pages - Library Loaded" (Toutes les pages - Bibliothèque chargée) dans la leçon Ajout d’un élément de données, d’une règle et d’une bibliothèque de ce tutoriel, qui est déclenchée sur chaque page au chargement de la bibliothèque de balises. Vous pouvez également utiliser cette règle pour Analytics. Toutefois, cette configuration nécessite que tous les attributs de couche de données utilisés dans la balise Analytics soient définis avant les codes incorporés de balise. Pour plus de flexibilité en matière de collecte de données, vous allez créer une règle « Toutes les pages » déclenchée sur Prêt pour DOM afin de déclencher la balise Analytics.
Envoi de la balise de page vue
-
Accédez à la section Rules dans le volet de navigation de gauche, puis cliquez sur Ajouter une règle
-
Attribuez un nom à la règle
All Pages - DOM Ready
. -
Cliquez sur Événements > Ajouter pour ouvrir l’écran
Event Configuration
. -
Sélectionnez Type d’événement > Prêt pour DOM (Notez que l’ordre de la règle est "50").
-
Cliquez sur Conserver les modifications
-
Sous Actions, cliquez sur l’icône
-
Sélectionnez Extension > Adobe Analytics
-
Sélectionnez Type d’action > Envoyer la balise
-
Laissez Suivi défini sur
s.t()
. Si vous souhaitiez effectuer un appels.tl()
dans une règle d’événement de clics, vous pouvez également utiliser l’action Envoyer la balise. -
Cliquez sur le bouton Conserver les modifications
-
Cliquez sur Enregistrer dans la bibliothèque et créer
Validation de la balise de page vue
Maintenant que vous avez créé une règle pour envoyer une balise Analytics, vous devriez être en mesure de voir la requête dans l’Experience Cloud Debugger.
-
Ouvrez le site Luma dans votre navigateur Chrome.
-
Cliquez sur l’icône
-
Assurez-vous que le débogueur mappe la propriété de balise à l’environnement de développement votre, comme décrit dans la leçon précédente
-
Cliquez pour ouvrir l’onglet Analytics.
-
Développez le nom de votre suite de rapports pour afficher toutes les requêtes qui lui sont envoyées.
-
Vérifiez que la requête a été déclenchée avec la variable et la valeur Nom de page.
Ajout de variables à l’aide de règles
Lorsque vous avez configuré l’extension Analytics, vous avez renseigné la variable pageName
dans la configuration de l’extension. Il s’agit d’un emplacement idéal pour renseigner d’autres variables globales, telles que les eVars et les props, à condition que la valeur soit disponible sur la page avant le chargement du code incorporé de balise.
Les règles qui utilisent l’action Set Variables
offrent un emplacement plus souple pour définir des variables ainsi que des événements. Les règles vous permettent de définir des variables et des événements Analytics différents sous certaines conditions. Par exemple, vous pouvez définir le prodView
uniquement sur les pages Détails du produit et l’événement purchase
uniquement sur les pages de confirmation de commande. Cette section vous explique comment définir des variables à l’aide de règles.
Exemple d’utilisation
Les pages Détails du produit (PDP) sont des points importants pour la collecte de données sur des sites de vente au détail. En règle générale, vous souhaitez qu’Analytics enregistre l’affichage d’un produit et le produit consulté. Cela s’avère utile pour déterminer quels produits sont prisés par vos clients. Sur un site multimédia, les pages d’articles ou de vidéos peuvent utiliser des techniques de suivi similaires à celles que vous utiliserez dans cette section. Lorsque vous chargez une page Détails du produit, vous pouvez définir cette valeur dans une eVar
« Type de page », de même que certains événements et l’ID du produit. Cela nous permettra de voir les éléments suivants dans notre analyse :
- Le nombre de chargements des pages Détails du produit
- Les produits spécifiques consultés et le nombre de consultations
- L’impact d’autres facteurs (campagnes, recherche, etc.) sur le nombre de chargements de PDP par des personnes
Création d’un élément de données pour le type de page
Tout d’abord, vous devez identifier les pages qui sont les pages Détails du produit. Vous procéderez ainsi avec un élément de données.
Création de l’élément de données pour le type de page
-
Cliquez sur Data Elements dans le volet de navigation de gauche.
-
Cliquez sur Ajouter un élément de données
-
Nommez l’élément de données
Page Type
. -
Sélectionnez Type d’élément de données > Variable JavaScript
-
Utilisez
digitalData.page.category.type
comme nom de variable JavaScript -
Vérifiez les options Clean text et Forcer Lower Case
-
Cliquez sur Enregistrer dans la bibliothèque
Création d’un élément de données pour l’ID du produit
Ensuite, vous collecterez l’ID du produit de la page Détails du produit actuelle avec un élément de données.
Création de l’élément de données pour l’ID du produit
-
Cliquez sur Data Elements dans le volet de navigation de gauche.
-
Cliquez sur Ajouter un élément de données
-
Nommez l’élément de données
Product Id
. -
Sélectionnez Type d’élément de données > Variable JavaScript
-
Utilisez
digitalData.product.0.productInfo.sku
comme nom de variable JavaScript -
Vérifiez les options Clean text et Forcer Lower Case
-
Cliquez sur Enregistrer dans la bibliothèque
Ajout de l’extension Adobe Analytics Product String Extension
Si vous connaissez déjà les implémentations Adobe Analytics, alors il est probable que la variable de produits vous soit également familière. La variable de produits a une syntaxe très spécifique et est utilisée de manières légèrement différentes selon le contexte. Pour faciliter le renseignement de la variable products dans les balises, trois extensions supplémentaires ont déjà été créées sur le marketplace de l’extension de balise . Dans cette section, vous allez ajouter une extension créée par Adobe Consulting à utiliser sur la page Détails du produit.
Ajout de Adobe Analytics Product String
l’extension
-
Accédez à la page Extensions > Catalogue.
-
Recherchez l’extension
Adobe Analytics Product String
des services Adobe Consulting et cliquez sur Installer
-
Prenez quelques instants pour lire les instructions.
-
Cliquez sur Enregistrer dans la bibliothèque
Création de la règle pour les pages Détails du produit
Maintenant, vous allez utiliser vos nouveaux éléments de données et votre nouvelle extension pour créer la règle de votre page Détails du produit. Pour cette fonctionnalité, vous allez créer une autre règle de chargement de page, déclenchée par Prêt pour DOM. Cependant, vous allez utiliser une condition afin qu’elle ne se déclenche que sur les pages Détails du produit, ainsi que le paramètre de commande afin qu’il se déclenche avant la règle qui envoie la balise.
Création de la règle de page Détails du produit
-
Accédez à la section Rules dans le volet de navigation de gauche, puis cliquez sur Ajouter une règle
-
Attribuez un nom à la règle
Product Details - DOM Ready - 40
. -
Cliquez sur Événements > Ajouter pour ouvrir l’écran
Event Configuration
. -
Sélectionnez Type d’événement > Prêt pour DOM
-
Définissez la commande sur 40, de sorte que la règle s’exécute avant la règle contenant l’action Analytics > Envoyer la balise .
-
Cliquez sur Conserver les modifications
-
Sous Conditions, cliquez sur l’icône
Condition Configuration
.
-
Sélectionnez Type de condition > Comparaison de valeurs
-
Utilisez le sélecteur d’élément de données et sélectionnez
Page Type
dans le premier champ. -
Sélectionnez Contains dans la liste déroulante des opérateurs de comparaison.
-
Dans le type de champ suivant
product-page
(la partie unique de la valeur de type de page extraite de la couche de données sur les PDP). -
Cliquez sur Conserver les modifications
-
-
Sous Actions, cliquez sur l’icône
-
Sélectionnez Extension > Adobe Analytics Product String
-
Sélectionnez Type d’action > Définir s.products
-
Dans la section Événement de commerce électronique Analytics, sélectionnez prodView
-
Dans la section Variables de couche de données pour les données de produit , utilisez le sélecteur d’élément de données pour choisir l’élément de données
Product Id
. -
Cliquez sur Conserver les modifications
-
Sous Actions, cliquez sur l’icône
-
Sélectionnez Extension > Adobe Analytics
-
Sélectionnez Type d’action > Définir des variables
-
Sélectionnez eVar1 > Défini sur et saisissez
product detail page
-
Définissez event1, en laissant les valeurs facultatives vides.
-
Sous Événements, cliquez sur le bouton Ajouter
-
Définissez l’événement prodView , en laissant les valeurs facultatives vides.
-
Cliquez sur Conserver les modifications
-
Cliquez sur Enregistrer dans la bibliothèque et créer
Validation des données de la page Détails du produit
Vous venez de créer une règle qui définit les variables avant l’envoi de la balise. Vous devriez maintenant être en mesure d’afficher les nouvelles données sortantes dans l’accès du Experience Cloud Debugger.
Validation des données de la page Détails du produit
-
Ouvrez le site Luma dans votre navigateur Chrome.
-
Accédez à une page de détails du produit.
-
Cliquez sur l’icône
-
Cliquez sur l’onglet Analytics.
-
Développez votre suite de rapports.
-
Notez les variables de détails du produit qui se trouvent désormais dans le débogueur, à savoir que
eVar1
a été défini sur « page Détails du produit », que la variableEvents
a été définie sur « event1 » et « prodView », que la variable Produits a été définie avec l’ID du produit que vous affichez et que votre Nom de page est toujours défini par l’extension Analytics.
Envoi d’une balise Lien de suivi
Lors du chargement d’une page, vous déclenchez généralement une balise de chargement de page déclenchée par la fonction s.t()
. Cela incrémente automatiquement une mesure page view
pour la page répertoriée dans la variable pageName
.
Cependant, il arrive parfois que vous ne souhaitiez pas incrémenter les pages vues sur votre site, étant donné que l’action qui se produit est « plus limitée » (voire différente), par rapport à une page vue. Dans ce cas, vous utiliserez la fonction s.tl()
, communément appelée « Lien de suivi ». Bien qu’elle soit qualifiée de requête de lien de suivi, il n’est pas nécessaire de la déclencher via un clic sur les liens. Elle peut être déclenchée par n’importe quel des événements disponibles dans le créateur de règles de balises, y compris votre propre JavaScript personnalisé.
Dans ce tutoriel, vous déclencherez un appel s.tl()
à l’aide de l’un des événements JavaScript les plus cool, un événement Enters Viewport
.
Le cas d’utilisation
Pour ce cas d’utilisation, vous souhaitez savoir si les visiteurs font suffisamment défiler la page d’accueil Luma pour voir la section Produits phares de notre page. Nous avons un certain désaccord interne au sein de notre entreprise sur le fait de savoir si les visiteurs voient ou non cette section, vous souhaitez donc utiliser Analytics pour en avoir le cœur net.
Création de la règle dans les balises
-
Accédez à la section Rules dans le volet de navigation de gauche, puis cliquez sur Ajouter une règle
-
Attribuez un nom à la règle
Homepage - Featured Products enters Viewport
. -
Cliquez sur Événements > Ajouter pour ouvrir l’écran
Event Configuration
. -
Sélectionnez Type d’événement > Enters Viewport. Cela ouvre un champ dans lequel vous devez entrer le sélecteur CSS qui identifie l’élément de votre page qui devra déclencher la règle lorsque l’élément entrera dans la fenêtre d’affichage du navigateur.
-
Revenez à la page d’accueil de Luma et faites défiler l’écran jusqu’à la section Produits présentés .
-
Cliquez avec le bouton droit de la souris sur l’espace entre le titre "FEATURED PRODUCTS" et les éléments de cette section, puis sélectionnez
Inspect
dans le menu contextuel. Ça vous rapprochera de ce que vous souhaitez. -
Tout autour, peut-être juste sous la section sélectionnée, cherchez un élément div avec
class="we-productgrid aem-GridColumn aem-GridColumn--default--12"
. Localisez cet élément. -
Cliquez avec le bouton droit sur cet élément et sélectionnez Copier > Copier le sélecteur
-
Revenez aux balises et collez cette valeur du presse-papiers dans le champ intitulé
Elements matching the CSS selector
.- Notez que c’est à vous de décider comment identifier les sélecteurs CSS. Cette méthode est un peu sensible, car certaines modifications sur la page peuvent rompre ce sélecteur. Tenez-en compte lorsque vous utilisez des sélecteurs CSS dans des balises.
-
Cliquez sur Conserver les modifications
-
Sous Conditions, cliquez sur l’icône
-
Sélectionnez Type de condition > Comparaison de valeurs
-
Utilisez le sélecteur d’élément de données et sélectionnez
Page Name
dans le premier champ. -
Sélectionnez Equals dans la liste déroulante des opérateurs de comparaison.
-
Dans le type de champ suivant
content:luma:us:en
(Il s’agit du nom de page de la page d’accueil tel qu’il est extrait de la couche de données. Nous voulons seulement que cette règle s’exécute sur la page d’accueil.) -
Cliquez sur Conserver les modifications
-
Sous Actions, cliquez sur l’icône
-
Sélectionnez Extension > Adobe Analytics
-
Sélectionnez Type d’action > Définir des variables
-
Définissez
eVar3
surHome Page - Featured Products
. -
Définissez
prop3
surHome Page - Featured Products
. -
Définissez la variable
Events
surevent3
. -
Cliquez sur Conserver les modifications
-
Sous Actions, cliquez sur l’icône
-
Sélectionnez Extension > Adobe Analytics
-
Sélectionnez Type d’action > Envoyer la balise
-
Choisissez l’option de suivi
s.tl()
. -
Dans le champ Nom du lien, saisissez
Scrolled down to Featured Products
. Cette valeur figurera dans le rapport Liens personnalisés dans Analytics. -
Cliquez sur Conserver les modifications
-
Cliquez sur Enregistrer dans la bibliothèque et créer
Validation de la balise Lien de suivi
Vous allez maintenant vous assurer que cet accès se déclenche lorsque vous faites défiler l’écran jusqu’à la section Produits présentés de la page d’accueil de notre site. Lorsque vous chargez la page d’accueil pour la première fois, la requête ne doit pas être faite, mais lorsque vous faites défiler la page vers le bas et que la section s’affiche, l’accès doit se déclencher avec les nouvelles valeurs.
-
Ouvrez le site Luma dans votre navigateur Chrome et assurez-vous que vous êtes en haut de la page d’accueil.
-
Cliquez sur l’ icône du débogueur
-
Cliquez sur l’onglet Analytics.
-
Développez l’accès à votre suite de rapports.
-
Notez l’accès normal à la page vue pour la page d’accueil avec le nom de la page, etc. (mais rien dans eVar3 ou prop3).
-
Laissez le débogueur ouvert, faites défiler votre site vers le bas jusqu’à ce que vous puissiez voir la section Produits présentés .
-
Affichez de nouveau le débogueur. Un nouvel accès Analytics devrait s’être affiché. Cet accès doit avoir les paramètres associés à l’accès s.tl() que vous configurez, à savoir :
-
LinkType = "link_o"
(cela signifie que l’accès est un accès à un lien personnalisé, et non un accès à la page vue). -
LinkName = "Scrolled down to Featured Products"
-
prop3 = "Home Page - Featured Products"
-
eVar3 = "Home Page - Featured Products"
-
Events = "event3"
-