20.5 Configurar a integração entre o Stackchat e o Adobe Experience Platform

Para que o Stackchat envie e receba eventos da Adobe Experience Platform, é necessário criar e configurar uma integração no Stackchat Studio. Antes de configurar a integração no Stackchat Studio, você precisa ter criado um projeto da Adobe I/O que permita interagir com as APIs da Adobe Experience Platform.

20.5.1 Seu projeto Adobe I/O existente

No módulo 3, durante o exercício 3.3.2 - Configurar seu Adobe I/O Project, você criou seu próprio projeto Adobe I/O. Quando você criou esse projeto do Adobe I/O, um par de certificados foi criado. Você precisará usar esse par de certificados durante este exercício. Se não tiver mais, siga as etapas descritas no exercício 3.3.2 - Configure seu Adobe I/O Project para criar um novo projeto ou simplesmente para gerar um novo par de certificados.

De qualquer forma, antes de continuar, é necessário ter esses arquivos prontos:

  • private.key
  • certificate_pub.crt

Elas foram geradas durante a configuração do seu projeto Adobe I/O e foram baixadas automaticamente para o computador em um arquivo zip chamado config.zip.

Além disso, você precisará abrir seu projeto da Adobe I/O para recuperar outras informações importantes da sua conta de serviço (JWT) , como ID do cliente, segredo do cliente e muito mais.

Para isso, acesse https://console.adobe.io/projects. Você verá isso.

Stackchat

Vá para Projetos na navegação superior. Procure e abra seu projeto, que deve ser chamado de ldap da API de plataforma.

Stackchat

Depois de abrir seu projeto, você terá uma visualização semelhante. Clique em Conta de serviço (JWT) para visualização das credenciais do seu projeto Adobe I/O.

Stackchat

Você verá isso. Mantenha essa tela aberta durante as próximas 2 etapas, pois será necessário inserir essas credenciais na interface do usuário do Stackchat Studio ao configurar a integração.

Stackchat

20.5.2 Adicionar suas credenciais de E/S de Adobe no Stackchat

No Stackchat Studio, clique em Integrações no menu do seu robô e, em seguida, em Adicionar integração no canto superior direito e

Integração do Stackchat Adobe Experience Platform

Em seguida, escolha Adobe Experience Platform na janela modal:

Integração do Stackchat Adobe Experience Platform

Agora você verá a tela vazia de integração do Adobe Experience Platform.

Integração do Stackchat Adobe Experience Platform

Agora é necessário inserir valores para todos os campos na guia Autenticação.

Campos de conta do serviço JWT

Os campos ID do cliente, Segredo do cliente, ID da conta técnica e ID de empresa IMS podem ser preenchidos copiando/colando os valores da conta de serviço JWT desta página:

Stackchat

Depois de preencher esses valores, você deve ter:

Stackchat

Chave de privacidade

O campo Chave ​privada deve conter todo o conteúdo do arquivo private.key que você gerou como parte da configuração do seu Adobe I/O Project. Abra private.key em um editor de texto e copie/cole todo o conteúdo na entrada de texto Chave privada.

Stackchat

Depois de colar o private.key no Stackchat Studio, você deve ter o seguinte:

Stackchat

ID da conexão

A ID de conexão é a última parte da ID de entrada do DCS, que já está salva na ID de configuração aqui. Mas para salvar o clique, sua ID de entrada do DCS é a seguinte:

--dcsInletId--

Agora, basta copiar cada caractere após o final / no URL e colar o valor no campo ID de conexão no Stackchat Studio, neste exemplo: 92b2eb1267c8fc7ee8b41a760a7d616714ca380b449d2d83e68adf692a0a28b1.

Em seguida, clique em Verificar credenciais.

Integração do Stackchat Adobe Experience Platform

OBSERVAÇÃO

Se você receber um erro de credenciais ​AEP inválidas, verifique se você copiou/colou tudo corretamente no duplo.

20.5.3 Configurar o Sandbox, Schemas e conjuntos de dados

O Stackchat envia dois tipos de eventos para a Adobe Experience Platform: eventos de perfil do usuário e eventos de interação comportamental. Cada tipo de evento precisa de um schema dedicado e um conjunto de dados definidos no Adobe Experience Platform. Nesta etapa, você dirá ao Stackchat onde ele deve enviar dados de perfil e interação na sua caixa de proteção do Adobe Experience Platform.

Se suas credenciais na etapa anterior estiverem corretas, você será alternado automaticamente para a guia Roteamento ​de dados. Clique em Buscar caixas de proteção.

Integração do Stackchat Adobe Experience Platform

Depois de buscar as caixas de proteção, procure o nome da caixa de proteção e selecione-a. Sua caixa de areia para usar é --aepSandboxId--. Neste exemplo, a caixa de proteção é chamada de Ativação AEP FY21.

Integração do Stackchat Adobe Experience Platform

Aguarde alguns segundos enquanto seus schemas e conjuntos de dados são carregados. Depois que a interface do usuário tiver sido carregada, selecione os seguintes valores:

  • Schema do perfil: Sistema de demonstração - Schema do Perfil para Stackchat Chatbot (Global v1.1)
  • Schema do evento: Sistema de demonstração - Schema do Evento para Stackchat Chatbot (Global v1.1)
  • Conjunto de dados do perfil: Sistema de demonstração - Conjunto de dados do Perfil para Stackchat Chatbot (Global v1.1)
  • Conjunto de dados do evento: Sistema de demonstração - Conjunto de dados do Evento para Stackchat Chatbot (Global v1.1)

Agora, pressione Save configuration (Salvar configuração ) para que você possa ir para a próxima etapa.

Integração do Stackchat Adobe Experience Platform

Mapeamento de Perfis 20.5.4

Nesta próxima guia, você mapeará seus slots do Stackchat para as propriedades definidas no schema Adobe Experience Platform. Você verá isto:

Integração do Stackchat Adobe Experience Platform

O primeiro mapeamento a ser feito é o mapeamento necessário para a ID do Stackchat. No menu Escolher um slot , selecione Id do usuário.

Integração do Stackchat Adobe Experience Platform

Em seguida, é necessário adicionar vários mapeamentos opcionais. Aqui está uma tabela do que mapear adicionalmente:

Nome do slot Mapeamento do esquema
ECID --aepTenantId--.identification.core.ecid
Email --aepTenantId--.identification.core.email
FirstName person.name.firstName
NpsScore --aepTenantId--.customerSatisfactionScore.score
NpsFeedback --aepTenantId--.customerSatisfactionScore.feedback
NPSFeedbackText --aepTenantId--.customerSatisfactionScore.detailFeedback

Para cada mapeamento, clique no botão + para adicionar um novo mapeamento.

Integração do Stackchat Adobe Experience Platform

Como exemplo, vamos fazer um start mapeando a ID de Experience Cloud do usuário. Selecione ECID no menu Escolher um slot .

Integração do Stackchat Adobe Experience Platform

Você está indo muito bem! Agora, repita esse processo para os seguintes slots criados no exercício 20.2.2. Todos eles terão as propriedades de schema correspondentes configuradas para você.

Seu mapeamento final deve ser semelhante a:

Integração do Stackchat Adobe Experience Platform

Quando todos estiverem mapeados, pressione Atualizar mapeamento no canto superior direito.

Mapeamento de Eventos 20.5.5

Nesta guia, você mapeará os slots do Stackchat para os eventos comportamentais que o Stackchat envia para a Adobe Experience Platform. O Schema selecionado na etapa 20.5.2 (Sistema de demonstração - Schema de Evento para Chatbot Stackchat (Global v1.1)) tem um --aepTenantId--.chatbotInteraction mixin que será automaticamente preenchido pelo Stackchat com informações como o fluxo de conversação em que o usuário está ou quando uma função de nuvem é executada. Seu único trabalho aqui é mapear os slots de identificação para que a Adobe Experience Platform possa atribuir esse comportamento ao usuário correto.

Adicione os seguintes mapeamentos na guia Mapeamento de Eventos.

Nome do slot Mapeamento do esquema
ID do usuário --aepTenantId--.identification.core.stackchatId
ECID --aepTenantId--.identification.core.ecid
Email --aepTenantId--.identification.core.email

Seu mapeamento final deve ser semelhante a:

Integração do Stackchat Adobe Experience Platform

Quando todos estiverem mapeados, pressione Atualizar mapeamento no canto superior direito.

20.5.5 Envio de Eventos de Visualização de produto para a Adobe Experience Platform

Haverá situações em que você deseja enviar eventos para a Adobe Experience Platform, além do perfil do usuário e dos eventos comportamentais que o Stackchat envia automaticamente. Quando essa situação ocorrer, você poderá enviar esses eventos de caso especial para a Adobe Experience Platform por meio de uma função da nuvem Stackchat.

Nesta seção, configuraremos seu Luma Bot para enviar eventos identificados pelo usuário da Adobe Experience Platform quando capturarmos um endereço de email e eventos de Visualização do produto quando o usuário clicar no botão ❤️ de um determinado cartão de produto.

Integração do Stackchat Adobe Experience Platform

O botão ❤️ já está configurado como um botão de postback, o que significa que ele chamará uma função de nuvem quando o usuário clicar nele. O botão ❤️ é configurado para chamar a função de nuvem NotificationAEPOfProductView e passa em uma carga semelhante a:

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

O método NotificationAEPOfProductView já está configurado para construir um evento de Visualização de produto da Adobe Experience Platform a partir dessa carga, mas precisa saber a ID da Visualização de produto/Schema identificado pelo usuário da sua caixa de proteção Adobe Experience Platform.

Retorne ao seu ambiente de código do Visual Studio e abra o arquivo _constantes.ts.

VSC

Agora é necessário atualizar essas três linhas de código:

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_EVENTO_SCHEMA_ID

Você pode obter a ID CUSTOM_EVENTO_SCHEMA_ID abrindo a interface do usuário do Adobe Experience Platform, indo para a página de Schemas e procurando pelo Sistema de demonstração - Schema do Evento para Stackchat Chatbot (Global v1.1) e clicando para abrir o schema.

VSC

Para obter a id do schema, copie-a do URL - é o número longo no final da string do query, por exemplo, fa8b21f33509e8ab9d5139b53652b61ec2b18dcea13888 411.

VSC

Copie a ID do schema e cole-a neste campo no arquivo _constantes.ts :

export const CUSTOM_EVENT_SCHEMA_ID = 'fa8b21f33509e8ab9d5139b53652b61ec2b18dcea1388411';

Seu arquivo _constantes.ts agora deve ter a seguinte aparência:

VSC

CUSTOM_EVENTO_DATASET_ID

Agora vamos fazer o mesmo com o conjunto de dados. Abra a interface do usuário do Adobe Experience Platform, abra a página Conjuntos de dados e procure Sistema de demonstração - Conjunto de dados do Evento para Stackchat Chatbot (Global v1.1) e clique no resultado do conjunto de dados resultante.

Copie a ID do conjunto de dados do rótulo à direita e cole-a nesse campo no arquivo _constantes.ts :

VSC

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

Seu arquivo _constantes.ts agora deve ter a seguinte aparência:

VSC

CUSTOM_EVENTO_ORCHESTRATION_EVENTO_ID

Um último item restante: sua ID de Journey Orchestration da etapa anterior! Na versão 20.4, use o Journey Orchestration para acionar um e-mail de acompanhamento após interagir com seu chatbot , você criou seu próprio evento no Journey Orchestration. Copie o eventID de orquestração criado e cole-o neste campo no arquivo _constantes.ts .

Você pode encontrar a ID de evento de orquestração aqui:

ACOP

Neste exemplo, a orquestration eventID é bacd25051c871367b0e2d5e4a1af292c6b716673faf85aad776de0e010e0d8 8-A

export const CUSTOM_EVENT_ORCHESTRATION_EVENT_ID = 'XXXX';

Seu arquivo _constantes.ts agora deve ser semelhante a este. Salve as alterações no arquivo _constantes.ts

VSC

Vocês estão prontos! Agora precisamos apenas compilar seu código e atualizar suas funções de nuvem no Stackchat Studio.

Primeiro, abra um terminal (Visualização -> Terminal).

vs_terminal-open

Isso abrirá um painel na parte inferior da janela Código VS.

OBSERVAÇÃO

Verifique se você está trabalhando no diretório correto. Para as etapas a seguir, precisaremos trabalhar no diretório /funções de nuvem. Para confirmar esse tipo de pwd (diretório de trabalho de impressão) no terminal e pressione enter. Se o caminho que é impresso terminar com funções de /nuvem, então todos estão definidos, se não tentar executar funções de nuvem de cd para definir o diretório correto. Agora, execute novamente o pwd, agora você deve ver o caminho terminar com funções de/nuvem.

Crie suas funções de nuvem executando o seguinte comando no terminal: npm execute build e pressione enter.

vs_terminal-open

Isso gerará uma pasta chamada ./dist que conterá um único arquivo chamado cloud-functions.js.

vs-dist-cloud-functions

Abra o arquivo cloud-functions.js, copie tudo e cole-o no editor de função de nuvem no Stackchat Studio, substituindo o código atual e pressione o botão Salvar .

ui_cloud-functions-updates

Ótimo trabalho, você está quase lá! Pressione o botão Publicar na parte inferior da navegação à esquerda e cantarilhe uma melodia nostálgica enquanto espera a publicação do seu Luma Bot.

Integração do Stackchat Adobe Experience Platform

Depois que o robô terminar de publicar, abra o widget de bate-papo e envie a mensagem /redefina para limpar a sessão de bate-papo e o start.

demonstração

Você verá isso. Dê seu nome e clique em Enviar.

demonstração

Em seguida, selecione o item de menu Preciso de ideias .

demonstração

Você verá isso. Clique em Sim.

demonstração

Em seguida, forneça seu endereço de email.

demonstração

Confirme seu endereço de email clicando em Sim.

demonstração

Você verá que os produtos Luma são exibidos no chatbot.

demonstração

Em seguida, pressione o botão ❤️ em alguns produtos para gerar eventos visualizados de produtos e para acionar sua jornada no Journey Orchestration.

Alguns segundos depois, você deve receber um email da Adobe Experience Platform e do Journey Orchestration com uma promoção para o item que acabou de gostar.

demonstração

OBSERVAÇÃO

Você notará que se você repetir o fluxo de ideias que eu preciso, o Luma Bot se lembrará dos produtos que você já gostava e os exibirá como uma recomendação. Ele faz isso buscando os eventos visualizados do produto do usuário na Adobe Experience Platform.

A próxima questão no chatbot é se você se importa em dar feedback sobre a sua experiência de bate-papo. Clique em Sure (Claro).

demonstração

Faça sua escolha, neste caso a escolha é ótima.

demonstração

Clique em Happy to!

demonstração

Dê seus comentários detalhados adicionais e clique em Enviar.

demonstração

Vamos verificar a ingestão de dados no Perfil do cliente em tempo real da Adobe Experience Platform agora.

Vá para https://platform.adobe.com e navegue até o Perfil. Click the + Browse button. Você verá isso:

demonstração

Selecione a Namespace de identidade - Email e insira o endereço de email enviado na conversa de bate-papo Stackchat. Clique em Visualização e, em seguida, clique na ID do Perfil do perfil.

demonstração

Em seguida, você verá uma visão geral básica do perfil do cliente na Adobe Experience Platform. Ir para Atributos.

demonstração

Em Atributos, você verá coisas como sua pontuação do NPS e feedback detalhado. Vá para Eventos.

demonstração

Em Eventos, você verá todas as interações que ocorreram. Se você clicar no botão JSON de Visualização , poderá ver mais detalhes, como neste caso, todos os detalhes sobre o evento de visualização do produto no produto Nadia Elements Shell.

demonstração

Se você recebeu seu email e conseguiu visualizar seu perfil no Adobe Experience Platform, sua integração com o Stackchat está funcionando bem e você pode continuar com o próximo exercício.

Próxima etapa: 20.6 Teste seu chatbot no site de demonstração

Voltar ao módulo 20

Voltar para todos os módulos

Nesta página