Validar implementações do Web SDK com o Experience Platform Debugger
Saiba como validar a implementação do SDK da web da Adobe Experience Platform com o Adobe Experience Platform Debugger.
O Experience Platform Debugger é uma extensão do Chrome que ajuda a visualizar a tecnologia Adobe implementada nas suas páginas da Web. O Experience Platform Debugger e o console do desenvolvedor do navegador são as melhores maneiras de validar e depurar os aspectos do lado do navegador da implementação do Web SDK. O Adobe Experience Platform Assurance, abordado na próxima lição, fornece a melhor visualização dos dados à medida que eles entram e saem do Platform Edge Network.
Se você nunca usou o Debugger antes, assista a este vídeo de visão geral de cinco minutos:
Nesta lição, você usa a extensão do Adobe Experience Platform Debugger para substituir a propriedade de tag codificada no site de demonstração Luma com sua própria propriedade.
Essa técnica é chamada de alternação de ambiente e será útil posteriormente, ao trabalhar com tags em seu próprio site. Ele permite carregar o site de produção em seu navegador, mas com sua biblioteca de tags de desenvolvimento. Essa capacidade permite fazer e validar de forma segura as alterações nas tags independentemente das suas versões de código normais. Afinal, essa separação das versões de tag de marketing das versões regulares de código é um dos principais motivos pelos quais os clientes usam tags!
Objetivos de aprendizagem
No final desta lição, você poderá usar o depurador para:
- Carregar uma biblioteca de tags alternativa
- Validar se o evento XDM do lado do cliente está capturando e enviando dados conforme esperado para o Platform Edge Network
- Ativar o Edge Trace para exibir solicitações do lado do servidor enviadas pelo Platform Edge Network
Pré-requisitos
Você está familiarizado com as tags de Coleção de dados e o site de demonstração do Luma e concluiu as lições anteriores no tutorial:
Carregar bibliotecas de tags alternativas com o Debugger
O Experience Platform Debugger tem um recurso interessante que permite substituir uma biblioteca de tags existente por outra. Essa técnica é útil para validação e permite ignorar muitas etapas de implementação neste tutorial.
-
Verifique se o site de demonstração do Luma está aberto e selecione o ícone da extensão do Experience Platform Debugger
-
O Debugger abrirá e mostrará alguns detalhes da implementação codificada (talvez seja necessário recarregar o site Luma depois de abrir o Debugger)
-
Confirme se o Depurador está "Conectado ao Luma", como mostrado abaixo, e selecione o ícone "bloquear" para bloquear o Depurador no site Luma.
-
Selecione o botão Entrar, entre no Adobe Experience Cloud usando sua Adobe ID e selecione sua Organização.
note tip TIP Se o depurador exibir seu nome de usuário em vez do nome da organização depois de entrar, saia e tente novamente. 
-
Agora, vá para Tags do Experience Platform no painel de navegação esquerdo
-
Selecione a guia Configuração
-
À direita do local onde ele mostra os Códigos incorporados de página, abra a lista suspensa Ações e selecione Substituir
-
Como você está autenticado, o Debugger extrairá suas propriedades e ambientes de tag disponíveis. Selecione sua propriedade
-
Selecione seu ambiente
Development
note tip TIP Se você não conseguir selecionar sua propriedade e ambiente usando os menus suspensos, vá para Marcas > Ambientes > Desenvolvimento > Instalar e selecione o ícone para copiar o código incorporado e colá-lo no Depurador:
-
Selecione o botão Aplicar
-
O site Luma recarregará agora com sua própria propriedade de tag.
À medida que você prossegue no tutorial, usa essa técnica de mapear o site Luma para sua própria propriedade de tag para validar a implementação do Platform Web SDK. Ao usar tags em seu próprio site, você pode usar essa mesma técnica para validar bibliotecas de tags de desenvolvimento em seu site de produção.
Validar com o Debugger
Validar solicitações de rede e XDM
Você pode usar o Debugger para validar beacons do lado do cliente acionados a partir da implementação do Platform Web SDK para exibir os dados enviados para o Platform Edge Network:
-
Vá para Resumo na navegação à esquerda para ver os detalhes da propriedade da marca
-
Agora, vá para Experience Platform Web SDK na navegação à esquerda para ver as Solicitações de Rede
-
Abrir a linha eventos
-
Observe como você pode ver o tipo de evento
web.webPageDetails.pageViewespecificado na ação Atualizar variável e outras variáveis prontas para uso que seguem o grupo de camposAEP Web SDK ExperienceEvent
-
Role para baixo até o objeto
web, selecione para abri-lo e inspecionar owebPageDetails.name. Eles devem corresponder àsadobeDataLayervariáveis de camada de dados correspondentes na página inicial
adobeDataLayer na página inicial:- Na página inicial do Luma, abra as ferramentas de desenvolvedor do navegador. No caso do Chrome, selecione o botão
F12no teclado - Selecione a guia Console
- Digite
adobeDataLayere selecioneEnterno teclado para exibir os valores da camada de dados
Valide os eventos e as variáveis definidos nas páginas do produto, no carrinho e na página de confirmação de pedido.
Validar mapa de identidade
Também é possível validar os detalhes do Mapa de identidade:
-
Selecione Sign In no site Luma. Selecione Create Account e crie uma conta usando as credenciais
test@test.com/test -
Use o atalho Ir para o mais recente no Depurador para ir rapidamente para o evento mais recente do Web SDK (é a última coluna). Selecione a linha eventos para abrir a modal de detalhes.
-
Pesquise por identityMap no modal. Aqui você deve ver
lumaCrmIdcom três chaves de authenticatedState, id e designação primária:
Validar com as ferramentas do desenvolvedor do navegador
Muitos desenvolvedores da Web podem preferir visualizar a implementação nas ferramentas do desenvolvedor do navegador. Isso é especialmente importante, pois nem todos os navegadores são compatíveis com a extensão Debugger. Além disso, devido à estrutura flexível, há detalhes adicionais de implementação que você pode inspecionar, como cookies e detalhes de resposta.
Validar solicitações de rede
Os detalhes da solicitação do Web SDK também estão visíveis na guia Rede das ferramentas de desenvolvedor da Web do navegador (supondo que o site esteja carregando sua biblioteca de marcas).
-
Abra a guia Rede das ferramentas de desenvolvedor da Web do navegador e recarregue a página. Filtrar chamadas com
/eepara localizar a chamada, selecioná-la e procurar na guia Cabeçalhos e na guia Carga
-
Vá para a guia Preview e observe como o valor da ECID é incluído na resposta da rede.
note note NOTE O valor da ECID está visível na resposta da rede. Ela não está incluída na parte identityMapda solicitação de rede, nem está armazenada nesse formato em um cookie.
Cookies do SDK da Web
Enquanto estivermos nas ferramentas do desenvolvedor, vamos dar uma olhada em alguns dos conjuntos de cookies do Web SDK no navegador. Abra Aplicativo > Cookies > https://luma.enablementadobe.com
Você deve ver vários cookies definidos pelo Web SDK:
- kndctr_[IMS_ORGID]_AdobeOrg_identity: armazena dados relacionados à ECID
- kndctr_[IMS_ORGID]_AdobeOrg_cluster: armazena o local do data center usado para que as chamadas de rede subsequentes sejam roteadas para os mesmos servidores da Edge
- AMCV_[IMS_ORGID]%40AdobeOrg: este é o cookie AMCV herdado usado pelas bibliotecas Experience Cloud pré-Web SDK e está definido porque deixamos a configuração padrão Migrar ECID para VisitorAPI para a SDK da Web selecionada na extensão de tags Adobe Experience Platform Web SDK. Essa configuração é importante ter sido ativada durante a migração das páginas de bibliotecas mais antigas para o Web SDK, mas pode ser desativada depois que todas as páginas forem migradas por um determinado período.
Se você limpar esses cookies e recarregar a página, poderá notar alguns cookies adicionais de terceiros definidos no domínio .demdex.net. Eles foram definidos porque deixamos a configuração padrão Usar cookies de terceiros: Habilitada na extensão de marcas do Adobe Experience Platform Web SDK. Se o navegador não permitir cookies de terceiros, eles serão removidos quando você recarregar a página.
Armazenamento local da Luma
O site de demonstração Luma usa tecnologias estritamente do lado do cliente, como HTML, CSS e JavaScript. Não há mecanismos de armazenamento de back-end, além da implementação do Experience Cloud usada pelo estado padrão do site. Informações como detalhes de nome de usuário são armazenadas localmente em seu navegador usando o localStorage. Portanto, se você excluir essas informações ou usar uma janela de incognitor, você notará que talvez precise recriar uma conta de usuário de teste criada anteriormente.
Em seguida, saiba como validar essas solicitações de rede quando elas são recebidas e transmitidas do Platform Edge Network usando o Adobe Experience Platform Assurance!