Validation des mises en oeuvre du SDK Web avec le débogueur Experience Platform
Découvrez comment valider votre implémentation du SDK web d’Adobe Experience Platform avec Adobe Experience Platform Debugger.
Le débogueur Experience Platform est une extension disponible pour les navigateurs Chrome et Firefox, qui vous permet de voir la technologie d’Adobe mise en oeuvre dans vos pages web. Téléchargez la version de votre navigateur préféré :
Si vous n’avez jamais utilisé le débogueur auparavant, vous pouvez regarder cette vidéo de présentation de cinq minutes :
Dans cette leçon, vous utilisez l’ extension d’Adobe Experience Platform Debugger pour remplacer la propriété de balise codée en dur sur le site de démonstration Luma par votre propre propriété.
Cette technique, appelée changement d’environnement, vous sera utile ultérieurement lorsque vous utiliserez des balises sur votre propre site web. Il vous permet de charger votre site web de production dans votre navigateur, mais avec votre bibliothèque de balises development. Cette fonctionnalité vous permet d’effectuer et de valider des modifications de balises en toute confiance, indépendamment de vos mises à jour de code standard. Après tout, cette séparation entre les mises à jour de balises marketing et les mises à jour de code standard est l’une des principales raisons pour lesquelles les clients utilisent des balises en premier lieu !
Objectifs d'apprentissage
À la fin de cette leçon, vous pourrez utiliser le débogueur pour :
- Chargement d’une autre bibliothèque de balises
- Validez que l’événement XDM côté client capture et envoie des données comme prévu à Platform Edge Network.
- Activer Edge Trace pour afficher les requêtes côté serveur envoyées par Platform Edge Network
Conditions préalables
Vous connaissez les balises de collecte de données et le site de démonstration Luma et avez terminé les leçons précédentes du tutoriel :
Chargement de bibliothèques de balises alternatives avec Debugger
Le débogueur Experience Platform dispose d’une fonctionnalité intéressante qui vous permet de remplacer une bibliothèque de balises existante par une autre. Cette technique est utile pour la validation et nous permet d’ignorer de nombreuses étapes d’implémentation dans ce tutoriel.
-
Assurez-vous que le site web de démonstration Luma est ouvert et sélectionnez l’icône de l’extension Debugger Experience Platform.
-
Le débogueur s’ouvre et affiche des détails sur l’implémentation codée en dur (vous devrez peut-être recharger le site Luma après avoir ouvert le débogueur).
-
Vérifiez que le débogueur est "Connecté à Luma" comme illustré ci-dessous, puis sélectionnez l’icône "lock" pour verrouiller le débogueur sur le site Luma.
-
Sélectionnez le bouton Se connecter et connectez-vous à Adobe Experience Cloud à l’aide de votre identifiant d’Adobe.
-
Maintenant, accédez à Balises Experience Platform dans le volet de navigation de gauche.
-
Sélectionnez l’onglet Configuration
-
À droite de l’emplacement où vous voyez les codes incorporés de page, ouvrez la liste déroulante Actions et sélectionnez Remplacer.
-
Puisque vous êtes authentifié, le débogueur va extraire vos propriétés et environnements de balise disponibles. Sélectionner votre propriété
-
Sélectionner votre environnement
Development -
Sélectionnez le bouton Appliquer
-
Le site web Luma va maintenant recharger avec votre propre propriété de balise.
Au fur et à mesure que vous continuez le tutoriel, vous utilisez cette technique pour mapper le site Luma sur votre propre propriété de balise afin de valider votre mise en oeuvre du SDK Web Platform. Lorsque vous utilisez des balises sur votre propre site web, vous pouvez utiliser cette même technique pour valider les bibliothèques de balises de développement sur votre site web de production.
Validation des requêtes réseau côté client avec le débogueur Experience Platform
Vous pouvez utiliser le débogueur pour valider les balises côté client déclenchées à partir de votre mise en oeuvre du SDK Web Platform pour afficher les données envoyées à l’Edge Network Platform :
-
Accédez à Summary dans le volet de navigation de gauche pour afficher les détails de votre propriété de balise.
-
Maintenant, accédez à SDK Web Experience Platform dans le volet de navigation de gauche pour afficher les requêtes réseau
-
Ouvrez la ligne events .
-
Notez comment vous pouvez voir le type d’événement
web.webpagedetails.pageViewque vous avez spécifié dans votre action Mettre à jour la variable, ainsi que d’autres variables prêtes à l’emploi conformes au groupe de champsAEP Web SDK ExperienceEvent.
-
Faites défiler l’écran jusqu’à l’objet
web, sélectionnez-le pour l’ouvrir et inspectez leswebPageDetails.name,webPageDetails.serveretwebPageDetails.siteSection. Ils doivent correspondre aux variables de couche de donnéesdigitalDatacorrespondantes sur la page d’accueil.
digitalData sur la page d’accueil :- Sur la page d’accueil de Luma, ouvrez les outils de développement du navigateur. Dans le cas de Chrome, sélectionnez le bouton
F12sur votre clavier. - Sélectionnez l’onglet Console
- Saisissez
digitalDataet sélectionnezEntersur votre clavier pour afficher les valeurs de couche de données.
Vous pouvez également valider les détails de la carte des identités :
-
Connectez-vous au site Luma à l’aide des identifiants
test@adobe.com/test -
Revenez à la page d’accueil de Luma.
-
Ouvrez la section SDK Web Experience Platform dans le volet de navigation de gauche.
-
Sélectionnez la ligne events pour ouvrir les détails dans une fenêtre contextuelle.
-
Recherchez identityMap dans la fenêtre contextuelle. Ici, vous devriez voir
lumaCrmIdavec trois clés de authenticatedState, id et primary :
Validation des requêtes côté client à l’aide des outils de développement de navigateur
Ces types de détails de requête sont également visibles dans l’onglet des outils de développement web Réseau du navigateur (en supposant que le site web charge votre bibliothèque de balises).
-
Ouvrez l’onglet Réseau des outils de développement web du navigateur et rechargez la page. Filtrez les appels avec
/eepour localiser l’appel, sélectionnez-le, puis recherchez dans l’onglet En-têtes et l’onglet Payload.
-
Accédez à l’onglet Réponse et notez comment la valeur ECID est incluse dans la réponse.
note note NOTE La valeur ECID est visible dans la réponse réseau. Il n’est pas inclus dans la partie identityMapde la requête réseau et il n’est pas stocké dans ce format dans un cookie.
Validation des requêtes réseau côté serveur avec le débogueur Experience Platform
Comme vous l’avez appris dans la leçon Configuration d’un flux de données, le SDK Web Platform envoie d’abord des données de votre propriété numérique à l’Edge Network Platform. Ensuite, Platform Edge Network envoie des requêtes supplémentaires côté serveur aux services correspondants activés dans votre flux de données. Vous pouvez valider les requêtes côté serveur effectuées par l’Edge Network Platform à l’aide d’Edge Trace dans le débogueur.
Activation d’Edge Trace
Pour activer Edge Trace :
-
Dans le volet de navigation de gauche de Experience Platform Debugger, sélectionnez Logs
-
Sélectionnez l’onglet Edge et sélectionnez Connect
-
Il est vide pour l’instant.
-
Actualisez la page d’accueil Luma et vérifiez à nouveau Débogueur Experience Platform pour voir les données passer.
À ce stade, vous ne pouvez pas afficher les requêtes de l’Edge Network Platform qui vont vers les applications Adobe, car vous n’en avez activé aucune dans le flux de données. Dans les leçons à venir, vous utiliserez Edge Trace pour afficher les requêtes sortantes côté serveur pour Adobe des applications et du transfert d’événement. Mais tout d’abord, découvrez un autre outil pour valider les requêtes côté serveur effectuées par l’Edge Network Platform—Adobe Experience Platform Assurance !