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 at.js interazioni in sintonia con le applicazioni a pagina singola (SPA).
Come implementare at.js 2.0 in un SPA
- Implementare
at.js2.0 nel <head> dell'applicazione a pagina singola. - Implementare
adobe.target.triggerView()ogni volta che si cambia la visualizzazione dell’SPA. A tale scopo è possibile utilizzare diverse tecniche, ad esempio ascoltare le modifiche dell’hash URL, ascoltare eventi personalizzati generati dall’SPA o incorporaretriggerView()direttamente nell'applicazione. È consigliabile scegliere l'opzione più adatta per l'applicazione a pagina singola specifica. - Il nome della vista è il primo parametro del
triggerView()funzione. 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.
at.js2.0 etriggerView()può essere implementato tramite una soluzione di gestione tag, come Adobe Experience Platform Launch.
Limitazioni di at.js 2.0
Tieni presente le seguenti limitazioni di at.js 2.0 prima dell'aggiornamento:
- 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 e 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 sezione at.js libreria 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 attivare l’SPA triggerView() 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);
}
}