Objectifs d’apprentissage
À la fin de cette leçon, vous pourrez utiliser le débogueur pour :
- Chargement d’une autre bibliothèque de balises
- Vérifiez que l’événement XDM côté client capture et envoie les données comme prévu à Platform Edge Network.
- Activez Edge Trace pour afficher les requêtes côté serveur envoyées par Platform Edge Network.
Conditions préalables
Vous connaissez les balises de la collecte de données et le site de démonstration Luma et avez terminé les leçons précédentes du tutoriel :
Chargement d’autres bibliothèques de balises avec Debugger
Experience Platform Debugger dispose d’une fonctionnalité pratique 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 s’ouvre et sélectionnez l’icône de l’extension Experience Platform Debugger
-
Le débogueur s’ouvre et affiche certains détails de l’implémentation en codage en dur (vous devrez peut-être recharger le site Luma après l’ouverture du débogueur)
-
Vérifiez que le débogueur est « connecté à Luma » comme illustré ci-dessous, puis sélectionnez l’icône « verrouiller » pour le verrouiller sur le site Luma.
-
Sélectionnez le bouton Se connecter et connectez-vous à Adobe Experience Cloud à l’aide de votre Adobe Id.
-
Accédez maintenant à Experience Platform Tags dans le volet de navigation de gauche
-
Sélectionnez l’onglet Configuration
-
À droite de l’emplacement où s’affiche le Codes incorporés de la page, ouvrez le menu déroulant Actions et sélectionnez Remplacer
-
Puisque vous êtes authentifié, le débogueur va extraire vos propriétés et environnements de balises disponibles. Sélectionnez votre propriété
-
Sélectionner votre environnement
Development
-
Sélectionnez le bouton Appliquer
-
Le site web Luma va maintenant se recharger avec votre propre propriété de balise.
Au fur et à mesure que vous poursuivez le tutoriel, vous utilisez cette technique de mappage du site Luma à votre propre propriété de balise pour valider votre implémentation de Platform Web SDK. Lors de l’utilisation de 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.
Valider les requêtes réseau côté client avec Experience Platform Debugger
Vous pouvez utiliser Debugger pour valider les balises côté client déclenchées à partir de votre implémentation de Platform Web SDK afin d’afficher les données envoyées à Platform Edge Network :
-
Accédez à Résumé dans le volet de navigation de gauche pour afficher les détails de votre propriété de balise
-
Accédez maintenant à Experience Platform Web SDK dans le volet de navigation de gauche pour afficher les Demandes réseau
-
Ouvrez la ligne events
-
Notez comment vous pouvez voir le type d’événement
web.webpagedetails.pageView
que vous avez spécifié dans votre action Mettre à jour la variable et d’autres variables prêtes à l’emploi appartenant au groupe de champsAEP Web SDK ExperienceEvent
-
Faites défiler l’écran jusqu’à l’objet
web
, sélectionnez-le pour l’ouvrir et inspecter leswebPageDetails.name
,webPageDetails.server
etwebPageDetails.siteSection
. Ils doivent correspondre aux variables de couche de donnéesdigitalData
correspondantes 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
F12
sur votre clavier - Sélectionnez l’onglet Console
- Saisissez
digitalData
et sélectionnezEnter
sur le clavier pour afficher les valeurs de la 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 informations d’identification
test@test.com
/test
-
Revenez à la page d’accueil de Luma.
-
Ouvrez la section Experience Platform Web SDK dans le volet de navigation de gauche
-
Sélectionnez la ligne événements pour ouvrir les détails dans un pop-up
-
Recherchez le identityMap dans le pop-up. Vous devriez voir ici
lumaCrmId
avec trois clés authenticatedState, id et primary :