Ajout d’Adobe Analytics

Dernière mise à jour : 5 mai 2025
  • Rubriques :

Créé pour :

  • Débutant
  • Intermédiaire
  • Développeur

Dans cette leçon, vous allez implémenter l’extension Adobe Analytics et créer des règles pour envoyer des données à Adobe Analytics.

Adobe Analytics est une solution de pointe qui vous permet de comprendre vos clients en tant que personnes et d’orienter votre activité grâce aux renseignements sur vos clients.

REMARQUE
Adobe Experience Platform Launch est intégré à Adobe Experience Platform comme une suite de technologies destinées à la collecte de données. Plusieurs modifications terminologiques ont été apportées à l’interface que vous devez connaître lors de l’utilisation de ce contenu :
  • 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 :

  1. ajouter l’extension Adobe Analytics ;
  2. définir des variables globales à l’aide de l’extension ;
  3. ajouter la balise de page vue ;
  4. ajouter des variables supplémentaires à l’aide de règles ;
  5. ajouter le suivi des clics et d’autres balises basées sur un événement ;
  6. ajouter des plug-ins Analytics.

Il existe de nombreux éléments qui peuvent être implémentés pour Analytics dans les balises . Cette leçon n’est pas exhaustive, mais elle devrait vous donner une vue d’ensemble adéquate des techniques principales dont vous avez besoin pour l’implémenter sur votre propre site.

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 :

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

  2. Les actions de règle, qui effectuent les opérations suivantes :

    1. Définir des variables
    2. Effacer des variables
    3. Envoyer la balise Analytics

Ajout de l’extension Analytics

  1. Accédez à Extensions > Catalogue

  2. Recherchez l’extension Adobe Analytics.

  3. Cliquez sur Install

    Installer l’extension Analytics

  4. 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)

    Entrer les identifiants des suites de rapports

    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èque AppMeasurement.js.

  5. 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 charge https://

    Entrer les serveurs de suivi

  6. 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ône icône d’élément de données pour ouvrir le modal et choisir l’élément de données Page Name de la page.

  7. Cliquez sur Enregistrer dans la bibliothèque

    Définir la variable de nom de page et enregistrer

REMARQUE
Les variables globales peuvent être définies dans la configuration de l’extension ou dans les actions de règle. N’oubliez pas que lorsque vous définissez des variables dans la configuration de l’extension, la couche de données doit être définie avant les codes incorporés de balise.

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

  1. Accédez à la section Rules dans le volet de navigation de gauche, puis cliquez sur Ajouter une règle

    Ajouter une règle

  2. Attribuez un nom à la règle All Pages - DOM Ready.

  3. Cliquez sur Événements > Ajouter pour ouvrir l’écran Event Configuration.

    Attribuer un nom à la règle et ajouter un événement

  4. Sélectionnez Type d’événement > Prêt pour DOM (Notez que l’ordre de la règle est "50").

  5. Cliquez sur Conserver les modifications
    Configurer l’événement

  6. Sous Actions, cliquez sur l’icône Plus pour ajouter une nouvelle action.

    Cliquer sur l’icône Plus pour ajouter une nouvelle action

  7. Sélectionnez Extension > Adobe Analytics

  8. Sélectionnez Type d’action > Envoyer la balise

  9. Laissez Suivi défini sur s.t(). Si vous souhaitiez effectuer un appel s.tl() dans une règle d’événement de clics, vous pouvez également utiliser l’action Envoyer la balise.

  10. Cliquez sur le bouton Conserver les modifications

    Cliquer sur l’icône Plus pour ajouter une nouvelle action

  11. Cliquez sur Enregistrer dans la bibliothèque et créer

    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.

  1. Ouvrez le site Luma dans votre navigateur Chrome.

  2. Cliquez sur l’icône Ouvrir l’Experience Cloud Debugger pour ouvrir le débogueur Adobe Experience Cloud

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

    Votre environnement de développement de balises affiché dans Debugger

  4. Cliquez pour ouvrir l’onglet Analytics.

  5. Développez le nom de votre suite de rapports pour afficher toutes les requêtes qui lui sont envoyées.

  6. Vérifiez que la requête a été déclenchée avec la variable et la valeur Nom de page.

    Valider l’accès à la page

REMARQUE
Si le Nom de page ne s’affiche pas, revenez à la procédure décrite sur cette page pour vous assurer que vous n’avez rien manqué.

Ajout de variables à l’aide de règles

Lorsque vous avez configuré l’extension Analytics, vous avez renseigné la variable pageNamedans 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 :

  1. Le nombre de chargements des pages Détails du produit
  2. Les produits spécifiques consultés et le nombre de consultations
  3. 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

  1. Cliquez sur Data Elements dans le volet de navigation de gauche.

  2. Cliquez sur Ajouter un élément de données

    Ajouter un nouvel élément de données

  3. Nommez l’élément de données Page Type.

  4. Sélectionnez Type d’élément de données > Variable JavaScript

  5. Utilisez digitalData.page.category.type comme nom de variable JavaScript

  6. Vérifiez les options Clean text et Forcer Lower Case

  7. Cliquez sur Enregistrer dans la bibliothèque

    Ajouter un nouvel élément de données pour le type de page

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

  1. Cliquez sur Data Elements dans le volet de navigation de gauche.

  2. Cliquez sur Ajouter un élément de données

    Ajouter un nouvel élément de données

  3. Nommez l’élément de données Product Id.

  4. Sélectionnez Type d’élément de données > Variable JavaScript

  5. Utilisez digitalData.product.0.productInfo.sku comme nom de variable JavaScript

  6. Vérifiez les options Clean text et Forcer Lower Case

  7. Cliquez sur Enregistrer dans la bibliothèque

    Ajouter un nouvel élément de données pour le type de page

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

  1. Accédez à la page Extensions > Catalogue.

  2. Recherchez l’extension Adobe Analytics Product String des services Adobe Consulting et cliquez sur Installer
    Ajouter l’extension Adobe Analytics Product String créée par Adobe Consulting

  3. Prenez quelques instants pour lire les instructions.

  4. Cliquez sur Enregistrer dans la bibliothèque

    Enregistrer l’extension et la créer dans votre 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

  1. Accédez à la section Rules dans le volet de navigation de gauche, puis cliquez sur Ajouter une règle

    Ajouter une règle

  2. Attribuez un nom à la règle Product Details - DOM Ready - 40.

  3. Cliquez sur Événements > Ajouter pour ouvrir l’écran Event Configuration.

    Attribuer un nom à la règle et ajouter un événement

  4. Sélectionnez Type d’événement > Prêt pour DOM

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

  6. Cliquez sur Conserver les modifications
    Configurer l’événement

  7. Sous Conditions, cliquez sur l’icône Cliquer sur l’icône Plus pour ouvrir l’écran Condition Configuration.
    Cliquer sur l’icône Plus pour ajouter une nouvelle condition

    1. Sélectionnez Type de condition > Comparaison de valeurs

    2. Utilisez le sélecteur d’élément de données et sélectionnez Page Type dans le premier champ.

    3. Sélectionnez Contains dans la liste déroulante des opérateurs de comparaison.

    4. 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).

    5. Cliquez sur Conserver les modifications

      Définir la condition

  8. Sous Actions, cliquez sur l’icône Plus pour ajouter une nouvelle action.

    Cliquer sur l’icône Plus pour ajouter une nouvelle action

  9. Sélectionnez Extension > Adobe Analytics Product String

  10. Sélectionnez Type d’action > Définir s.products

  11. Dans la section Événement de commerce électronique Analytics, sélectionnez prodView

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

  13. Cliquez sur Conserver les modifications

    Ajouter la variable Chaîne de produit à l’aide de l’extension Adobe Analytics Product String extension

  14. Sous Actions, cliquez sur l’icône Plus pour ajouter une nouvelle action.

    Ajouter une autre action pour la Chaîne de produit

  15. Sélectionnez Extension > Adobe Analytics

  16. Sélectionnez Type d’action > Définir des variables

  17. Sélectionnez eVar1 > Défini sur et saisissez product detail page

  18. Définissez event1, en laissant les valeurs facultatives vides.

  19. Sous Événements, cliquez sur le bouton Ajouter

  20. Définissez l’événement prodView , en laissant les valeurs facultatives vides.

  21. Cliquez sur Conserver les modifications

    Définir les variables Analytics dans la règle PDP

  22. Cliquez sur Enregistrer dans la bibliothèque et créer

    Enregistrer la règle

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

  1. Ouvrez le site Luma dans votre navigateur Chrome.

  2. Accédez à une page de détails du produit.

  3. Cliquez sur l’icône Ouvrir l’Experience Cloud Debugger pour ouvrir votre débogueur Adobe Experience Cloud

  4. Cliquez sur l’onglet Analytics.

  5. Développez votre suite de rapports.

  6. 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 variable Events 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.

    Valider l’accès à la page

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

  1. Accédez à la section Rules dans le volet de navigation de gauche, puis cliquez sur Ajouter une règle
    Ajouter une règle

  2. Attribuez un nom à la règle Homepage - Featured Products enters Viewport.

  3. Cliquez sur Événements > Ajouter pour ouvrir l’écran Event Configuration.

    Ajouter une règle de produits phares

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

  5. Revenez à la page d’accueil de Luma et faites défiler l’écran jusqu’à la section Produits présentés .

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

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

  8. Cliquez avec le bouton droit sur cet élément et sélectionnez Copier > Copier le sélecteur

    Entre dans la fenêtre d’affichage

  9. Revenez aux balises et collez cette valeur du presse-papiers dans le champ intitulé Elements matching the CSS selector.

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

  10. Cliquez sur Conserver les modifications
    Entre dans la fenêtre d’affichage

  11. Sous Conditions, cliquez sur l’icône Plus pour ajouter une nouvelle condition.

  12. Sélectionnez Type de condition > Comparaison de valeurs

  13. Utilisez le sélecteur d’élément de données et sélectionnez Page Name dans le premier champ.

  14. Sélectionnez Equals dans la liste déroulante des opérateurs de comparaison.

  15. 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.)

  16. Cliquez sur Conserver les modifications

    Configurer la condition de la page d’accueil

  17. Sous Actions, cliquez sur l’icône Plus pour ajouter une nouvelle action.

  18. Sélectionnez Extension > Adobe Analytics

  19. Sélectionnez Type d’action > Définir des variables

  20. Définissez eVar3 sur Home Page - Featured Products.

  21. Définissez prop3 sur Home Page - Featured Products.

  22. Définissez la variable Events sur event3.

  23. Cliquez sur Conserver les modifications

    Entre dans la fenêtre d’affichage

  24. Sous Actions, cliquez sur l’icône Plus pour ajouter une nouvelle action.

  25. Sélectionnez Extension > Adobe Analytics

  26. Sélectionnez Type d’action > Envoyer la balise

  27. Choisissez l’option de suivi s.tl() .

  28. Dans le champ Nom du lien, saisissez Scrolled down to Featured Products. Cette valeur figurera dans le rapport Liens personnalisés dans Analytics.

  29. Cliquez sur Conserver les modifications

    Configurer la balise de produits phares

  30. Cliquez sur Enregistrer dans la bibliothèque et créer

    Enregistrer la règle 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.

  1. Ouvrez le site Luma dans votre navigateur Chrome et assurez-vous que vous êtes en haut de la page d’accueil.

  2. Cliquez sur l’ icône du débogueur pour ouvrir l’ ​ Experience Cloud Debugger ​

  3. Cliquez sur l’onglet Analytics.

  4. Développez l’accès à votre suite de rapports.

  5. 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).

    Debugger avec une page vue

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

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

    1. LinkType = "link_o" (cela signifie que l’accès est un accès à un lien personnalisé, et non un accès à la page vue).

    2. LinkName = "Scrolled down to Featured Products"

    3. prop3 = "Home Page - Featured Products"

    4. eVar3 = "Home Page - Featured Products"

    5. Events = "event3"

      Debugger avec une page vue