Implementar a at.js 2.0 do Adobe Target em um aplicativo de página única (SPA)

Última atualização em 2023-06-07
  • Criado para:
  • Intermediate
    Developer

Adobe Target at.js O 2.0 fornece conjuntos de recursos avançados para sua empresa personalizar tecnologias de próxima geração no lado do cliente. Essa versão tem como foco a atualização at.js para ter interações harmoniosas com aplicativos de página única (SPA).

Como implementar a at.js 2.0 em um SPA

  • Implementar at.js 2.0 no <head> do seu Aplicativo de página única.
  • Implementar o adobe.target.triggerView() função sempre que a visualização muda no SPA. Várias técnicas podem ser empregadas para fazer isso, como ouvir alterações de hash de URL, ouvir eventos personalizados disparados pelo seu SPA ou incorporar o triggerView() diretamente no seu aplicativo. Você deve escolher a opção que funciona melhor para seu aplicativo de página única específico.
  • O nome da exibição é o primeiro parâmetro do triggerView() função. Use nomes simples, claros e exclusivos para facilitar a seleção no Visual Experience Composer do Target.
  • Você pode acionar exibições em pequenas alterações de exibição, bem como em contextos não SPA, como na metade de uma página de rolagem infinita.
  • at.js 2.0 e triggerView() O pode ser implementado por meio de uma solução de gerenciamento de tags, como o Adobe Experience Platform Launch.

Limitações da at.js 2.0

Esteja ciente das seguintes limitações do at.js 2.0 antes da atualização:

  • O rastreamento entre domínios não é compatível com o at.js 2.0
  • Os parâmetros de URL mboxOverride.browserIp e mboxSession não são suportados no at.js 2.0
  • As funções herdadas mboxCreate, mboxDefine e mboxUpdate foram descontinuadas em at.js 2.0. O conteúdo padrão será exibido e nenhuma solicitação de rede será feita.

Código do rodapé da biblioteca usado no vídeo

O código abaixo foi adicionado à seção Rodapé da biblioteca do at.js durante o vídeo. Ele é acionado quando o aplicativo é carregado pela primeira vez e, em seguida, em qualquer alteração de hash no aplicativo. Ele usa uma versão limpa do hash como o nome da exibição e "inicial" quando o hash está vazio. Observe que para identificar o SPA, o código procura pelo texto "react/" no URL, que provavelmente precisará ser atualizado no site. Lembre-se, também, que pode ser mais apropriado para o seu SPA disparar triggerView() desativado de eventos personalizados ou incorporando o código diretamente no aplicativo.

function sanitizeViewName(viewName) {
  if (viewName.startsWith('#')) {
    viewName = viewName.substr(1);
  }
  if (viewName.startsWith('/')) {
    viewName = viewName.substr(1);
  }
  return viewName;
}
function triggerView(viewName) {
  viewName = sanitizeViewName(viewName) || 'home';
  // 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);
    console.log('AT: View triggered on page load: '+viewName)
  }
}
//fire triggerView when the SPA loads and when the hash changes in the SPA
if(window.location.pathname.indexOf('react/') >-1){
    triggerView(location.hash);
}
window.onhashchange = function() {
    if(window.location.pathname.indexOf('react/') >-1){
        triggerView(location.hash);
    }
}

Recursos adicionais

Nesta página