Implementera Adobe Target at.js 2.0 i ett enkelsidigt program (SPA)

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å harmonisk interaktion med enkelsidiga program (SPA).

Implementera at.js 2.0 i en SPA

  • Implementera at.js 2.0 i <head> för Single Page-programmet.
  • Implementera funktionen adobe.target.triggerView() när visningen ändras i SPA. Du kan använda olika tekniker för att göra detta, t.ex. avlyssna ändringar i URL-hash, lyssna efter anpassade händelser som utlösts av SPA eller bädda in triggerView()-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 som ändras i små vyer, liksom i andra sammanhang än SPA, t.ex. halvvägs nedåt och en oändlig rullningssida.
  • at.js 2.0 och triggerView() kan implementeras via en tagghanteringslösning som Adobe Experience Platform Launch.

at.js 2.0 Begränsningar

Tänk på följande begränsningar i at.js 2.0 innan du uppgraderar:

  • Spårning av korsdomän stöds inte i at.js 2.0
  • Parametrarna mboxOverride.browserIp och mboxSession URL stöds inte i at.js 2.0
  • De äldre funktionerna mboxCreate, mboxDefine, mboxUpdate är inaktuella i at.js 2.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 at.js-biblioteket 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, som troligen behöver uppdateras på webbplatsen. Tänk också på 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);
    }
}

Ytterligare resurser

På denna sida