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

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
實作

建立對象：

中繼
開發人員

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

https://video.tv.adobe.com/v/26248?quality=12

如何在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引數
舊版函式mboxCreate、mboxDefine、mboxUpdate在at.js 2.0中已過時。將顯示預設內容，且不會提出網路要求。

視訊中使用的資料庫頁尾程式碼

下列程式碼已在視訊期間新增至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);
    }
}

其他資源

recommendation-more-help

0f172607-337e-442f-a279-477fd735571f