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

Sous Gestion des bibliothèques > Suites de rapports, saisissez les identifiants de suite de rapports à 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, entrez votre serveur de suivi, par exemple tmd.sc.omtrdc.net. Entrez votre serveur de suivi SSL si votre site prend en charge https://

Dans le Section Variables globales, sous Paramètres supplémentaires, définissez la variable Nom de la page en utilisant votre Page Name élément de données. 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 au Règles 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 la commande 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 l’Adobe Experience Cloud Debugger.

Assurez-vous que le débogueur mappe la propriété de balise à your Environnement de développement, comme décrit dans la section 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 Éléments de données 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.

Utilisation digitalData.page.category.type comme la propriété Nom de variable JavaScript

Vérifiez les Texte clair et Forcer la minuscule options

Cliquez sur Enregistrer dans la bibliothèque.

Cliquez sur Éléments de données 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.

Utilisation digitalData.product.0.productInfo.sku comme la propriété Nom de variable JavaScript

Vérifiez les Texte clair et Forcer la minuscule options

Cliquez sur Enregistrer dans la bibliothèque.

Accédez à la page Extensions > Catalogue.

Recherchez l’extension Adobe Analytics Product String créée par Adobe Consulting Services et cliquez sur Installer.

Prenez quelques instants pour lire les instructions.

Cliquez sur Enregistrer dans la bibliothèque.

Accédez au Règles 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 Commande sur 40, de telle 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 des valeurs.

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

3. Sélectionnez Contient 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 les s.products.

Dans la section Événement d’e-commerce 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 sélectionner 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éfinir comme 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 l’Adobe Experience Cloud Debugger.

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 au Règles 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 > Entre dans la fenêtre d’affichage. 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 des valeurs.

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

Sélectionnez Égal à 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 la s.tl() option de suivi

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

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.