20.5 Configuration de l’intégration entre Stackchat et Adobe Experience Platform

Pour que Stackchat envoie et reçoive des événements de Adobe Experience Platform, vous devez créer et configurer une intégration dans Stackchat Studio. Avant de configurer l’intégration dans Stackchat Studio, vous devez avoir créé un projet Adobe I/O qui vous permet d’interagir avec les API Adobe Experience Platform.

20.5.1 Votre projet Adobe I/O existant

Dans le module 3, au cours de l'exercice 3.3.2 - Configurer votre projetAdobe I/O, vous avez créé votre propre projet Adobe I/O. Lorsque vous avez créé ce projet Adobe I/O, une paire de certificats a été créée. Vous devrez utiliser cette paire de certificats au cours de cet exercice. Si vous ne l'avez plus, suivez les étapes décrites dans l'exercice 3.3.2 - Configuration de votre projet Adobe I/O pour créer un nouveau projet ou simplement pour générer une nouvelle paire de certificats.

Dans les deux cas, vous devez disposer des fichiers suivants avant de continuer :

  • private.key
  • certificate_pub.crt

Ces fichiers ont été générés lors de la configuration de votre projet Adobe I/O et ont été automatiquement téléchargés sur votre ordinateur dans un fichier zip nommé config.zip.

De plus, vous devrez ouvrir votre projet Adobe I/O pour récupérer d’autres informations importantes de votre compte de service (JWT) , telles que l’ID client, la clé secrète client et bien plus encore.

Pour ce faire, rendez-vous sur https://console.adobe.io/projects. Vous verrez alors ceci.

Stackchat

Accédez à Projets dans le volet de navigation supérieur. Recherchez, puis ouvrez votre projet, qui doit être appelé ldap de l'API de plate-forme.

Stackchat

Après avoir ouvert votre projet, vous aurez une vue similaire. Cliquez sur Compte de service (JWT) pour vue les informations d’identification de votre projet Adobe I/O.

Stackchat

Vous verrez alors ceci. Gardez cet écran ouvert au cours des 2 prochaines étapes, car vous devrez entrer ces informations d’identification dans l’interface utilisateur de Stackchat Studio lors de la configuration de l’intégration.

Stackchat

20.5.2 Ajouter vos informations d’identification d’E/S Adobe dans Stackchat

Dans Stackchat Studio, cliquez sur Intégrations dans le menu de votre robot, puis Ajoutez Intégration dans le coin supérieur droit et

Intégration de Stackchat Adobe Experience Platform

Ensuite, sélectionnez Adobe Experience Platform dans la fenêtre modale :

Intégration de Stackchat Adobe Experience Platform

L’écran d’intégration Adobe Experience Platform vide s’affiche.

Intégration de Stackchat Adobe Experience Platform

Vous devez maintenant entrer des valeurs pour tous les champs de l’onglet Authentification.

Champs du compte de service JWT

Les champs ID client, Secret client, ID de compte technique et ID d’organisation IMS peuvent tous être renseignés en copiant/collant les valeurs du compte de service JWT à partir de cette page :

Stackchat

Après avoir rempli ces valeurs, vous devez maintenant disposer des éléments suivants :

Stackchat

Clé privée

Le champ Clé ​privée doit contenir le contenu entier du fichier private.key que vous avez généré dans le cadre de la configuration de votre projet Adobe I/O. Ouvrez private.key dans un éditeur de texte et copiez/collez l’intégralité du contenu dans la saisie de texte Clé privée.

Stackchat

Après avoir collé votre clé privée.key dans Stackchat Studio, vous devez maintenant disposer de ce qui suit :

Stackchat

ID de connexion

L’ID de connexion correspond à la dernière partie de l’ID d’entrée DCS, qui est déjà enregistrée dans votre ID de configuration ici. Mais pour vous enregistrer, votre ID d’entrée DCS est le suivant :

--dcsInletId--

Il vous suffit désormais de copier chaque caractère après le dernier / dans l’URL et de coller la valeur dans le champ ID de connexion de Stackchat Studio, dans cet exemple : 92b2eb1267c8fc7ee8b41a760a7d616714ca380b449d2d83e68adf692a0a28b1.

Cliquez ensuite sur Vérifier les informations d’identification.

Intégration de Stackchat Adobe Experience Platform

REMARQUE

Si vous obtenez une erreur non valide d’identification AEP, doublon vérifie que vous avez correctement copié/collé tout.

20.5.3 Configuration de sandbox, de Schémas et de jeux de données

Stackchat envoie deux types de événements à Adobe Experience Platform : événements de profil utilisateur et événements d’interaction comportementale. Chaque type de événement a besoin d'un schéma et d'un jeu de données spécifiques définis dans Adobe Experience Platform. Au cours de cette étape, vous indiquerez à Stackchat où il doit envoyer des données de profil et d'interaction dans votre sandbox Adobe Experience Platform.

Si vos informations d’identification à l’étape précédente sont correctes, vous serez automatiquement basculé vers l’onglet Routage de données. Cliquez sur Récupérer les sandbox.

Intégration de Stackchat Adobe Experience Platform

Une fois les sandbox récupérés, recherchez votre nom de sandbox et sélectionnez-le. Votre sandbox à utiliser est --aepSandboxId--. Dans cet exemple, le sandbox s’appelle AEP Enablement FY21.

Intégration de Stackchat Adobe Experience Platform

Patientez quelques secondes pendant le chargement de vos schémas et jeux de données. Une fois l’interface utilisateur chargée, sélectionnez les valeurs suivantes :

  • Schéma profil : Système de démonstration - Schéma de Profil pour Stackchat Chatbot (Global v1.1)
  • Schéma​événement : Système de démonstration - Schéma de Événement pour Stackchat Chatbot (Global v1.1)
  • Jeu de données profil : Système de démonstration - Jeu de données de Profil pour Stackchat Chatbot (Global v1.1)
  • Jeu de données​événement : Système de démonstration - Jeu de données de Événement pour Stackchat Chatbot (Global v1.1)

Cliquez maintenant sur Enregistrer la configuration pour passer à l’étape suivante.

Intégration de Stackchat Adobe Experience Platform

20.5.4 Mappage des Profils

Dans cet onglet, vous allez mapper vos emplacements Stackchat aux propriétés définies dans votre schéma Adobe Experience Platform. Vous verrez ceci :

Intégration de Stackchat Adobe Experience Platform

Le premier mappage à faire est le mappage requis pour l’identifiant Stackchat. Dans le menu Choisir un emplacement , sélectionnez ID ​utilisateur.

Intégration de Stackchat Adobe Experience Platform

Vous devez ensuite ajouter plusieurs mappages facultatifs. Voici un tableau des éléments à mapper en plus :

Nom de l'emplacement Mappage de schéma
ECID --aepTenantId--.identification.core.ecid
E-mail --aepTenantId--.identification.core.email
Prénom person.name.firstName
NpsScore --aepTenantId--.customerSatisfactionScore.score
Commentaires Nps --aepTenantId--.customerSatisfactionScore.feedback
NPSFeedbackText --aepTenantId--.customerSatisfactionScore.detailFeedback

Pour chacun des mappages, cliquez sur le bouton + pour ajouter un nouveau mappage.

Intégration de Stackchat Adobe Experience Platform

Par exemple, prenons le début en mappant l’ID d’Experience Cloud de l’utilisateur. Sélectionnez ECID dans le menu Choisir un emplacement .

Intégration de Stackchat Adobe Experience Platform

Tu te débrouilles bien ! Il vous suffit de répéter ce processus pour les emplacements suivants que vous avez créés dans l’ exercice 20.2.2. Les propriétés de schéma correspondantes sont toutes configurées pour vous.

Votre mappage final doit se présenter comme suit :

Intégration de Stackchat Adobe Experience Platform

Une fois tous mappés, cliquez sur Mettre à jour le mappage dans le coin supérieur droit.

20.5.5 Mappage des Événements

Dans cet onglet, vous mappez les emplacements Stackchat aux événements comportementaux que Stackchat envoie à Adobe Experience Platform. Le Schéma que vous avez sélectionné à l’étape 20.5.2 (Demo System - Événement Schéma for Stackchat Chatbot (Global v1.1)) comporte un --aepTenantId--.chatbotInteraction mixin qui sera automatiquement renseigné par Stackchat avec des informations telles que le flux de conversation dans lequel se trouve l’utilisateur ou lorsqu’une fonction de cloud est exécutée. Votre seule tâche ici est de mapper les emplacements d'identification afin que Adobe Experience Platform puisse attribuer ce comportement à l'utilisateur correct.

Ajoutez les mappages suivants dans l’onglet Mappage des Événements.

Nom de l'emplacement Mappage de schéma
ID utilisateur --aepTenantId--.identification.core.stackchatId
ECID --aepTenantId--.identification.core.ecid
E-mail --aepTenantId--.identification.core.email

Votre mappage final doit se présenter comme suit :

Intégration de Stackchat Adobe Experience Platform

Une fois tous mappés, cliquez sur Mettre à jour le mappage dans le coin supérieur droit.

20.5.5 Envoi de Événements de Vue de produits à Adobe Experience Platform

Dans certains cas, vous souhaitez envoyer des événements à Adobe Experience Platform en plus du profil utilisateur et des événements comportementaux que Stackchat envoie automatiquement. Dans ce cas, vous pouvez envoyer ces événements spéciaux à Adobe Experience Platform par l'intermédiaire d'une fonction Stackchat Cloud.

Dans cette section, nous configurerons votre bot Luma pour envoyer des événements d'identification de l' utilisateur Adobe Experience Platform lorsque nous capturerons une adresse électronique et des événements de Vue ​de produit lorsque l'utilisateur touchera le bouton ❤️ d'une carte de produit donnée.

Intégration de Stackchat Adobe Experience Platform

Le bouton ❤️ est déjà configuré en tant que bouton 🔗 postback, ce qui signifie qu’il appelle une fonction cloud lorsque l’utilisateur clique dessus. Le bouton ❤️ est configuré pour appeler la fonction cloud notificationAEPOfProductView et transmet une charge utile qui ressemble à ceci :

{
  name: result.name,
  imageUrl: result.image1.url,
  price: result.finalPrice,
  sku: result.SKU,
  pageUrl: BASE_PRODUCT_URL + result.productUrl
}

La méthode notificationAEPOfProductView est déjà configurée pour construire un événement de Vue de produits Adobe Experience Platform à partir de cette charge utile, mais elle doit connaître l'identifiant de la Vue de produits / Schéma d'identification de l'utilisateur à partir de votre sandbox Adobe Experience Platform.

Retournez à votre environnement de code Visual Studio et ouvrez le fichier _constantes.ts.

VSC

Vous devez maintenant mettre à jour ces trois lignes de code :

export const CUSTOM_EVENT_SCHEMA_ID = 'XXXX';   // For "product viewed" and "user identified" events
...
export const CUSTOM_EVENT_DATASET_ID = 'XXXX';
export const CUSTOM_EVENT_ORCHESTRATION_EVENT_ID = 'XXXX';

CUSTOM_ÉVÉNEMENT_SCHÉMA_ID

Vous pouvez obtenir l'ID CUSTOM_ÉVÉNEMENT_SCHÉMA_ID en ouvrant l'interface utilisateur de Adobe Experience Platform, en accédant à la page Schémas et en recherchant Demo System - Événement Schéma for Stackchat Chatbot (Global v1.1) et en cliquant sur pour ouvrir le schéma.

VSC

Pour obtenir l’identifiant de schéma, copiez-le à partir de l’URL ; il s’agit du numéro long à la fin de la chaîne de requête, par exemple fa8b21f33509e8ab9d5139b53652b61ec2b18dcea1388888889. 411.

VSC

Copiez l'identifiant de schéma et collez-le dans ce champ du fichier _constants.ts :

export const CUSTOM_EVENT_SCHEMA_ID = 'fa8b21f33509e8ab9d5139b53652b61ec2b18dcea1388411';

Votre fichier _constants.ts doit maintenant ressembler à ceci :

VSC

CUSTOM_ÉVÉNEMENT_DATASET_ID

Maintenant faisons la même chose pour le jeu de données. Affichez l'interface utilisateur de Adobe Experience Platform, ouvrez la page Datasets et recherchez Demo System - Événement Dataset for Stackchat Chatbot (Global v1.1) et cliquez sur le résultat du jeu de données.

Copiez l'ID de jeu de données de l'étiquette sur la droite et collez-le dans ce champ du fichier _constants.ts :

VSC

export const CUSTOM_EVENT_DATASET_ID = 'paste-your-value-here';

Votre fichier _constants.ts doit maintenant ressembler à ceci :

VSC

CUSTOM_ÉVÉNEMENT_ORCHESTRATION_ÉVÉNEMENT_ID

Un dernier point restant : votre ID de Journey Orchestration de l'étape précédente ! Dans 20.4, utilisez Journey Orchestration pour déclencher un suivi de courriel après avoir interagi avec votre chatbot que vous avez créé votre propre événement en Journey Orchestration. Copiez l’ID d’événement d’orchestration que vous avez créé et collez-le dans ce champ du fichier _constants.ts .

Vous pouvez trouver l’ID d’événement d’orchestration ici :

ACOP

Dans cet exemple, l’ID d’événement d’orchestration est bacd25051c871367b0e2d5e4a1af292c6b716673faf85aad776de0e010e0e0d0d88. 8a

export const CUSTOM_EVENT_ORCHESTRATION_EVENT_ID = 'XXXX';

Votre fichier _constants.ts doit maintenant ressembler à ceci. Enregistrez vos modifications dans le fichier _constants.ts.

VSC

Vous êtes toutes prêtes ! Maintenant, nous avons juste besoin de compiler votre code et de mettre à jour vos fonctions de cloud dans Stackchat Studio.

Tout d'abord, ouvrez un terminal (Vue -> Terminal).

vs_terminal-open

Un panneau s'ouvre alors au bas de la fenêtre Code VS.

REMARQUE

Assurez-vous de travailler dans le bon répertoire. Pour les étapes suivantes, nous devrons travailler dans le répertoire /cloud-features (fonctionsde cloud). Pour confirmer ce type de pwd (répertoire de travail d'impression) dans le terminal et appuyez sur Entrée. Si le chemin d’accès imprimé se termine par des fonctions ​/cloud, vous êtes tous définis, si vous n’essayez pas d’exécuter les fonctions de cloud cd pour définir le répertoire approprié. Maintenant, réexécutez pwd, vous devriez maintenant voir la fin du chemin avec des fonctions /cloud.

Créez vos fonctions de cloud en exécutant la commande suivante dans le terminal : npm run build et appuyez sur enter.

vs_terminal-open

Ceci génère un dossier appelé ./dist qui contiendra un seul fichier appelé cloud-features.js.

vs-dist-cloud-fonctions

Ouvrez le fichier cloud-features.js, copiez tout et collez-le dans votre éditeur de fonctions de cloud dans Stackchat Studio, en remplaçant le code actuel, puis cliquez sur le bouton Enregistrer .

ui_cloud-features-update

Super boulot, tu es presque là ! Appuyez sur le bouton Publier en bas de la barre de navigation gauche et entonnez une chanson nostalgique pendant que vous attendez que votre Luma Bot publie.

Intégration de Stackchat Adobe Experience Platform

Une fois la publication du robot terminée, ouvrez le widget de discussion et envoyez le message /réinitialisez pour effacer votre session de discussion et votre début.

démo

Vous verrez alors ceci. Donnez votre nom et cliquez sur Envoyer.

démo

Ensuite, sélectionnez l'option de menu J'ai besoin d'idées .

démo

Vous verrez alors ceci. Cliquez sur Oui.

démo

Indiquez ensuite votre adresse électronique.

démo

Confirmez votre adresse électronique en cliquant sur Oui.

démo

Vous verrez alors que les produits Luma sont affichés à l'intérieur du chatbot.

démo

Ensuite, cliquez sur le bouton ❤️ de quelques produits pour générer des événements affichés sur les produits et déclencher votre voyage en Journey Orchestration.

Quelques secondes plus tard, vous recevrez un courriel de Adobe Experience Platform et d'un Journey Orchestration avec une promotion pour l'article que vous venez de aimer.

démo

REMARQUE

Vous remarquerez que si vous répétez maintenant le flux J'ai besoin d'idées , Luma Bot se souviendra des produits que vous aimiez et les affichera comme une recommandation. Pour ce faire, il récupère le produit de l’utilisateur affiché dans les événements Adobe Experience Platform.

La prochaine question dans le chatbot est si vous voulez donner des commentaires sur votre expérience de chat. Cliquez sur Bien sûr.

démo

Faites votre choix, dans ce cas le choix est Grand.

démo

Cliquez sur Heureux à !

démo

Donnez vos commentaires supplémentaires détaillés et cliquez sur Envoyer.

démo

Vérifions maintenant l'assimilation des données dans le Profil client en temps réel Adobe Experience Platform.

Accédez à https://platform.adobe.com et accédez au Profil. Click the + Browse button. Vous verrez alors ceci :

démo

Sélectionnez l’Espace de nommage ​d’identité - Courriel et entrez l’adresse électronique que vous avez envoyée dans la conversation de chat Stackchat. Cliquez sur Vue , puis sur l’ID de Profil de votre profil.

démo

Vous verrez ensuite un aperçu de base de votre profil client à Adobe Experience Platform. Accédez à Attributs.

démo

Dans Attributes, vous verrez des choses comme votre score NPS et des commentaires détaillés. Va aux Événements.

démo

Dans les Événements, vous verrez toutes les interactions qui ont eu lieu. Si vous cliquez sur le bouton Vue JSON , vous pouvez voir encore plus de détails, comme dans ce cas, tous les détails autour du événement de vue du produit sur le produit Nadia Elements Shell.

démo

Si vous avez reçu votre courrier électronique et que vous avez pu visualiser votre profil à Adobe Experience Platform, votre intégration avec Stackchat fonctionne correctement et vous pouvez poursuivre l'exercice suivant.

Étape suivante : 20.6 Testez votre chatbot sur le site Web de démonstration.

Revenir au module 20

Revenir à tous les modules

Sur cette page