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.

L’extension Experience Platform Debugger est disponible pour les navigateurs Chrome et Firefox, ce 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 la méthode Extension Adobe Experience Platform Debugger pour remplacer la propriété de balise codée en dur sur la propriété Site de démonstration Luma avec 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 development bibliothèque de balises. 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.
  • Activation d’Edge Trace pour afficher les requêtes côté serveur envoyées par l’Edge Network Platform

Conditions préalables

Vous connaissez bien les balises de collecte de données et la variable Site de démonstration Luma et avoir 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.

  1. Assurez-vous que la variable Site web de démonstration Luma ouvrez et sélectionnez l’icône de l’extension Debugger Experience Platform

  2. 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).

  3. Vérifiez que le débogueur est "Connexion à Luma" comme illustré ci-dessous, puis sélectionnez "lock" pour verrouiller le débogueur sur le site Luma.

  4. Sélectionnez la variable Se connecter et connectez-vous à Adobe Experience Cloud à l’aide de votre identifiant d’Adobe.

  5. Maintenant, accédez à Balises Experience Platform dans la navigation de gauche

    Écran de balise Debugger

  6. Sélectionnez la variable Configuration tab

  7. À droite de l’emplacement où il vous montre la variable Codes d’intégration de page, ouvrez le Actions , puis sélectionnez Remplacer

    Sélectionnez Actions > Remplacer .

  8. Puisque vous êtes authentifié, le débogueur va extraire vos propriétés et environnements de balise disponibles. Sélectionner votre propriété

  9. Sélectionnez votre Development environnement

  10. Sélectionnez la variable Appliquer button

    Sélectionnez la propriété de balise alternative.

  11. Le site web Luma est maintenant rechargé. avec votre propre propriété de balise.

    propriété de balise remplacée

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 :

  1. Accédez à Résumé dans le volet de navigation de gauche, pour afficher les détails de votre propriété de balise

    Onglet Résumé

  2. Maintenant, accédez à SDK Web Experience Platform dans le volet de navigation de gauche pour afficher la variable Requêtes réseau

  3. Ouvrez le events row

    Requête SDK Web Adobe Experience Platform

  4. Notez comment vous pouvez voir la variable web.webpagedetails.pageView type d’événement que vous avez spécifié dans votre Mettre à jour la variable , ainsi que d’autres variables prêtes à l’emploi conformes à la AEP Web SDK ExperienceEvent groupe de champs

    Détails de l’événement

  5. Faites défiler l’écran vers le bas jusqu’à web , sélectionnez pour l’ouvrir et examinez l’objet webPageDetails.name, webPageDetails.server, et webPageDetails.siteSection. Ils doivent correspondre au digitalData variables de couche de données sur la page d’accueil

TIP
Pour afficher et comparer le digitalData couche de données sur la page d’accueil :
  1. Sur la page d’accueil de Luma, ouvrez les outils de développement du navigateur. Dans le cas de Chrome, cliquez sur le bouton F12 sur votre clavier
  2. Sélectionnez la variable Console tab
  3. Entrée digitalData et sélectionnez Enter sur votre clavier pour afficher les valeurs de couche de données.

Onglet Réseau

Vous pouvez également valider les détails de la carte des identités :

  1. Connectez-vous au site Luma à l’aide des informations d’identification. test@adobe.com/test

  2. Revenez à la page d’accueil de Luma.

  3. Ouvrez le SDK Web Experience Platform dans la navigation de gauche

    SDK Web dans Debugger

  4. Sélectionnez la variable events pour ouvrir les détails dans une fenêtre contextuelle

    SDK Web dans Debugger

  5. Recherchez le identityMap dans la fenêtre contextuelle. Ici, vous devriez voir lumaCrmId avec trois clés authenticatedState, id et primary :
    SDK Web dans Debugger

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 les outils de développement web du navigateur. Réseau (en supposant que le site web charge votre bibliothèque de balises).

  1. Ouvrez les outils de développement web du navigateur. Réseau et rechargez la page. Filtrer les appels avec /ee pour localiser l’appel, sélectionnez-le, puis recherchez dans le En-têtes et Payload tab

    Onglet Réseau

  2. Accédez au Réponse et notez comment la valeur ECID est incluse dans la réponse.

    Onglet Réseau

    note note
    NOTE
    La valeur ECID est visible dans la réponse réseau. Elle n’est pas incluse dans la variable identityMap de la requête réseau, et elle n’est pas stockée 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 Configuration d’un flux de données leçon, 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 :

  1. Dans le volet de navigation de gauche de Débogueur Experience Platform select Journaux

  2. Sélectionnez la variable Edge et sélectionnez Connexion

    Connexion à Edge Trace

  3. Il est vide pour l’instant.

    Trace Edge connectée

  4. Actualisez la variable Page d’accueil Luma et vérifier Débogueur Experience Platform encore une fois, pour voir les données passer.

    Balise Analytics Edge Trace

À 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 futures, 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 !

Suivant :

NOTE
Merci d’avoir consacré du temps à l’apprentissage du SDK Web Adobe Experience Platform. Si vous avez des questions, souhaitez partager des commentaires généraux ou avez des suggestions sur le contenu futur, partagez-les à ce sujet. Article de discussion de la communauté Experience League
recommendation-more-help
8cbc0fd8-ca1d-433b-9c3d-bc3f113347d4