Implementar a at.js 2.0 do Adobe Target em um aplicativo de página única (SPA)
O at.js 2.0 da Adobe Target fornece conjuntos de recursos avançados para sua empresa personalizar tecnologias de próxima geração no lado do cliente. Esta versão tem como foco a atualização do at.js para ter interações harmoniosas com aplicativos de página única (SPA).
Como implementar a at.js 2.0 em um SPA
- Implemente o
at.js2.0 no <head> do seu Aplicativo de Página Única. - Implemente a função
adobe.target.triggerView()sempre que visualizar alterações 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 códigotriggerView()diretamente no 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 da função
triggerView(). 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.
- O
at.js2.0 e otriggerView()podem ser implementados por meio de uma solução de gerenciamento de marcas, 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 tem suporte no
at.js2.0 - Os parâmetros de URL mboxOverride.browserIp e mboxSession não têm suporte no
at.js2.0 - As funções herdadas mboxCreate, mboxDefine e mboxUpdate foram descontinuadas em
at.js2.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 da biblioteca 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 de que pode ser mais apropriado para seu SPA disparar triggerView() fora de eventos personalizados ou incorporando o código diretamente no seu 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);
}
}