Implementare at.js 2.0 di Adobe Target in un’applicazione a pagina singola
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.
Implementare at.js 2.0 in un’applicazione a pagina singola
- Implementa
at.js2.0 in <head> dell'applicazione a pagina singola. - Implementa la funzione
adobe.target.triggerView()ogni volta che si cambia la visualizzazione nell'applicazione a pagina singola. A tale scopo è possibile utilizzare diverse tecniche, ad esempio l'ascolto delle modifiche hash degli URL, l'ascolto di eventi personalizzati generati dall'applicazione a pagina singola 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. - Puoi attivare le visualizzazioni in piccole modifiche di visualizzazione, nonché in contesti non basati su applicazioni a pagina singola, 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’applicazione a pagina singola, il codice cerca il testo "react/" nell’URL, che molto probabilmente dovrà essere aggiornato sul sito. Tieni presente che potrebbe essere più appropriato che l'applicazione a pagina singola attivi triggerView() al di fuori degli 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);
}
}