Aplicativo de página única (SPA) no Visual Experience Composer

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Tópicos:

No Adobe Target, o Visual Experience Composer (VEC) fornece aos profissionais de marketing um recurso próprio para criar atividades e personalizar experiências que podem ser fornecidas dinamicamente em aplicativos de várias páginas tradicionais por meio da mbox global da Adobe Target. No entanto, isso depende da recuperação de ofertas em chamadas de carregamento de página ou servidor subsequentes, o que introduz a latência, como mostrado no diagrama abaixo. Essa abordagem não funciona bem com SPAs (aplicativos de página única), pois elimina a experiência do usuário e o desempenho do aplicativo.

Ciclo de vida tradicional e ciclo de vida de SPA

Com a versão mais recente, agora apresentamos o VEC para SPAs. O VEC para SPAs permite que os comerciantes criem testes e personalizem conteúdo em SPAs de forma autônoma, sem dependências de desenvolvimento contínuas. O VEC pode ser usado para criar atividades de teste A/B e Direcionamento de experiência (XT) em estruturas populares, como o React e o Angular.

Adobe Target Exibições e Aplicativos de Página Única

O VEC do Adobe Target para SPAs utiliza 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

site inicial

Quando navegamos para o site inicial, é possível visualizar imediatamente uma imagem principal que promove uma venda de Páscoa e os produtos mais recentes à venda 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 exibições do Adobe Target abaixo.

Link: Site do Produto

site do produto

Conforme o interesse nos produtos aumenta, 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://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=pt-BR#/products.

site do produto 2

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 queremos nomear esta Exibição, podemos chamá-la de "produtos".

site do produto 3

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

página de checkout

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 nomear essa opção 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 Entrega expressa estiver selecionada, a Exibição pode ser chamada de "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.

Implementando Modos de Exibição do Adobe Target

Agora que cobrimos o que são Exibições do Adobe Target, podemos aproveitar este conceito no Target para que os profissionais de marketing executem testes de A/B e XT em SPAs por meio do VEC. Isso exigirá uma configuração de desenvolvedor única. Vamos analisar as etapas de configuração.

Instalar a at.js 2.x.

Primeiro, é necessário instalar a at.js 2.x. Essa versão da at.js foi desenvolvida para SPAs. As versões anteriores da at.js e do não são compatíveis com as Exibições do Adobe Target e o VEC para SPA.

Baixe a at.js 2.x pela interface do usuário do Adobe Target localizada em Administration > Implementation. A at.js 2.x também pode ser implantada por meio de tags na Adobe Experience Platform. No entanto, as extensões do Adobe Target não estão atualizadas e não são compatíveis no momento.

Implemente a função mais recente da at.js 2.x: triggerView() em seus sites.

Depois de definir as Exibições do SPA onde você deseja executar um teste A/B ou XT, implemente a função triggerView() da at.js 2.x com as Exibições passadas 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ção triggerView() 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.

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: quando `page=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

home-react-1

Como profissionais de marketing, se queremos executar testes A/B em todo o site inicial, talvez seja ideal nomear a exibição "inicial" que pode ser extraída do URL:

code language-javascript

code language-javascript
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} >

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, gostaríamos de 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.

produtos do react

code language-javascript

code language-javascript
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); } }

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

checkout do react

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 Entrega expressa estiver selecionada, a Exibição pode ser chamada de "Entrega expressa".

code language-javascript

code language-javascript
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); } }

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

Inicie atividades A/B ou XT por meio do VEC.

Quando adobe.target.triggerView() é implementado em sua SPA com nomes de exibição passados como parâmetros, o VEC poderá detectar essas exibições e permitir que os usuários criem ações e modificações para suas atividades de A/B ou XT.

note note
NOTE
O VEC for SPAs é realmente o mesmo VEC que você usa em páginas da Web regulares, mas alguns recursos adicionais estão disponíveis ao abrir um aplicativo de página única com a implementação de `triggerView()`.

Há duas melhorias importantes no painel Modificações e Ações para o VEC que permitem seu funcione adequado com SPAs.

Painel de modificações

Como mostrado abaixo, o painel Modifications captura as ações criadas para uma exibição específica. Observe que todas as ações para uma Exibição são agrupadas nessa Exibição.

Ações

Clique em uma ação para destacar o elemento no site onde esta ação será aplicada. Cada ação do VEC criada em uma Exibição tem os seguintes ícones, como mostrado abaixo: Informações, Editar, Clonar, Mover e Excluir.

Modificações

A seguinte tabela descreve cada ação:

Página

Descrição

Informações

Exibe os detalhes da ação.

Editar

Permite editar as propriedades da ação diretamente.

Clonar

Clona a ação a uma ou mais Exibições que existem no painel Modifications ou a uma ou mais Exibições que você buscou e nas quais navegou no VEC. A ação não precisa existir necessariamente no painel Modifications.
Observação: após a realização de uma operação de clonagem, é necessário navegar para a Exibição no VEC via Browse para ver se a ação clonada foi uma operação válida. Se a ação não puder ser aplicada à Exibição, você verá um erro.

Mover

Move a ação para um Evento de carregamento de página ou qualquer outra Exibição que já existe no painel de modificações.
Page Load Event - qualquer ação correspondente ao evento de carregamento de página é aplicada no carregamento inicial da página no aplicativo da Web.
Observação: após a realização de uma operação de mover, é necessário navegar para a Exibição no VEC via Procurar para ver se a movimentação foi uma operação válida. Se a ação não puder ser aplicada à Exibição, você verá um erro

Excluir

Exclui a ação.

NOTE

É possível executar muitas ações antes que a página seja carregada no VEC ou até mesmo se a página não carregar completamente. Ações que não podem ser editadas antes que o site seja carregado estão desabilitadas na interface.

Exemplo 1

Vamos consultar o exemplo acima em que criamos uma exibição de Página inicial. Nosso objetivo é criar duas dobras para esta exibição:

Altere os botões Adicionar ao carrinho e Curtir para uma cor azul mais clara. Isso deve estar em um "Carregamento de página" porque estamos alterando componentes do cabeçalho.
Altere o rótulo "Produtos mais recentes de 2019" para "Produtos de teste simples para 2019" com a cor do texto alterada para violeta.

Para executar essas metas, no VEC, clique em Compose e aplique essas alterações na exibição Início.

Exemplo 1

Exemplo 2

Vamos consultar o exemplo acima em que criamos uma visualização PRODUCTS-PAGE-2. Nosso objetivo é alterar o rótulo "Preço" para "Preço de venda" com a cor do rótulo em vermelho.

Clique em Browse e, em seguida, clique no link Products no cabeçalho.
Clique em Load More uma vez para ir até a segunda linha de produtos.
Clique em Compose.
Aplique ações a fim de alterar o rótulo do texto para "Preço de venda" e a cor como vermelho.

Exemplo 2

Exemplo 3

Por fim, como mencionado anteriormente, as Exibições podem ser definidas em nível granular. As exibições podem ser um estado ou até mesmo uma opção de um botão de opção. Anteriormente criamos Exibições como CHECKOUT-EXPRESS e CHECKOUT-NORMAL. Nosso objetivo é alterar a cor do botão para a exibição CHECKOUT-EXPRESS.

Clique em Browse.
Adicione alguns produtos ao carrinho.
Clique no ícone do carrinho no canto superior direito.
Clique em Checkout do pedido.
Clique no botão de opção Entrega expressa.
Clique em Compose.
Altere o botão "Pagar" para ler o botão "Concluir o pedido" e altere a cor para vermelho.

Exemplo 3

NOTE

A exibição CHECKOUT-EXPRESS não será mostrada no painel de modificação até você clicar no botão de opção Entrega expressa. Isso ocorre porque a função triggerView() acionada quando o botão de opção Entrega expressa é selecionado e isso ocorre somente quando o VEC sabe que há uma Exibição para mostrar no painel de modificação.

Análise detalhada de at.js e SPAs

Como posso recuperar as exibições dos dados de público-alvo mais recentes com ações após o carregamento da página inicial em meu SPA?

O fluxo de trabalho típico da at.js 2.x é quando seu site é carregado; todas as suas exibições e ações são armazenadas em cache para que as ações subsequentes do usuário no seu site não acionem chamadas do servidor para recuperar ofertas. Se quiser recuperar exibições dependendo dos dados de perfil mais atualizados que possam ter sido atualizados, dependendo das ações subsequentes do usuário, você pode chamar getOffers() e applyOffers() com os dados de usuário do público-alvo ou de perfil mais recentes passados.

Por exemplo, considere que você tem uma SPA que usa a at.js 2.x. e é uma empresa de telecomunicações que deseja alcançar os seguintes objetivos:

Para um usuário desconectado ou anônimo, mostre a promoção da empresa mais recente, como mostrar uma oferta principal de "Primeiro mês gratuito" em http://www.telecom.com/home.
Para um usuário conectado, mostre uma oferta promocional de atualização para usuários cujos contratos estão surgindo, como "Você está qualificado para receber um telefone gratuito!" em http://www.telecom.com/loggedIn/home.

Agora seus desenvolvedores nomeiam e fazem chamadas para triggerView() da seguinte maneira:

Para http://www.telecom.com/home o nome da exibição, é "Página inicial desconectada"
- triggerView("Logged Out Home") é chamado.
Para http://www.telecom.com/loggedIn/home, o nome de exibição é "Logon conectado"
- triggerView("Logged In Home") é chamado na alteração da rota.

Seus profissionais de marketing executam as seguintes atividades A/B por meio do VEC:

Atividade A/B com a oferta "Primeiro mês gratuito" para públicos-alvo com o parâmetro "loggedIn= false" a serem exibidos em http://www.telecom.com/home, onde o nome da exibição está Desconectado do Início.
Atividade A/B com a oferta "Você está qualificado para receber um telefone gratuito!" de público-alvo com o parâmetro "loggedIn=true" a ser exibido em http://www.telecom.com/loggedIn/home, onde o nome da exibição é Oferta de exemplo conectada.

Agora, considere este fluxo de usuário:

Um usuário anônimo desconectado chega à sua página.
Como a at.js 2.x está em uso, você passa o parâmetro "loggedIn = false" no carregamento da página para recuperar todas as exibições presentes em atividades ativas, qualificadas quando o público-alvo tiver o parâmetro "loggedIn = false".
A at.js 2.x recupera a exibição de Logout da página inicial e a ação para mostrar a oferta "Primeiro mês gratuito", armazenando-as no cache.
Quando triggerView("Logged Out Home") é invocado, a oferta "Primeiro Mês Gratuito" é recuperada do cache e a oferta é exibida sem uma chamada de servidor.
O usuário agora clica em "Logon" e fornece suas credenciais.
Como seu site é um SPA, você não faz um carregamento de página completo e, em vez disso, direciona seu usuário para http://www.telecom.com/loggedIn/home.

Agora, este é o problema. O usuário entra e encontramos triggerView("Logged In Home"), pois colocamos esse código na alteração da rota. Isso instrui que a at.js 2.x recupere a exibição e as ações do cache, mas a única exibição existente no cache é o Logout da página inicial.

Assim, como podemos recuperar a Exibição conectada e mostrar "Você está qualificado para receber um telefone gratuito!" offer? Como todas as ações subsequentes do site serão de uma perspectiva logada no usuário, como você pode garantir que todas as ações subsequentes resultam em ofertas personalizadas para usuários conectados?

Você pode usar as novas funções getOffers() e applyOffers() compatíveis com a at.js 2.x:

adobe.target.getOffers({
  request: {
  prefetch: {
    "views": [
      {
        "parameters": {
          "loggedIn": true
        },
      }
    ]
  },
});

Envie a resposta getOffers() a applyOffers(). Agora todas as exibições e ações associadas a "loggedin = true" atualizam o cache do at.js.

Ou seja, a at.js 2.x suporta uma maneira de recuperar exibições, ações e ofertas com os dados do público-alvo mais atualizados sob demanda.

A at.js 2.x oferece suporte ao A4T para Aplicativos de página única?

Sim, a at.js 2.x suporta o A4T para SPA por meio da função triggerView(), pois você implementou o Adobe Analytics e o Serviço de ID de visitante da Experience Cloud. Consulte o diagrama abaixo com descrições passo a passo.

Fluxo do Target

Etapa

Descrição

triggerView() é chamado na SPA para renderizar uma visualização e aplicar ações a fim de modificar elementos visuais associados à visualização.

O conteúdo direcionado para a exibição é lido do cache.

O conteúdo direcionado é revelado o mais rápido possível sem oscilação do conteúdo padrão.

A solicitação de notificação é enviada para a Loja do perfil do Target para contar o visitante nas métricas de atividade e incremento.

Os dados do Analytics são enviados aos Servidores de coleta de dados.

Os dados do Target são correspondidos aos dados do Analytics pela SDID, e processados no armazenamento de relatório do Analytics. Em seguida, os dados do Analytics podem ser visualizados no Analytics e no Target pelos relatórios do A4T.

NOTE

Se não quiser enviar notificações ao Adobe Analytics para a contagem de impressões sempre que uma exibição for acionada, passe {page: false} para a função triggerView(), de modo que a contagem de impressões não seja aumentada quando uma exibição é acionada várias vezes para um componente renderizado constantemente. Por exemplo:

adobe.target.triggerView("PRODUCTS-PAGE-2", {page:false})

Atividades com suporte

Tipo de atividade

Suportado?

Teste A/B

Sim

Recommendations como uma oferta
em atividades Teste A/B e Direcionamento de experiência (XT)

Sim

Alocação automática

Sim

Direcionamento de experiência

Sim

Teste multivariado

Não

Direcionamento automático

Não

Personalização automatizada

Não

Recommendations

Não

Se a at.js 2.x for instalada e implementada triggerView() em nossos sites, como é possível executar atividades A/B de Direcionamento automático, já que a SPA do VEC não é compatível com o Direcionamento automático?

Se você quiser usar atividades A/B de Direcionamento automático, mova todas as suas ações para serem executadas no Evento de carregamento de página no VEC. Passe o mouse sobre cada ação e clique no botão Move to Page Load Event. Depois de fazer isso, na próxima etapa você pode selecionar o Direcionamento automático para o método de alocação de tráfego.

Integrações compatíveis

Integração

Suportado?

Analytics for Target (A4T)

Sim

Públicos-alvo da Experience Cloud

Sim

Atributos do cliente

Sim

Fragmentos de experiência do AEM

Sim

Recursos compatíveis supported-features

Recurso

Suportado?

Áreas de trabalho e propriedades

Sim

Links de Controle de qualidade

Sim

Experience Composer baseado em formulário

Não

Código personalizado

Sim

Opções de VEC

Todos

Rastreamento de cliques

Sim

Disponibilização de várias atividades

Sim

Configurações de entrega de página para o VEC do SPA page-delivery-settings

As configurações do Page Delivery permitem definir regras para determinar quando uma atividade do Target deve ser qualificada e executada para um público-alvo.

Para acessar as opções Page Delivery no fluxo de trabalho de criação de atividade guiado de três partes do VEC, na etapa Experiences, clique em Configure (ícone de engrenagem) > Page Delivery.

Caixa de diálogo de opções de Entrega de página

Por exemplo, conforme definido pelas configurações de Page Delivery mostradas acima, uma atividade do Target é qualificada e executada quando um visitante acessa diretamente https://www.adobe.com ou quando um visitante acessa qualquer URL que contém https://www.adobe.com/products. Isso funciona perfeitamente para aplicativos de várias páginas em que cada interação com a página chama um recarregamento de página, para o qual a at.js recupera as atividades qualificadas para o URL ao qual o usuário navega.

No entanto, como o SPA funciona de forma diferente, as configurações de Page Delivery devem ser definidas de modo a permitir que todas as ações sejam aplicadas às Exibições conforme definido na atividade do VEC do SPA.

Exemplo de caso de uso

Considere este exemplo de caso de uso:

Painel de Modificações de SPA VEC

As seguintes alterações foram feitas:

Alteração da cor de fundo no modo de exibição Início, localizado na URL: https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=pt-BR#/.
Alteração da cor do botão na exibição Produtos, localizada na URL: https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=pt-BR#/products.

Com o exemplo acima em mente, o que acontece quando definimos as configurações de Page Delivery para incluir apenas: https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=pt-BR#/ em um SPA com at.js 2.x?

Caixa de diálogo Entrega de página

A ilustração a seguir mostra o Fluxo do Target - Solicitação de carregamento de página na at.js 2.x:

Fluxo do Target - Solicitação de carregamento de página da at.js 2.0

Jornada do usuário nº 1

Um usuário navega diretamente para https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=pt-BR#/.
at.js 2.x faz uma consulta à Edge para ver se alguma atividade precisa ser executada para a URL: https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=pt-BR#/.
Na etapa 6, o Target Edge retorna as ações para as exibições Início e Produtos para que sejam armazenadas em cache no navegador.

Resultado: o usuário vê a cor de fundo verde na exibição Início. Quando o usuário navega para https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=pt-BR#/products, a cor de fundo azul do botão é vista porque a ação foi armazenada no cache do navegador no modo de exibição Produtos.

Observação: a navegação do usuário para https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=pt-BR#/products não disparou um carregamento de página.

Jornada do usuário nº 2

Um usuário navega diretamente para https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=pt-BR#/products.
at.js 2.x faz uma consulta à Edge para ver se alguma atividade precisa ser executada para a URL: https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=pt-BR#/products.
Não há atividades qualificadas para https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=pt-BR#/products.
Como não há atividades qualificadas, não há ações e Exibições para armazenar em cache para a at.js 2.x acionar.

Resultado: mesmo que você tenha definido triggerView() para a exibição Produtos e executado uma ação na exibição Produtos por meio do VEC SPA, você não verá a ação esperada, pois não criou uma regra que incluísse https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=pt-BR#/products nas configurações de Entrega de página.

Prática recomendada

Você pode ver que o gerenciamento da jornada do usuário pode ser bastante difícil, pois os usuários podem acessar qualquer URL do seu SPA e navegar para qualquer outra página. Portanto, é melhor especificar uma regra de Entrega de página que inclua um URL base para englobar todo o SPA. Dessa forma, não é necessário pensar em todas as diferentes jornadas e caminhos que um usuário pode tomar para chegar a uma página na qual você deseja mostrar um teste A/B ou uma atividade de Direcionamento de experiência (XT).

Por exemplo, para resolver o problema acima, é possível especificar o URL base nas configurações de Entrega de página da seguinte maneira:

Caixa de diálogo Entrega de página

Isso garante que, sempre que um visitante acessar o SPA e navegar até a exibição Início ou Página, ele veja as ações aplicadas.

Agora, sempre que você adicionar uma ação a uma Exibição no VEC do SPA, mostraremos a seguinte mensagem pop-up para lembrá-lo de pensar nas regras de Page Delivery.

Mensagem das configurações de Entrega de página

Esta mensagem é exibida quando você adiciona a primeira ação a uma Exibição para cada atividade nova criada. Esta mensagem ajuda a garantir que todos na organização saibam aplicar essas Page Delivery regras corretamente.

Vídeo de treinamento: uso do VEC para SPAs no Adobe Target

https://video.tv.adobe.com/v/34802?captions=por_br

Consulte Uso do Visual Experience Composer para Single Page Application (SPA VEC) no Adobe Target para obter mais informações.

recommendation-more-help

3d9ad939-5908-4b30-aac1-a4ad253cd654