在單頁應用程式中實作Adobe Target的at.js 2.0(SPA)

Adobe Target的at.js 2.0提供豐富的功能組合，讓貴公司能以新世代用戶端技術為基礎進行個人化。 此版本著重於升級at.js以與單頁應用程式(SPA)產生和諧互動。

如何在SPA中實作at.js 2.0

  • 在單頁應用程式的<head>中實作at.js 2.0。
  • 每當SPA中的檢視變更時，實作adobe.target.triggerView()函式。 可採用各種技術來執行此作業，例如監聽URL雜湊變更、監聽SPA引發的自訂事件，或直接將triggerView()程式碼嵌入您的應用程式。 您應選擇最適合特定單頁應用程式的選項。
  • 視圖名稱是triggerView()函式的第一個參數。 使用簡單、清除和唯一的名稱，以便在Target的可視化體驗撰寫器中輕鬆選取。
  • 您可以在小型檢視變更以及非SPA內容（例如向下半向無限捲動頁面）中觸發檢視。
  • at.js 2.0和 triggerView() 可透過標籤管理解決方案(例如Adobe Experience Platform Launch)來實作。

at.js 2.0限制

升級前，請注意at.js 2.0的下列限制：

  • at.js 2.0不支援跨網域追蹤
  • at.js 2.0不支援mboxOverride.browserIp和mboxSession URL參數
  • at.js 2.0中不再使用舊版函式mboxCreate、mboxDefine、mboxUpdate。將顯示預設內容，且不會提出網路要求。

影片中使用的程式庫頁尾程式碼

影片期間，下列程式碼已新增至at.js程式庫的「程式庫頁尾」區段。 應用程式首次載入時就會引發，而應用程式中的任何雜湊變更則會隨即引發。 它會使用雜湊的清理版本作為檢視名稱，並在雜湊為空時使用「home」。 請注意，若要識別SPA，程式碼會在URL中尋找文字「react/」，而這很可能需要在您的網站上更新。 也請記住，SPA可能更適合從自訂事件或直接將程式碼內嵌至應用程式中，來引發triggerView()。

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);
    }
}

其他資源

本頁內容