Validar implementações do SDK da Web 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 disponível para os navegadores Chrome e Firefox, que ajuda a visualizar a tecnologia de Adobe implementada nas páginas da Web. Baixe a versão do seu navegador de preferência:
Se você nunca usou o depurador 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 Edge Network da plataforma
- Ativar o Edge Trace para visualizar solicitações do lado do servidor enviadas pelo Edge Network da plataforma
Pré-requisitos
Você está familiarizado com as marcas da Coleção de dados e o site de demonstração Luma e concluiu as lições anteriores no tutorial:
Carregar bibliotecas de tags alternativas com o Debugger
O depurador de Experience Platform 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 você está com o site de demonstração do Luma aberto e selecione o ícone da extensão do Depurador do Experience Platform
-
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 e entre no Adobe Experience Cloud usando sua ID de Adobe.
-
Agora, vá para Experience Platform Tags 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 -
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 SDK da Web da Platform. 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 solicitações de rede do lado do cliente com o Experience Platform Debugger
Você pode usar o Debugger para validar os beacons do lado do cliente acionados a partir da implementação do SDK da Web da Platform para exibir os dados enviados para o Edge Network da Platform:
-
Vá para Resumo na navegação à esquerda para ver os detalhes da propriedade da marca
-
Agora, vá para Experience Platform Web SDK no painel de navegação esquerdo 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 inspecionarwebPageDetails.name,webPageDetails.serverewebPageDetails.siteSection. Eles devem corresponder àsdigitalDatavariáveis de camada de dados correspondentes na página inicial
digitalData 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
digitalDatae selecioneEnterno teclado para exibir os valores da camada de dados
Também é possível validar os detalhes do Mapa de identidade:
-
Faça logon no site Luma usando as credenciais
test@adobe.com/test -
Retorne à página inicial do Luma
-
Abra a seção Experience Platform Web SDK na navegação à esquerda
-
Selecione a linha eventos para abrir os detalhes em um pop-up
-
Procure por identityMap na janela pop-up. Aqui você deve ver
lumaCrmIdcom três chaves de authenticatedState, id e primary:
Validar solicitações do lado do cliente com ferramentas de desenvolvimento do navegador
Esses tipos de detalhes de solicitação 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 Resposta e observe como o valor da ECID é incluído na resposta.
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.
Validar solicitações de rede do lado do servidor com o Experience Platform Debugger
Conforme você aprendeu na lição Configurar uma sequência de dados, o SDK da Web da Platform envia dados da sua propriedade digital para o Platform Edge Network. Em seguida, o Platform Edge Network faz solicitações adicionais do lado do servidor para os serviços correspondentes ativados no fluxo de dados. Você pode validar as solicitações do lado do servidor feitas pelo Platform Edge Network usando o Edge Trace no Debugger.
Ativar o Edge Trace
Para ativar o Edge Trace:
-
Na navegação à esquerda de Experience Platform Debugger, selecione Logs
-
Selecione a guia Edge e selecione Conectar
-
Está vazio por enquanto
-
Atualize a página inicial do Luma e verifique o Experience Platform Debugger novamente para ver os dados aparecerem.
Nesse ponto, não é possível visualizar solicitações de Edge Network da Platform indo para aplicativos Adobe porque você não ativou nenhuma no fluxo de dados. Em lições futuras, use o Edge Trace para exibir as solicitações de saída do lado do servidor para o encaminhamento de aplicativos Adobe e eventos. Mas, primeiro, conheça outra ferramenta para validar as solicitações do lado do servidor feitas pelo Platform Edge Network — Adobe Experience Platform Assurance!