Implementera Adobe Target at.js 2.0 i en enda applikation (SPA)
Skapat för:
- Mellanliggande
- Utvecklare
Adobe Target at.js 2.0 innehåller funktionsrika uppsättningar som gör det möjligt för ditt företag att utföra personalisering på nästa generations klienttekniker. Den här versionen är inriktad på att uppgradera at.js för att få harmoniska interaktioner med SPA-program (single page applications).
Implementera at.js 2.0 i en SPA
- Implementera
at.js2.0 i <head> för Single Page-programmet. - Implementera funktionen
adobe.target.triggerView()när du visar ändringar i SPA-filen. Du kan använda olika tekniker för att göra detta, t.ex. avlyssna ändringar i URL-hash, avlyssna anpassade händelser som utlösts av SPA eller bädda intriggerView()-koden direkt i programmet. Du bör välja det alternativ som fungerar bäst för ditt specifika enkelsidiga program. - Vynamnet är den första parametern i funktionen
triggerView(). Använd enkla, tydliga och unika namn för att göra dem enkla att välja i Target visuella upplevelsedisposition. - Du kan utlösa vyer i små vyändringar, liksom i andra sammanhang än SPA, t.ex. halvvägs nedåt och en oändlig rullningssida.
at.js2.0 ochtriggerView()kan implementeras via en tagghanteringslösning, till exempel Adobe Experience Platform Launch.
at.js 2.0 Begränsningar
Tänk på följande begränsningar för at.js 2.0 innan du uppgraderar:
- Spårning av korsdomän stöds inte i
at.js2.0 - Parametrarna mboxOverride.browserIp och mboxSession URL stöds inte i
at.js2.0 - De äldre funktionerna mboxCreate, mboxDefine, mboxUpdate är inaktuella i
at.js2.0. Standardinnehåll visas och inga nätverksbegäranden görs.
Bibliotekets sidfotskod som används i videon
Koden nedan lades till i delen Library Footer i biblioteket at.js under videon. Det aktiveras när appen först läses in och sedan när någon hash-ändring görs i appen. Den använder en rensad version av hash som visningsnamn och"home" när hash-filen är tom. Observera att koden söker efter texten"reagerar/" i URL:en för att identifiera SPA:n, som troligen behöver uppdateras på webbplatsen. Kom ihåg att det kan vara lämpligare för din SPA att avaktivera triggerView() av anpassade händelser eller genom att bädda in koden direkt i din 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);
}
}