Implementação de aplicativos de página única

O Adobe Experience Platform Web SDK fornece recursos avançados para sua empresa personalizar tecnologias de próxima geração no lado do cliente, como aplicativos de página única (SPAs).

Os sites tradicionais usavam modelos de navegação “página para página”, também chamados de Aplicativos de várias páginas. Nesses sites, os designs são totalmente vinculados aos URLs, e mover-se entre páginas exigia um carregamento de página completo.

Aplicativos da Web modernos, como aplicativos de página única, adotaram 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 acionadas pelas 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 um carregamento de página, para implantar a personalização e a experimentação não funciona mais.

Benefícios do Experience Platform Web SDK para SPAs

Estes são alguns benefícios de usar o Adobe Experience Platform Web SDK para seus aplicativos de página única:

Exibições XDM e aplicativos de página única

O VEC do Adobe Target para SPAs aproveita um conceito chamado Exibições: um grupo lógico de elementos visuais que, juntos, constituem uma experiência de SPA. Um aplicativo de página única pode, portanto, ser considerado como uma transição entre exibições, em vez de 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 melhor o que são Exibições, o exemplo a seguir usa um site de comércio eletrônico online hipotético implementado em React para explorar o exemplo Exibições.

Depois de navegar para o site inicial, uma imagem principal promove uma venda de Páscoa e os produtos mais recentes disponíveis no site. Nesse caso, uma Exibição pode ser definida para toda a tela inicial. Esta Exibição pode simplesmente ser chamada de “inicial”.

À medida que o cliente se torna mais interessado nos produtos que a empresa está vendendo, ele decide clicar no link Produtos. Assim como o site inicial, a totalidade do site de produtos pode ser definida como uma Visualização. Esta Exibição pode se chamar “products-all”.

Uma vez que uma Exibição pode ser definida como um site inteiro ou um grupo de elementos visuais em um site. Os quatro produtos mostrados no site de produtos podem ser agrupados e considerados como uma Exibição. Essa exibição pode se chamar “produtos”.

Quando o cliente decide clicar no botão Carregar mais para explorar mais produtos no site, a URL do site não é alterada nesse caso. No entanto, uma Exibição pode ser criada aqui para representar apenas a segunda linha de produtos mostrados. O nome da Exibição poderia ser “products-page-2”.

O cliente decide comprar alguns produtos do site e prossegue para a tela de finalização. No site de finalização da compra, o cliente recebe as opções para escolher a entrega normal ou a expressa. Uma Exibição pode ser qualquer grupo de elementos visuais em um site, portanto, uma Exibição pode ser criada para preferências de entrega e ser chamada de “Preferências de Entrega”.

O conceito de Exibições pode ser estendido muito além deste cenário. Estes cenários são apenas alguns exemplos de Exibições que podem ser definidas em um site.

Implementando Exibições XDM

As Exibições XDM podem ser usadas no Target para permitir que profissionais de marketing executem testes A/B e XT em SPAs por meio do Visual Experience Composer. Para fazer isso, é necessário executar as seguintes etapas para concluir uma configuração de desenvolvedor única:

Exemplos de função sendEvent()

Esta seção descreve três exemplos mostrando como invocar a função sendEvent() no React para um SPA hipotético de comércio eletrônico.

Exemplo 1: página inicial de teste A/B

A equipe de marketing deseja executar testes A/B em toda a página inicial.

Para executar testes A/B em todo o site inicial, sendEvent() deve ser chamado com o XDM viewName definido como home:

function onViewChange() {

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

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

// react router v4

const history = syncHistoryWithStore(createBrowserHistory(), store);

history.listen(onViewChange);

// react router v3

<Router history={hashHistory} onUpdate={onViewChange} >

Exemplo 2: produtos personalizados

A equipe de marketing deseja personalizar a segunda linha de produtos alterando a cor do rótulo de preço para vermelho depois que um usuário clicar em Carregar mais.

function onViewChange(viewName) {

  alloy("sendEvent", {
    "renderDecisions": true,
    "xdm": {
      "web": {
        "webPageDetails": {
          "viewName": 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});
    onViewChange('PRODUCTS-PAGE-' + page);
  }

}

Exemplo 3: preferências de delivery do teste A/B

A equipe de marketing deseja executar um teste A/B para ver se a alteração da cor do botão de azul para vermelho quando a Entrega expressa é selecionada. A equipe acha que essa alteração pode aumentar as conversões (em vez de manter a cor do botão azul para ambas as opções de delivery).

Para personalizar o conteúdo no site, dependendo da preferência de entrega selecionada, uma Exibição pode ser criada para cada preferência de entrega. Quando a opção Entrega normal está selecionada, a Exibição pode ser chamada de “check-out-normal”. Se a Entrega expressa estiver selecionada, a Exibição poderá ser chamada de “checkout-express”.

function onViewChange(viewName) {
  alloy("sendEvent", {
    "renderDecisions": true,
    "xdm": {
      "web": {
        "webPageDetails": {
          "viewName": 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;
    onViewChange(selectedPreferenceValue);
  }

}

Usando o Visual Experience Composer para um SPA

Quando você terminar de definir suas Exibições XDM e implementar o sendEvent() com essas Exibições XDM passadas, o VEC poderá detectar essas Exibições e permitir que os usuários criem ações e modificações para atividades A/B ou XT.

Painel Modificações

O painel Modificações captura as ações criadas para uma Exibição específica. Todas as ações de uma Exibição estão agrupadas nessa Exibição.

Ações

Clicar em uma ação destaca o elemento no site onde essa ação é aplicada. Cada ação do VEC criada em uma Exibição tem os seguintes ícones: Informações, Editar, Clonar, Mover e Excluir. Esses ícones são explicados com mais detalhes na tabela a seguir.

Exemplos de uso do VEC para SPAs

Esta seção descreve três exemplos para usar o Visual Experience Composer para criar ações e modificações para atividades A/B ou XT.

Exemplo 1: atualizar a visualização “inicial”

Anteriormente neste artigo, uma Exibição chamada “inicial” foi definida para todo o site inicial. Agora, a equipe de marketing quer atualizar a visualização “inicial” das seguintes maneiras:

Para fazer essas atualizações no VEC, selecione Compor e aplique essas alterações à exibição “inicial”.

Exemplo 2: alterar rótulos de produto

Para a Exibição de “products-page-2”, a equipe de marketing gostaria de alterar o rótulo Preço para Preço de Venda e alterar a cor do rótulo para vermelho.

Para fazer essas atualizações no VEC, as seguintes etapas são necessárias:

Exemplo 3: personalizar o estilo de preferência do delivery

As Exibições podem ser definidas em nível granular, como um estado ou uma opção por meio de um botão de opção. Anteriormente neste artigo, As exibições foram definidas para preferências de entrega, “check-out-normal” e “check-out-express”. A equipe de marketing deseja alterar a cor do botão para a exibição “checkout-express”.

Para fazer essas atualizações no VEC, as seguintes etapas são necessárias: