實作單頁應用程式

傳統的網站採用「頁面至頁面」導覽模型 (又稱為「多頁應用程式」)，網站設計與 URL 緊密結合，而從某網頁轉換到另一個網頁，需要頁面載入。單頁應用程式 (SPA) 這類新式 Web 應用程式採用的模型，則可加速瀏覽器 UI 演算速度，且通常與頁面重新載入無關。這些體驗通常會透過客戶互動觸發，例如捲動、點按和游標動作。隨著現代網路環境的不斷演進，傳統的一般事件 (例如頁面載入) 與部署個人化與實驗法之間的相關性已失效。

at.js 2.x 提供豐富的功能，讓貴公司能以新世代用戶端技術為基礎進行個人化。此版本著重於改善 at.js 與 SPA 之間的協調互動。

以下為使用 at.js 2.x 可享有但舊版不提供的優點:

• 可在頁面載入時快取所有選件，以減少對單一伺服器呼叫發出的多個伺服器呼叫。
• 顯著改善網站使用者體驗，因為可透過快取立即顯示選件，而不會發生傳統伺服器呼叫造成的時間延遲。
• 簡單的單行程式碼和一次性開發人員設定，讓行銷人員可透過 VEC 在 SPA 上建立和執行 A/B 和體驗目標鎖定 (XT) 活動。

Adobe Target 視圖和單頁應用程式

適用於 SPA 的Adobe Target VEC 充分利用「檢視」的新概念: 視覺元素的邏輯組合，共同構成 SPA 體驗。因此，SPA 可以視為根據使用者互動轉換檢視，而不是轉換 URL。檢視通常可代表整個網站或網站內的分組視覺元素。

為了進一步說明檢視，下文將瀏覽這個在 React 中實作的假想線上電子商務網站，並探索一些檢視範例。按一下底下的連結，在新的瀏覽器分頁中開啓此網站。

連結： 首頁

導覽至首頁時，可以馬上看到宣傳復活節特賣活動的主圖影像，以及網站上販售的最新產品。在這個案例中，檢視可定義為整個首頁。請記下這點，因為我們將在下文的「實作 Adobe Target 檢視」一節中更深入說明。

連結： 產品站點

由於我們對這間商店販賣的產品越來越感興趣，因此決定按一下「產品」連結。與首頁相似，產品網站整體可定義為一個檢視。我們可以將這個檢視命名為「products」，就像 https://target.enablementadobe.com/react/demo/#/products) 中的路徑名稱一樣。

本節的一開始，我們將檢視定義為整個網站或網站上的一組視覺元素。如上所示，網站上顯示的四個產品也可分組並視為檢視。如果想對這個檢視命名，可以將它命名為「Products」。

我們決定按一下「載入更多」按鈕，探索這個網站上的更多產品。在此情況下，網站 URL 不會變更。但此處的檢視只能呈現上圖中的第二列產品。該檢視的名稱可為「PRODUCTS-PAGE-2」。

連結： 簽出

因為我們喜歡網站上展示的一些產品，所以決定購買幾項產品。現在，結帳網站提供我們幾個選項，可選擇一般配送或快捷配送。因為檢視可為網站上的任何一組視覺元素，因此可將這個檢視命名為「View Delivery Preferences」。

此外，檢視概念還可進一步延伸。如果行銷人員想要根據選取的配送偏好設定個人化網站內容，可針對每個配送偏好設定建立一個檢視。在這種情況下，當選取了「一般配送」時，就可以將檢視命名為「一般配送」。如果選取「快捷配送」，就可以將檢視命名為「快捷配送」。

假設現在行銷人員想執行 A/B 測試，以瞭解當選取「快捷配送」時，相較於讓這兩種配送選項的按鈕均保持藍色，按鈕從藍色變為紅色是否能增加轉換次數。

實施Adobe Target 視圖

我們已在上文中介紹 Adobe Target 檢視的功能，現在可以在 Target 中運用這個概念，讓行銷人員透過 VEC 在 SPA 上執行 A/B 和 XT 測試。進行測試需要一次性開發人員設定。以下逐一說明設定步驟。

1. 安裝 at.js 2.x。

   首先需要安裝 at.js 2.x。這個 at.js 版本是針對 SPA 所開發。以前版本的at.js和mbox.js（現已棄用）不支援的Adobe Target視圖和VECSPA。

   通過位於以下位置的Adobe TargetUI下載at.js 2.x 管理>實施。 at.js 2.x還可以通過中的標籤進行部署 Adobe Experience Platform。

2. 在您的網站上實作 at.js 2.x 的最新函數 triggerView()。

   定義您要執行 A/B 或 XT 測試的 SPA 的檢視後，使用傳入作為參數的檢視來實作 at.js 2.x 的 triggerView() 函數。這麼做可讓行銷人員針對已定義檢視，使用 VEC 設計和執行的 A/B 和 XT 測試。如果沒有針對這些檢視定義 triggerView() 函數，VEC 將無法偵測檢視，進而導致行銷人員無法使用 VEC 來設計和執行 A/B 和 XT 測試。

   adobe.target.triggerView(viewName, options)

   參數	類型	必要?	驗證	說明
   viewName	字串	是	1. 尾端無空格。 2.不得空白。 3.所有頁面的檢視名稱都不得重複。 4.警告: 檢視名稱的開頭或結尾不能為「/」。這是因為客戶通常會從 URL 路徑中擷取檢視名稱。對我們來說，「home」和「/home」是不一樣的。 5.警告: 同一個檢視不應使用 {page: true} 選項連續觸發多次。	傳入任何名稱作為要代表檢視的字串類型。此檢視名稱會顯示在 VEC 的「修改」面板中，供行銷人員建立動作和執行 A/B 與 XT 活動。
   options	物件	無
   options > page	布林值	無		TRUE: 頁面的預設值為 true。當 page=true，會傳送通知至 Edge 伺服器以增加曝光計數。 FALSE: 當 page=false，不會傳送通知以增加曝光計數。只有當您想重新呈現頁面上含有某個選件的元件時，才應使用此項目。

   以下提供幾個範例使用案例，說明如何在 React 中叫用 triggerView() 函數以用於我們的假想電子商務 SPA:

   連結： 首頁

   

   行銷人員如果想在整個首頁上執行 A/B 測試，可以將該檢視命名為「home」:

 function targetView() {
   var viewName = window.location.hash; // or use window.location.pathName if router works on path and not hash

   viewName = viewName || 'home'; // view name cannot be empty

   // Sanitize viewName to get rid of any trailing symbols derived from URL
   if (viewName.startsWith('#') || viewName.startsWith('/')) {
     viewName = viewName.substr(1);
   }

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

 // react router v4
 const history = syncHistoryWithStore(createBrowserHistory(), store);
 history.listen(targetView);

 // react router v3
 <Router history={hashHistory} onUpdate={targetView} >

連結： 產品站點

現在，讓我們來看看更複雜的範例。假設我們是行銷人員，我們想在使用者按下「載入更多」按鈕後，將「價格」標籤的顏色變更為紅色，用這個方式將第二列產品個人化。

 function targetView(viewName) {
   // 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);
   }
 }

 class Products extends Component {
   render() {
     return (
       <button type="button" onClick={this.handleLoadMoreClicked}>Load more</button>
     );
   }

   handleLoadMoreClicked() {
     var page = this.state.page + 1; // assuming page number is derived from component’s state
     this.setState({page: page});
     targetView('PRODUCTS-PAGE-' + page);
   }
 }

連結： 簽出

如果行銷人員想要根據選取的配送偏好設定個人化網站內容，可針對每個配送偏好設定建立一個檢視。在這種情況下，當選取了「一般配送」時，就可以將檢視命名為「一般配送」。如果選取「快捷配送」，就可以將檢視命名為「快捷配送」。

假設現在行銷人員想執行 A/B 測試，以瞭解當選取「快捷配送」時，相較於讓這兩種配送選項的按鈕均保持藍色，按鈕從藍色變為紅色是否能增加轉換次數。

 function targetView(viewName) {
   // 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);
   }
 }

 class Checkout extends Component {
   render() {
     return (
       <div onChange={this.onDeliveryPreferenceChanged}>
         <label>
           <input type="radio" id="normal" name="deliveryPreference" value={"Normal Delivery"} defaultChecked={true}/>
           <span> Normal Delivery (7-10 business days)</span>
         </label>

         <label>
           <input type="radio" id="express" name="deliveryPreference" value={"Express Delivery"}/>
           <span> Express Delivery* (2-3 business days)</span>
         </label>
       </div>
     );
   }
   onDeliveryPreferenceChanged(evt) {
     var selectedPreferenceValue = evt.target.value;
     targetView(selectedPreferenceValue);
   }
 }

at.js 2.x 系統圖表

下列圖表可協助您瞭解 at.js 2.x 搭配檢視的工作流程，以及如何藉由這套工作流程增強 SPA 整合。如需 at.js 2.x 中所使用概念的詳細介紹，請參閱實作單頁應用程式。

現在，SPA 上只要是有實作 triggerView() 的位置，系統都會從快取擷取檢視和動作並向使用者顯示，不需要伺服器呼叫。triggerView() 也會對 Target 後端發出通知要求，以便增加和記錄曝光計數。

單一頁面應用程式可視化體驗撰寫器

安裝 at.js 2.x 並將 triggerView() 新增至您的網站後，請使用 VEC 執行 A/B 和 XT 活動。如需詳細資訊，請參閱單頁應用程式 (SPA) 可視化體驗撰寫器。

使用 TriggerView，確保 A4T 可搭配 at.js 2.x 和 SPA 正常運作

若要確保 Analytics for Target (A4T) 可搭配 at.js 2.x 正常運作，請務必在 Target 要求和 Analytics 要求中傳送相同的 SDID。

SPA 相關最佳實務如下:

• 使用自訂事件通知應用程式中發生了有趣的內容
• 在檢視開始呈現前觸發自訂事件
• 在檢視完成呈現時觸發自訂事件

at.js 2.x 已新增新的 API triggerView() 函數。您應使用 triggerView() 通知 at.js 檢視將開始呈現。

若要查看如何合併自訂事件、at.js 2.x 和 Analytics，請參考以下範例。此範例假設 HTML 頁面包含訪客 API，隨後是 at.js 2.x，隨後是 AppMeasurement。

假設存在下列自訂事件:

• at-view-start - 檢視開始呈現時
• at-view-end - 檢視完成呈現時

若要確保 A4T 可搭配 at.js 2.x 正常運作，

檢視開始處理常式應如下所示:

document.addEventListener("at-view-start", function(e) {
  var visitor = Visitor.getInstance("<your Adobe Org ID>");

  visitor.resetState();
  adobe.target.triggerView("<view name>");
});

檢視結束處理常式應如下所示:

document.addEventListener("at-view-end", function(e) {
  // s - is the AppMeasurement tracker object
  s.t();
});

儘管這些示例使用JavaScript代碼，但如果使用標籤管理器，則所有這些都可以簡化，如中的標籤 Adobe Experience Platform。

如果您按照上述步驟進行，您應該能擁有適用於 SPA 的健全 A4T 解決方案。

實施最佳做法

at.js 2.x API允許您自定義 Target 但在執行過程中，必須遵循正確的操作順序。

以下資訊描述了首次在瀏覽器中載入單頁應用程式時必須遵循的操作順序，以及隨後發生的任何視圖更改。

初始頁載入的操作順序

視圖更改的SPA操作順序（無全頁重裝）

訓練影片

以下影片包含更多資訊:

瞭解 at.js 2.x 的運作方式

請參閱 瞭解at.js 2.x的工作原理 的子菜單。

在中實現at.js 2.x SPA

請參閱 在單頁應用程式中實施Adobe Target的at.js 2.x(SPA) 的子菜單。

將VEC用於SPAAdobe Target

請參閱 在Adobe Target使用Visual Experience Composer實現單頁應用程SPA序(VEC) 的子菜單。