Configurar os eventos de início e fim da página no Web SDK
Ao fornecer experiências personalizadas, o tempo de carregamento de uma página da Web é essencial. Para minimizar o tempo que um usuário aguarda pelo conteúdo personalizado, o Web SDK é compatível com a configuração de 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:
- O evento da parte superior da página solicita personalização assim que a página começa a carregar.
- O evento da parte inferior da página registra uma exibição de página quando a página termina de carregar.
O Adobe Analytics ignora a parte superior dos eventos de página, o que resulta em métricas mais precisas de gravação, pois apenas uma ocorrência de página é registrada (a parte inferior do evento da página).
Você pode configurar os eventos na parte superior e inferior da página de duas maneiras: chamando a biblioteca JavaScript do Web SDK (alloy()) diretamente ou usando a extensão de tag do Web SDK na interface do usuário de tags do Adobe Experience Platform. A ação Send event da extensão de marca inclui uma opção 'Use guided events' que pré-configura valores de campo para os cenários 'Request personalization' (parte superior da página) e 'Collect analytics' (parte inferior da página). Cada exemplo abaixo mostra ambas as implementações.
Evento do início da página top-of-page
O exemplo abaixo configura um evento de início de página que solicita personalização, mas suprime eventos de exibição para apresentações renderizadas automaticamente. Esses eventos de exibição são enviados com o final do evento 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 |
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, você também pode configurar um filtro para soltar esses eventos. Consulte Tipos de evento do Edge Network no Adobe Analytics para obter mais informações. |
renderDecisions |
Obrigatório | Defina este parâmetro como true. Esse parâmetro informa ao Web SDK para renderizar as decisões retornadas pela Edge Network. |
personalization.sendDisplayEvent |
Obrigatório | Defina este parâmetro como false. Esse parâmetro interrompe o envio de eventos de exibição. |
Configure uma ação Send event na regra que é acionada na parte superior da página. Habilite Use guided events e selecione Request personalization. Esta opção bloqueia 'Type' para 'Decisioning Proposition Fetch', 'Render visual personalization decisions' para habilitado e 'Automatically send a display event' para desabilitado.
Para definir esses campos manualmente, deixe Use guided events desabilitado e configure cada campo você mesmo.
Exemplos de evento na parte inferior da página bottom-of-page
Proposições renderizadas automaticamente bottom-auto-rendered
O exemplo abaixo configura um evento de parte inferior da página que envia eventos de exibição para propostas que foram renderizadas automaticamente na página, mas suprimidas no evento parte superior da página.
| 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. Esse parâmetro permite o envio de eventos de exibição que foram suprimidos no início da página. |
xdm |
Opcional | Use esse objeto para incluir todos os dados desejados para o evento da parte inferior da página. |
Configure uma ação Send event na regra que é acionada na parte inferior da página. Habilite Use guided events e selecione Collect analytics. Esta opção bloqueia 'Include rendered propositions' para habilitado.
Para definir este campo manualmente, deixe Use guided events desabilitado e habilite Include rendered propositions diretamente. Opcionalmente, preencha o campo XDM com um elemento de dados objeto XDM que transporta os dados da página.
Proposições renderizadas manualmente bottom-manually-rendered
O exemplo abaixo configura um evento de parte inferior 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).
| 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 Gerenciar eventos de exibição para obter mais informações. O conteúdo de personalização renderizado manualmente deve ser incluído no final do evento da página. |
xdm._experience.decisioning.propositionEventType |
Obrigatório | Defina este parâmetro como display: 1. |
xdm |
Opcional | Use esse objeto para incluir todos os dados desejados para o evento da parte inferior da página. |
A opção 'Use guided events' não abrange esse cenário, portanto, configure a ação manualmente:
-
Crie um elemento de dados objeto XDM (ou Variável) que preencha
_experience.decisioning.propositionscom cadaid,scopeescopeDetailsde proposta renderizada e defina_experience.decisioning.propositionEventType.displaycomo1. Consulte Gerenciar eventos de exibição para obter mais informações. -
Na ação Send event da parte inferior da regra de página, deixe Use guided events desabilitado e faça referência ao elemento de dados do campo XDM.
Aplicativo de página única com eventos de parte superior e inferior da página spa-example
Em um aplicativo de página única, você deve especificar o nome da exibição em cada alteração de exibição para que o Web SDK renderize a personalização correta na parte superior da página e registre a exibição correta na parte inferior da página.
Primeira exibição de página spa-first-view
Neste exemplo, home é a exibição carregada no carregamento da página inicial.
A chamada superior solicita personalização para a exibição home sem gravar uma ocorrência do Analytics ou disparar eventos de exibição. A chamada inferior registra a exibição de página e aciona os eventos de exibição suprimidos. Inclua o mesmo viewName em ambas as chamadas para que a exibição seja registrada de forma consistente.
| code language-js |
|---|
|
-
Crie um elemento de dados objeto XDM que defina
web.webPageDetails.viewNamecomo o nome da exibição (por exemplo,home). -
Configure uma ação de início de página Send event: habilite Use guided events, selecione Request personalization e faça referência ao elemento de dados no campo XDM.
-
Configure uma parte inferior da ação Send event da página: habilite Use guided events, selecione Collect analytics e faça referência ao mesmo elemento de dados no campo XDM para que
viewNamecorresponda em ambos os eventos.
Segunda visualização de página — opção 1 spa-second-view-option-1
Neste exemplo, um único evento é suficiente porque a personalização da página já foi buscada.
| code language-js |
|---|
|
-
Crie um elemento de dados objeto XDM que defina
web.webPageDetails.viewNamecomo o nome da nova exibição (por exemplo,cart). -
Na alteração de exibição, configure uma única ação de Send event: deixe Use guided events desabilitado, habilite Render visual personalization decisions e referencie o elemento de dados no campo XDM.
Segunda visualização de página — opção 2 spa-second-view-option-2
Use essa abordagem quando precisar atrasar o evento da parte inferior da página (por exemplo, quando os dados de análise da página não estiverem prontos no momento da alteração de exibição). Manipule a alteração de exibição em duas etapas:
- Na parte superior da página, renderize as apresentações já buscadas sem fazer uma chamada de Edge Network.
- Quando os dados do Analytics estiverem prontos, envie o evento da parte inferior da página.
Inclua o mesmo viewName em ambas as chamadas para que a exibição seja registrada de forma consistente.
Chame applyPropositions na parte superior da página para renderizar as apresentações armazenadas em cache para a nova exibição. Em seguida, chame sendEvent na parte inferior da página com includeRenderedPropositions: true para que os eventos de exibição suprimidos sejam acionados.
| code language-js |
|---|
|
-
Crie um elemento de dados objeto XDM que defina
web.webPageDetails.viewNamecomo o nome da nova exibição (por exemplo,cart). -
Para o evento de início de página, configure uma ação Apply propositions e defina o campo View name como o nome da exibição (por exemplo,
cart). Essa ação renderiza as apresentações já buscadas sem entrar em contato com a Edge Network. -
Para o evento da parte inferior da página, configure uma ação Send event: habilite Use guided events, selecione Collect analytics e faça referência ao elemento de dados no campo XDM.
Amostra do GitHub github-sample
A amostra superior e inferior no repositório alloy-samples demonstra como solicitar personalização na parte superior da página e enviar métricas de análise na parte inferior. Baixe a amostra e execute-a localmente para ver como os eventos na parte superior e inferior da página funcionam. A amostra usa a biblioteca JavaScript diretamente; os mesmos padrões se aplicam quando você configura regras equivalentes na extensão de tag da Web SDK.