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 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 Enviar evento da extensão de marca inclui uma opção ‘Usar eventos guiados’ que pré-configura valores de campo para os cenários ‘Solicitar personalização’ (parte superior da página) e ‘Coletar análise’ (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.

alloy("sendEvent", {
  type: "decisioning.propositionFetch",
  renderDecisions: true,
  personalization: {
    sendDisplayEvent: false
  }
});

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.

alloy("sendEvent", {
  personalization: {
    includeRenderedPropositions: true
  },
  xdm: { ... }
});

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).

alloy("sendEvent", {
  xdm: {
    ... // Optional bottom of page event data
    _experience: {
      decisioning: {
        propositions: propositions.map(function(p) {
          return {
            id: p.id,
            scope: p.scope,
            scopeDetails: p.scopeDetails
          };
        }),
        propositionEventType: {
          display: 1
        }
      }
    }
  }
});

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.

// Top of page, render decisions for the "home" view.
alloy("sendEvent", {
    type: "decisioning.propositionFetch",
    renderDecisions: true,
    personalization: {
        sendDisplayEvent: false
    },
    xdm: {
        web: {
            webPageDetails: {
                viewName: "home"
            }
        }
    }
});

// Bottom of page, send display events for the items that were rendered.
alloy("sendEvent", {
    personalization: {
        includeRenderedPropositions: true
    },
    xdm: {
        ...,
        web: {
            webPageDetails: {
                viewName: "home"
            }
        }
    }
});

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.

alloy("sendEvent", {
  renderDecisions: true,
  xdm: {
    ...,
    web: {
      webPageDetails: {
        viewName: "cart"
      }
    }
  }
});

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:

Inclua o mesmo viewName em ambas as chamadas para que a exibição seja registrada de forma consistente.

// Top of page, render the decisions already fetched for the "cart" view.
alloy("applyPropositions", {
    viewName: "cart"
});

// Bottom of page, send display events for the items that were rendered.
alloy("sendEvent", {
    personalization: {
        includeRenderedPropositions: true
    },
    xdm: {
        ...,
        web: {
            webPageDetails: {
                viewName: "cart"
            }
        }
    }
});

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.