Implementação do aplicativo de página única
Os sites tradicionais funcionavam em modelos de navegação de "página para página", conhecidos como Aplicativos de várias páginas, em que os designs de site eram totalmente combinados com URLs e as transições de uma página da Web para outra exigiam um carregamento de página. Aplicativos da Web modernos, como Aplicativos de página única (SPAs), em vez disso adotam um modelo que impulsiona o uso rápido da renderização da interface do usuário do navegador, que geralmente é independente dos recarregamentos de página. Essas experiências são frequentemente acionadas por interações do cliente, como rolagens, cliques e movimentos de cursor. À medida que os paradigmas da Web moderna evoluíram, a relevância dos eventos genéricos tradicionais, como o carregamento de página, para implantar a personalização e a experimentação não funciona mais.
A at.js 2.x fornece recursos avançados para a sua empresa personalizar tecnologias de próxima geração no lado do cliente. O foco dessa versão é melhorar o at.js para fazer interações harmoniosas com SPAs.
Estes são alguns benefícios do uso da at.js 2.x que não estão disponíveis nas versões anteriores:
- Capacidade de armazenar em cache todas as ofertas no carregamento da página para reduzir várias chamadas do servidor a uma única chamada de servidor.
- Melhore bastante as experiências dos usuários finais em seu site, pois as ofertas são mostradas imediatamente pelo cache, sem o tempo de atraso introduzido pelas chamadas do servidor tradicional.
- Uma linha de código simples e uma configuração de desenvolvedor única para permitir que seus profissionais de marketing criem e executem atividades A/B e Direcionamento de experiência (XT) por meio do VEC em seu SPA.
Adobe Target Exibições e Aplicativos de Página Única
O VEC do Adobe Target para SPA aproveita um novo conceito chamado Exibições: um grupo lógico de elementos visuais que juntos constituem uma experiência de SPA. Por isso, uma SPA pode ser considerada como uma transição entre exibições, em vez das URLs, com base nas interações do usuário. Uma Exibição geralmente pode representar um site inteiro ou elementos visuais agrupados dentro de um site.
Para explicar mais sobre o que são Exibições, vamos navegar neste site de comércio eletrônico online hipotético implementado no React e explorar alguns exemplos de Exibições. Clique nos links abaixo para abrir este site em uma nova aba do navegador.
Link: Site Residencial
Quando navegamos para o site inicial, podemos visualizar imediatamente uma imagem principal que promove uma venda de Páscoa e os produtos mais recentes que estão sendo vendidos no site. Nesse caso, uma Exibição pode ser definida como todo o site inicial. Isso é útil para observar como expandiremos mais isso na seção Implementação de Adobe Target Exibições abaixo.
Link: Site do Produto
À medida que nos interessamos mais pelos produtos que a empresa está vendendo, decidimos clicar no link Produtos. Assim como o site inicial, a totalidade do site de produtos pode ser definida como uma Exibição. É possível nomear os "produtos" dessa exibição como o nome do caminho em https://target.enablementadobe.com/react/demo/#/products)
.
No início desta seção, definimos Exibições como o site inteiro ou até mesmo um grupo de elementos visuais no site. Como mostrado acima, os quatro produtos mostrados no site também podem ser agrupados e considerados como uma Exibição. Se quisermos nomear essa Exibição, podemos chamá-la de "Produtos".
Decidimos clicar no botão Carregar mais para explorar mais produtos no site. Nesse caso, o URL do site não é alterado. Entretanto, uma Exibição aqui pode representar apenas a segunda linha de produtos mostrados acima. O nome da Exibição pode ser chamado de "PRODUCTS-PAGE-2".
Link: Check-out
Como curtimos alguns produtos mostrados no site, decidimos comprar alguns deles. Agora, no site de checkout, recebemos algumas opções para escolher a entrega normal ou a expressa. Como uma Exibição pode ser qualquer grupo de elementos visuais em um site, podemos nomeá-la como "Exibir preferências de entrega".
Além disso, o conceito de Exibições pode ser estendido muito além disso. Se os profissionais de marketing quiserem personalizar o conteúdo no site, dependendo da preferência de entrega selecionada, é possível criar uma exibição para cada preferência de entrega. Nesse caso, quando selecionamos Entrega normal, a Exibição pode se chamar "Entrega normal". Se a opção Express Delivery estiver selecionada, a Exibição pode se chamar "Entrega expressa".
Agora, os profissionais de marketing podem executar um teste A/B para ver se a alteração da cor de azul para vermelho, quando a opção Entrega expressa é selecionada, pode aumentar as conversões, em vez de manter a cor do botão azul para ambas as opções de entrega.
Implementando Adobe Target Exibições
Agora que cobrimos o que são Exibições do Adobe Target, podemos aproveitar esse conceito no Target para que os profissionais de marketing executem testes A/B e XT no SPA por meio do VEC. Isso exigirá uma configuração de desenvolvedor única. Vamos analisar as etapas de configuração.
-
Instale o at.js 2.x.
Primeiro, precisamos instalar o at.js 2.x. Essa versão da at.js foi desenvolvida com o SPA em mente. As versões anteriores da at.js não oferecem suporte a Adobe Target Exibições e ao VEC para SPA.
Baixe o at.js 2.x por meio da interface do usuário Adobe Target localizada em Administration > Implementation. at.js 2.x também pode ser implantado por meio de marcas em Adobe Experience Platform.
-
Implemente o at.js 2.Função x,
[triggerView()](https://experienceleague.adobe.com/docs/target-dev/developer/client-side/at-js-implementation/functions-overview/adobe-target-triggerview-atjs-2.html?lang=pt-BR)
em seus sites.Depois de definir as Exibições do SPA onde você deseja executar um teste A/B ou XT, implemente o at.js 2.Função x
triggerView()
com os Modos de Exibição passados como parâmetro. Isso permite que os profissionais de marketing usem o VEC para projetar e executar os testes A/B e XT para essas Exibições definidas. Se a funçãotriggerView()
não estiver definida para essas Exibições, o VEC não detectará as Exibições e, portanto, os profissionais de marketing não poderão usar o VEC para projetar e executar testes A/B.note note NOTE Para suporte de exibição no at.js, viewsEnabled deve ser definido como verdadeiro, caso contrário, todas as funcionalidades de exibição serão desabilitadas. adobe.target.triggerView(viewName, options)
table 0-row-5 1-row-5 2-row-5 3-row-5 Parâmetro Tipo Obrigatório? Validação Descrição viewName String Sim 1. Sem espaços à direita.
2. Não pode estar em branco.
3. O nome da exibição deve ser exclusivo para todas as páginas.
4. Aviso: O nome da Exibição não deve iniciar ou terminar com '/
'. Isso ocorre porque o cliente normalmente extrai o nome da Exibição do caminho do URL. Para nós, "home" e "/home
" são diferentes.
5. Aviso: A mesma exibição não deve ser acionada consecutivamente várias vezes com a opção{page: true}
.Transmita qualquer nome como um tipo de sequência de caracteres que você deseja representar sua exibição. Esse nome de exibição é mostrado no painel Modifications do VEC para que os profissionais de marketing criem ações e executem suas atividades A/B e XT. opções Objeto Não opções > página Booleano Não TRUE: O valor padrão da página é true. Quando page=true
, as notificações serão enviadas aos servidores Edge para aumentar a contagem de impressões.
FALSE: quandopage=false
, as notificações não serão enviadas para aumentar a contagem de impressões. Isso deve ser usado quando você deseja apenas renderizar novamente um componente em uma página com uma oferta.Agora vamos analisar alguns exemplos de casos de uso de como invocar a função
triggerView()
no React para nosso SPA hipotético de comércio eletrônico:Link: Site Residencial
Como profissionais de marketing, se desejarmos executar testes A/B em todo o site inicial, talvez queiramos nomear a exibição "inicial":
function targetView() {
var viewName = window.location.hash; // or use window.location.pathName if router works on path and not hash
viewName = viewName || 'home'; // view name cannot be empty
// Sanitize viewName to get rid of any trailing symbols derived from URL
if (viewName.startsWith('#') || viewName.startsWith('/')) {
viewName = viewName.substr(1);
}
// Validate if the Target Libraries are available on your website
if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
adobe.target.triggerView(viewName);
}
}
// react router v4
const history = syncHistoryWithStore(createBrowserHistory(), store);
history.listen(targetView);
// react router v3
<Router history={hashHistory} onUpdate={targetView} >
Link: Site de Produtos
Agora, vejamos um exemplo que é um pouco mais complicado. Digamos que, como profissionais de marketing, queremos personalizar a segunda linha dos produtos alterando a cor do rótulo de "Preço" para vermelho, depois que um usuário clicou no botão Carregar mais.
function targetView(viewName) {
// Validate if the Target Libraries are available on your website
if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
adobe.target.triggerView(viewName);
}
}
class Products extends Component {
render() {
return (
<button type="button" onClick={this.handleLoadMoreClicked}>Load more</button>
);
}
handleLoadMoreClicked() {
var page = this.state.page + 1; // assuming page number is derived from component's state
this.setState({page: page});
targetView('PRODUCTS-PAGE-' + page);
}
}
Link: Check-out
Se os profissionais de marketing quiserem personalizar o conteúdo no site, dependendo da preferência de entrega selecionada, é possível criar uma exibição para cada preferência de entrega. Nesse caso, quando selecionamos Entrega normal, a Exibição pode se chamar "Entrega normal". Se a opção Express Delivery estiver selecionada, a Exibição pode se chamar "Entrega expressa".
Agora, os profissionais de marketing podem executar um teste A/B para ver se a alteração da cor de azul para vermelho quando a opção Entrega expressa está selecionada pode aumentar as conversões em vez de manter a cor do botão azul para ambas as opções de entrega.
function targetView(viewName) {
// Validate if the Target Libraries are available on your website
if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
adobe.target.triggerView(viewName);
}
}
class Checkout extends Component {
render() {
return (
<div onChange={this.onDeliveryPreferenceChanged}>
<label>
<input type="radio" id="normal" name="deliveryPreference" value={"Normal Delivery"} defaultChecked={true}/>
<span> Normal Delivery (7-10 business days)</span>
</label>
<label>
<input type="radio" id="express" name="deliveryPreference" value={"Express Delivery"}/>
<span> Express Delivery* (2-3 business days)</span>
</label>
</div>
);
}
onDeliveryPreferenceChanged(evt) {
var selectedPreferenceValue = evt.target.value;
targetView(selectedPreferenceValue);
}
}
diagramas de sistema da at.js 2.x
Os diagramas a seguir ajudam a entender o fluxo de trabalho da at.js 2.x com Exibições e como isso melhora a integração de SPA. Para obter uma mais detalhes sobre os conceitos usados na Noções básicas sobre o funcionamento da at.js 2.x, consulte Implementação de aplicativos de página única.
O at.js também pode ser carregado de forma assíncrona com uma opção que oculta previamente o trecho implementado na página.
Os atributos do cliente são enviados à Loja de perfis em um processo em lote.
O conteúdo direcionado na página atual é revelado o mais rápido possível sem cintilação do conteúdo padrão.
Conteúdo direcionado para exibições que são mostradas como resultado das ações do usuário em um SPA, que é armazenado em cache no navegador para que possa ser aplicado instantaneamente, sem uma chamada de servidor adicional, quando as exibições forem acionadas
triggerView()
.Os dados do Analytics podem ser exibidos no Analytics e no Target via Analytics para os relatórios do Target (A4T).
Agora, onde quer triggerView()
que seja implementada em seu SPA, as Exibições e as ações são recuperadas do cache e mostradas ao usuário, sem uma chamada de servidor. triggerView()
também faz uma solicitação de notificações ao Target backend para aumentar e registrar contagens de impressão.
triggerView()
é chamado no SPA para renderizar a Exibição e aplicar ações para modificar elementos visuais.Aplicativo de página única no Visual Experience Composer
Após concluir a instalação da at.js 2.x e adicionar triggerView()
ao seu site, use o VEC para executar atividades A/B e XT. Para obter mais informações, consulte Aplicativo de página única (SPA) Visual Experience Composer.
triggerView()
.Use o TriggerView para garantir que o A4T funcione corretamente com at.js 2.x e SPA
Para garantir que o Analytics for Target (A4T) funcione corretamente com a at.js 2.x, certifique-se de enviar a mesma SDID na solicitação Target e na solicitação Analytics.
Como práticas recomendadas relacionadas a SPAs:
- Use eventos personalizados para notificar se algo interessante acontecer no aplicativo
- Acione um evento personalizado antes que a exibição inicie a renderização
- Acione um evento personalizado quando a exibição terminar a renderização
A at.js 2.x adicionou uma nova função triggerView() de API. Você deve usar triggerView()
para notificar à at.js que uma exibição iniciará a renderização.
Veja um exemplo de como combinar eventos personalizados, a at.js 2.x e o Analytics. Esse exemplo assume que a página HTML contém a API de visitante, a at.js 2.x e o AppMeasurement.
Vamos supor que os seguintes eventos personalizados existem:
at-view-start
- Quando a exibição inicia a renderizaçãoat-view-end
- Quando a exibição termina a renderização
Para certificar-se de que o A4T funciona com a at.js 2.x,
O manipulador de início da exibição deve ser semelhante ao seguinte:
document.addEventListener("at-view-start", function(e) {
var visitor = Visitor.getInstance("<your Adobe Org ID>");
visitor.resetState();
adobe.target.triggerView("<view name>");
});
O manipulador de término da exibição deve ser semelhante ao seguinte:
document.addEventListener("at-view-end", function(e) {
// s - is the AppMeasurement tracker object
s.t();
});
at-view-start
e at-view-end
. Esses eventos não fazem parte dos eventos personalizados da at.js.Embora esses exemplos usem código JavaScript, tudo isso pode ser simplificado se você estiver usando um gerenciador de tags, como tags na Adobe Experience Platform.
Se as etapas anteriores forem seguidas, você terá uma solução A4T robusta para SPAs.
Práticas recomendadas de implementação
As APIs da at.js 2.x permitem personalizar a implementação do Target de várias maneiras, mas é importante seguir a ordem correta das operações durante esse processo.
As informações a seguir descrevem a ordem de operações que você deve seguir ao carregar um Aplicativo de página única pela primeira vez em um navegador e para qualquer alteração de exibição que ocorra posteriormente.
Ordem de operação do carregamento inicial da página order
Se você tiver uma camada de dados, recomendamos carregar dados críticos que sejam necessários para enviar a Target antes de executar a solicitação Target. Isso permite que você use o targetPageParams
para incluir os dados que deseja usar para direcionamento.
Quando pageLoadEnabled
e viewsEnabled
estão definidos como verdadeiros em targetGlobalSettings, a at.js solicita automaticamente todas as ofertas do VEC Target para você na etapa 2.
Observe que getOffers
também pode ser usado para obter ofertas de VEC após o carregamento da página. Para fazer isso, verifique se a solicitação inclui execute>pageLoad
e prefetch>views
na chamada da API.
triggerView()
triggerView()
é chamado depois que a solicitação Target é retornada e conclui a aplicação das ofertas ao cache. Você deve executar essa etapa apenas uma vez por visualização.triggerView({"page": false})
Ordem de operação para alteração de exibição do SPA (sem recarregamento de página inteira)
visitor.resetState()
getOffers()
triggerView()
triggerView()
triggerView({"page": false})
Vídeos de treinamento
Os seguintes vídeos contêm mais informações:
Noções básicas sobre o funcionamento da at.js 2.x
Consulte Noções básicas sobre o funcionamento da at.js 2.x para obter mais informações.
Implementar a at.js 2.x em um SPA
Consulte Implementar a at.js 2.x da Adobe Target em um aplicativo de página única (SPA) para obter mais informações.
Uso do VEC para SPA em Adobe Target
Consulte Uso do Visual Experience Composer para Single Page Application (SPA VEC) no Adobe Target para obter mais informações.