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.

  1. Assurez-vous que le site web de démonstration Luma s’ouvre et sélectionnez l’icône de l’extension Experience Platform Debugger

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

  3. 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.

  4. Sélectionnez le bouton Se connecter et connectez-vous à Adobe Experience Cloud à l’aide de votre Adobe Id.

  5. Accédez maintenant à Experience Platform Tags dans le volet de navigation de gauche

    Écran de balise du débogueur

  6. Sélectionnez l’onglet Configuration

  7. À droite de l’emplacement où s’affiche le Codes incorporés de la page, ouvrez le menu déroulant Actions et sélectionnez Remplacer

    Sélectionnez Actions > Remplacer

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

  9. Sélectionner votre environnement Development

  10. Sélectionnez le bouton Appliquer

    Sélectionnez la propriété de balise alternative

  11. Le site web Luma va maintenant se recharger avec votre propre propriété de balise.

    propriété de balise remplacée

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 :

  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. Accédez maintenant à Experience Platform Web SDK dans le volet de navigation de gauche pour afficher les Demandes réseau

  3. Ouvrez la ligne events

    Requête Adobe Experience Platform Web SDK

  4. 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 champs AEP Web SDK ExperienceEvent

    Détails de l’événement

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

TIP
Pour afficher et comparer la couche de données digitalData 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, sélectionnez le bouton F12 sur votre clavier
  2. Sélectionnez l’onglet Console
  3. Saisissez digitalData et sélectionnez Enter sur le clavier pour afficher les valeurs de la 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@test.com/test

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

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

    Web SDK dans Debugger

  4. Sélectionnez la ligne événements pour ouvrir les détails dans un pop-up

    Web SDK dans Debugger

  5. Recherchez le identityMap dans le pop-up. Vous devriez voir ici lumaCrmId avec trois clés authenticatedState, id et primary :
    Web SDK dans Debugger