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:

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.

 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.

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.

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.

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:

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:

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();
});

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

Ordem de operação para alteração de exibição do SPA (sem recarregamento de página inteira)

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.