Configurar os eventos de início e fim da página no SDK da Web
Quando você quiser proporcionar experiências personalizadas aos seus clientes, o tempo de carregamento de uma página da Web é essencial.
Para otimizar os tempos de carregamento e fornecer personalização o mais rápido possível, o SDK da Web é compatível com a configuração dos eventos na parte superior e inferior da página.
Os eventos na parte superior e inferior da página descrevem um método de carregar de forma assíncrona vários elementos na página, mantendo o tempo de carregamento da página no mínimo.
Essa configuração minimiza o tempo que um usuário tem para esperar até que o conteúdo personalizado seja carregado.
Em termos de precisão das métricas, o Adobe Analytics pode ignorar os eventos de topo de página, o que resulta em métricas mais precisas de registro, já que apenas uma ocorrência de página é registrada (a parte inferior do evento da página).
Casos de uso use-cases
Um varejista de vestuário esportivo deseja oferecer experiências personalizadas aos seus compradores, minimizando o atrito do usuário ao visitar seu site, tudo isso enquanto consegue coletar com precisão as métricas do visitante.
Ao usar os eventos de parte superior e inferior da página no SDK da Web, a equipe de marketing pode configurar a entrega de personalização da melhor maneira:
- O SDK da Web envia uma solicitação de personalização que é carregada assim que a página começa a carregar. Este é um evento de início de página.
- Quando a página terminar de carregar, um evento de exibição de página será registrado. Isso acontece posteriormente no processo de carregamento da página. Este é um evento de fim de página.
Exemplo de evento do início da página top-of-page
A amostra de código abaixo exemplifica uma configuração de evento de topo de página que solicita personalização, mas não envia eventos de exibição para apresentações renderizadas automaticamente. Os eventos de exibição serão enviados como parte do evento de fim de página.
code language-js |
---|
|
table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
---|---|---|
Parâmetro | Obrigatório/Opcional | Descrição |
type |
Obrigatório | Defina este parâmetro como decisioning.propositionFetch . Esse tipo de evento especial instrui o Adobe Analytics a eliminar esse evento. Ao usar o Customer Journey Analytics, também é possível configurar um filtro para eliminar esses eventos. |
renderDecisions |
Obrigatório | Defina este parâmetro como true . Esse parâmetro informa ao SDK da Web para renderizar as decisões retornadas pelo Edge Network. |
personalization.sendDisplayEvent |
Obrigatório | Defina este parâmetro como false . Isso interrompe o envio de eventos de exibição. |
Exemplos de evento na parte inferior da página bottom-of-page
A amostra de código abaixo exemplifica uma configuração de evento na parte inferior da página, que envia eventos de exibição para propostas que foram renderizadas automaticamente na página, mas para as quais os eventos de exibição foram suprimidos no evento parte superior da página.
note note |
---|
NOTE |
Neste cenário, você deve chamar a parte inferior do evento da página após a parte superior da página um. No entanto, o evento de parte inferior da página não precisa aguardar até que a parte superior da página um seja concluída. |
code language-js |
---|
|
table 0-row-3 1-row-3 2-row-3 | ||
---|---|---|
Parâmetro | Obrigatório/Opcional | Descrição |
personalization.includeRenderedPropositions |
Obrigatório | Defina este parâmetro como true . Isso permite o envio de eventos de exibição que foram suprimidos no início da página. |
xdm |
Opcional | Use esta seção para incluir todos os dados necessários para o evento de fim de página. |
A amostra de código abaixo exemplifica uma parte inferior da configuração de evento da página, que envia eventos de exibição para propostas que foram renderizadas manualmente na página (ou seja, para escopos ou superfícies de decisão personalizados).
note note |
---|
NOTE |
Nesse cenário, o evento de parte inferior da página deve aguardar até que o evento de parte superior da página seja concluído para renderizar as propostas e registrar o evento de parte inferior da página. |
code language-js |
---|
|
table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
---|---|---|
Parâmetro | Obrigatório/Opcional | Descrição |
xdm._experience.decisioning.propositions |
Obrigatório | Esta seção define as apresentações renderizadas manualmente. Você deve incluir a proposta ID , scope e scopeDetails . Consulte a documentação sobre como renderizar manualmente a personalização para obter mais informações sobre como registrar eventos de exibição para conteúdo renderizado manualmente. A personalização renderizada manualmente deve ser incluída na parte inferior da ocorrência da página. |
xdm._experience.decisioning.propositionEventType |
Obrigatório | Defina este parâmetro como display: 1 . |
xdm |
Opcional | Use esta seção para incluir todos os dados necessários para o evento de fim de página. |
Aplicativo de página única com ocorrências de página superior e inferior spa-example
O exemplo abaixo inclui a adição do parâmetro xdm.web.webPageDetails.viewName
necessário. É isso que o torna um aplicativo de página única. O viewName
neste exemplo é o modo de exibição que é carregado no carregamento da página.
code language-js |
---|
|
Neste exemplo, não há necessidade de fazer uma divisão de página de cima/baixo porque a personalização da página já foi buscada.
code language-js |
---|
|
Se você ainda precisar atrasar a parte inferior da ocorrência da página, poderá usar applyPropositions
para a parte superior da ocorrência da página. Como nenhuma personalização precisa ser buscada e nenhum dado do Analytics precisa ser gravado, não há necessidade de fazer uma solicitação para o Edge Network.
code language-js |
---|
|
Amostra do GitHub github-sample
A amostra encontrada em este endereço demonstra como usar o Experience Platform e o SDK da Web para solicitar personalização na parte superior da página e enviar métricas de análise na parte inferior. Você pode baixar a amostra e executá-la localmente para entender como os eventos na parte superior e inferior da página funcionam.