Implementare at.js 2.0 di Adobe Target in un’applicazione a pagina singola (SPA)
Adobe Target at.js 2.0 offre set di funzioni avanzati che consentono all'azienda di eseguire personalizzazioni su tecnologie lato client di nuova generazione. Questa versione si concentra sull'aggiornamento di at.js per garantire interazioni in sintonia con le applicazioni a pagina singola (SPA).
Come implementare at.js 2.0 in un SPA
- Implementa
at.js2.0 in <head> dell'applicazione a pagina singola. - Implementare la funzione
adobe.target.triggerView()ogni volta che si cambia visualizzazione nell'SPA. A tale scopo è possibile utilizzare diverse tecniche, ad esempio l'ascolto delle modifiche hash degli URL, l'ascolto di eventi personalizzati attivati dall'SPA o l'incorporamento del codicetriggerView()direttamente nell'applicazione. È consigliabile scegliere l'opzione più adatta per l'applicazione a pagina singola specifica. - Il nome della visualizzazione è il primo parametro della funzione
triggerView(). Utilizza nomi semplici, chiari e univoci per semplificarne la selezione nel Compositore esperienza visivo di Target. - È possibile attivare le visualizzazioni in piccole modifiche di visualizzazione, nonché in contesti non SPA, ad esempio a metà strada in una pagina a scorrimento infinito.
- È possibile implementare
at.js2.0 etriggerView()tramite una soluzione di gestione tag, come Adobe Experience Platform Launch.
Limitazioni di at.js 2.0
Prima di eseguire l'aggiornamento, tenere presenti le seguenti limitazioni di at.js 2.0:
- Il monitoraggio tra più domini non è supportato in
at.js2.0 - I parametri mboxOverride.browserIp e mboxSession URL non sono supportati in
at.js2.0 - Le funzioni legacy mboxCreate, mboxDefine, mboxUpdate sono obsolete in
at.js2.0. Verrà visualizzato il contenuto predefinito e non verranno effettuate richieste di rete.
Codice piè di pagina della libreria utilizzato nel video
Il codice seguente è stato aggiunto alla sezione Piè di pagina libreria della libreria at.js durante il video. Si attiva quando l’app viene caricata per la prima volta e quindi su qualsiasi modifica hash nell’app. Utilizza una versione pulita dell’hash come nome della visualizzazione e "home" quando l’hash è vuoto. Tieni presente che per identificare l’SPA, il codice cerca il testo "react/" nell’URL, che molto probabilmente dovrà essere aggiornato sul tuo sito. Tieni presente che potrebbe essere più appropriato per il tuo SPA attivare triggerView() fuori dagli eventi personalizzati o incorporando il codice direttamente nell'app.
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);
}
}