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 Chrome 🔗 qui vous aide à voir la technologie Adobe mise en œuvre dans vos pages web. Experience Platform Debugger et la console de développement de votre navigateur sont les meilleurs moyens de valider et de déboguer les aspects côté navigateur de votre implémentation de Web SDK. Adobe Experience Platform Assurance, dont il sera question dans la leçon suivante, offre la meilleure vue des données lorsqu’elles entrent dans Platform Edge Network et en sortent.
Si vous n’avez jamais utilisé Debugger 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 web 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 web 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, connectez-vous à Adobe Experience Cloud à l’aide de votre Adobe ID, puis sélectionnez votre organisation.
note tip TIP Si le débogueur affiche votre nom d’utilisateur au lieu de votre nom d’organisation après s’être connecté, déconnectez-vous et réessayez. 
-
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
note tip TIP Si vous ne parvenez pas à sélectionner votre propriété et votre environnement à l’aide des listes déroulantes, accédez plutôt à Balises > Environnements > Développement > Installer et sélectionnez l’icône pour copier le code incorporé et le coller dans le débogueur :
-
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.
Validation avec Debugger
Valider les requêtes réseau et XDM
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 pour l’ouvrir et inspecter lewebPageDetails.name. Ils doivent correspondre aux variables de couche de donnéesadobeDataLayercorrespondantes sur la page d’accueil
adobeDataLayer 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
adobeDataLayeret sélectionnezEntersur le clavier pour afficher les valeurs de la couche de données
Validez les événements et les variables définis sur les pages de produits, la page de panier et la page de confirmation de commande.
Validation du mappage d’identités
Vous pouvez également valider les détails de la carte des identités :
-
Sélectionnez Sign In sur le site web Luma. Sélectionnez Create Account et créez un compte à l’aide des informations d’identification
test@test.com/test -
Utilisez le raccourci Aller au plus récent dans le débogueur pour accéder rapidement à l’événement Web SDK le plus récent (c’est la dernière colonne). Sélectionnez la ligne événements pour ouvrir la boîte de dialogue modale des détails.
-
Recherchez le identityMap dans la boîte de dialogue modale. Vous devriez voir ici
lumaCrmIdavec trois clés d’authenticatedState, d’id et de désignation principale :
Validation à l’aide des outils de développement du navigateur
De nombreux développeurs web peuvent préférer afficher l’implémentation dans les outils de développement de leur navigateur. Ceci est particulièrement important, car tous les navigateurs ne prennent pas en charge l’extension Debugger. En outre, en raison du cadre flexible, vous pouvez examiner d’autres détails d’implémentation, tels que les cookies et les détails de réponse.
Valider les requêtes réseau
Les détails de la requête Web SDK sont également visibles dans l’onglet Réseau des outils de développement web 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 Aperçu et notez comment la valeur ECID est incluse dans la réponse réseau.
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.
Cookies du SDK web
Pendant que nous sommes dans les outils de développement, jetons un coup d’œil à certains des ensembles de cookies de SDK web dans le navigateur. Ouvrez Application > Cookies > https://luma.enablementadobe.com .
Vous devriez voir plusieurs cookies définis par Web SDK :
- kndctr_[IMS_ORGID]_AdobeOrg_identity : stocke les données liées à l’ECID.
- kndctr_[IMS_ORGID]_AdobeOrg_cluster : stocke l’emplacement du centre de données utilisé pour que les appels réseau suivants soient acheminés vers les mêmes serveurs Edge
- AMCV_[IMS_ORGID]%40AdobeOrg : il s’agit de l’ancien cookie AMCV utilisé par les bibliothèques Experience Cloud SDK antérieures au Web. Il est défini, car nous avons laissé le paramètre par défaut Migrer l’ECID vers l’API Visiteur vers le SDK Web sélectionné dans l’extension Balises de Adobe Experience Platform Web SDK. Il est important d’activer ce paramètre lorsque vous migrez vos pages depuis d’anciennes bibliothèques vers Web SDK, mais il peut être désactivé une fois toutes vos pages migrées pendant un certain temps.
Si vous effacez ces cookies et rechargez la page, vous remarquerez peut-être d’autres cookies tiers définis sur le domaine .demdex.net. Ces paramètres sont définis, car nous avons laissé le paramètre par défaut Utiliser des cookies tiers : Activé dans l’extension de balises Adobe Experience Platform Web SDK. Si votre navigateur n’autorise pas les cookies tiers, ils seront supprimés lorsque vous rechargez la page.
Stockage local Luma
Le site web de démonstration Luma utilise uniquement des technologies côté client telles qu’HTML, CSS et JavaScript. Il n’existe aucun mécanisme de stockage principal, à l’exception de l’implémentation d’Experience Cloud utilisée par l’état par défaut du site web. Des informations telles que les détails du nom d’utilisateur sont simplement stockées localement dans votre navigateur à l’aide de localStorage. Ainsi, si vous supprimez ces informations ou utilisez une fenêtre d’analyseur, vous remarquerez que vous devrez peut-être recréer un compte utilisateur de test que vous avez créé précédemment.
Ensuite, découvrez comment valider ces requêtes réseau lorsqu’elles sont reçues et transmises à partir de Platform Edge Network à l’aide d’Adobe Experience Platform Assurance.