Valider les implémentations de Web SDK avec Experience Platform Debugger
Découvrez comment valider votre implémentation du SDK web d’Adobe Experience Platform avec Adobe Experience Platform Debugger.
Experience Platform Debugger est une extension disponible pour les navigateurs Chrome et Firefox, qui vous permet de voir la technologie Adobe mise en œuvre dans vos pages web. Téléchargez la version correspondant au navigateur de votre choix :
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 allez utiliser l’extension 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 commutation d’environnement, s’avérera utile ultérieurement, lorsque vous utiliserez les 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 de développement. Cette fonctionnalité vous permet d’effectuer et de valider en toute confiance les modifications de balises indépendamment de vos versions de code standard. Après tout, cette séparation entre les versions de balises marketing et les versions de code standard est l’une des principales raisons pour lesquelles les clients utilisent les balises.
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.pageViewque 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.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 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@adobe.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
lumaCrmIdavec trois clés authenticatedState, id et primary :
Valider les requêtes côté client avec les outils de développement du navigateur
Ces types de détails de requête sont également visibles dans l’onglet Outils de développement web Réseau du navigateur (en supposant que le site web charge votre bibliothèque de balises).
-
Ouvrez l’onglet Outils de développement web Réseau du navigateur et rechargez la page. Filtrez les appels avec des
/eepour localiser l’appel, sélectionnez-le, puis recherchez les onglets En-têtes et 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 n’est pas non plus stocké dans ce format dans un cookie.
Valider les requêtes réseau côté serveur avec Experience Platform Debugger
Comme vous l’avez appris dans la leçon Configurer un flux de données, Platform Web SDK envoie d’abord les données de votre propriété numérique vers Platform Edge Network. Ensuite, Platform Edge Network effectue des requêtes côté serveur supplémentaires vers les services correspondants activés dans votre flux de données. Vous pouvez valider les requêtes côté serveur effectuées par Platform Edge Network à l’aide d’Edge Trace dans le débogueur.
Activer Edge Trace
Pour activer Edge Trace :
-
Dans le volet de navigation de gauche de Experience Platform Debugger sélectionnez Journaux
-
Sélectionnez l’onglet Edge, puis sélectionnez Se connecter
-
Il est vide pour l'instant
-
Actualisez la page d’accueil Luma et vérifiez à nouveau Experience Platform Debugger pour voir les données passer.
À ce stade, vous ne pouvez pas afficher de requêtes Platform Edge Network destinées aux applications Adobe, car vous n’en avez activé aucune dans le flux de données. Dans les leçons ultérieures, vous utiliserez Edge Trace pour afficher les requêtes côté serveur sortantes pour les applications Adobe et le transfert d’événement. Mais d’abord, découvrez un autre outil permettant de valider les requêtes côté serveur effectuées par Platform Edge Network : Adobe Experience Platform Assurance !