Ajout d’Adobe Analytics

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 :

1. Définir des variables
2. Effacer des variables
3. Envoyer la balise 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)

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

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

Cliquez sur Enregistrer dans la bibliothèque

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 pour ajouter une nouvelle action.

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

Ouvrez le site Luma dans votre navigateur Chrome.

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

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.

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

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

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

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 pour ouvrir l’écran Condition Configuration.

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

   

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

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 pour ajouter une nouvelle action.

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

Ouvrez le site Luma dans votre navigateur Chrome.

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

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

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

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.

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.

Cliquez sur Conserver les modifications

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

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 pour ajouter une nouvelle action.

Sélectionnez Extension > Adobe Analytics

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

Définissez eVar3 sur Home Page - Featured Products.

Définissez prop3 sur Home Page - Featured Products.

Définissez la variable Events sur event3.

Cliquez sur Conserver les modifications

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

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

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 pour ouvrir l’ ​ Experience Cloud Debugger ​

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 :

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"

   

Accédez à Extensions > Installées

Dans l’extension Adobe Analytics, cliquez sur Configurer

Sous Gestion des bibliothèques, sélectionnez la case intitulée Make tracker globally accessible. Comme vous pouvez le constater dans la bulle d’aide, le suivi sera maintenant inclus globalement dans la portée sous window.s, ce qui sera important lorsque vous y ferez référence dans le code JavaScript de votre client.

Pendant que vous êtes toujours dans l’extension Analytics, faites défiler l’écran vers le bas et développez la section intitulée Configure Tracker Using Custom Code.

Cliquez sur Ouvrir l’éditeur

Collez le code suivant dans l’éditeur de code :

/* Plugin Config */
s.usePlugins=true
s.doPlugins=function(s) {
/* Add calls to plugins here */
}

Laissez cette fenêtre ouverte pour l’étape suivante

Copiez le code suivant.

/* Adobe Consulting Plugin: getValOnce v2.01 */
s.getValOnce=function(vtc,cn,et,ep){if(vtc&&(cn=cn||"s_gvo",et=et||0,ep="m"===ep?6E4:864E5,vtc!==this.c_r(cn))){var e=new Date;e.setTime(e.getTime()+et*ep);this.c_w(cn,vtc,0===et?0:e);return vtc}return""};

Collez-le dans la fenêtre de code de l’extension Analytics (si vous ne l’avez pas encore ouvert, rouvrez-le comme indiqué à l’étape précédente), complètement sous la fonction doPlugins (et non à l’intérieur).

Copiez le code suivant :

s.campaign = s.Util.getQueryParam("cid");

Collez-le dans la fonction doPlugins. Cela lancera une recherche de paramètre appelé cid dans l’URL de la page actuelle et le placera dans la variable s.campaign.

Appelez la fonction getValOnce en copiant le code suivant et en le collant directement sous l’appel à getQueryParam :

s.campaign=s.getValOnce(s.campaign,'s_cmp',30);

Ce code s’assure que la même valeur n’est pas envoyée plus d’une fois de suite pendant 30 jours (consultez la documentation pour savoir comment personnaliser ce code selon vos besoins).

Enregistrez la fenêtre de code

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

Ouvrez le site Luma dans votre navigateur Chrome.

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

Cliquez sur l’onglet Analytics.

Développez votre suite de rapports.

Notez que l’accès à Analytics n’a pas de variable Campaign.

Laissez le débogueur ouvert, puis revenez au site Luma et ajoutez ?cid=1234 à l’URL. Appuyez ensuite sur Entrée pour actualiser la page en incluant cette chaîne de requête.

Vérifiez le débogueur et confirmez l’existence d’une seconde requête Analytics avec une variable Campaign définie sur 1234.

Revenez en arrière et actualisez à nouveau la page Luma, avec la chaîne de requête toujours dans l’URL.

Vérifiez l’accès suivant dans le débogueur. La variable Campagne ne doit pas être présente, car le module getValOnce s’est assuré qu’elle n’est pas dupliquée et qu’elle ne ressemble pas à une autre personne issue du code de suivi de campagne.

BONUS : vous pouvez le tester autant de fois que vous le souhaitez en modifiant la valeur du paramètre cid dans la chaîne de requête. La variable Campaign ne doit être présente qu’à condition qu’il existe une première exécution de la page avec la valeur. Si vous ne voyez pas la valeur Campaign dans le débogueur, modifiez simplement la valeur du cid dans la chaîne de requête de l’URL et appuyez sur Entrée pour la voir à nouveau dans le débogueur.