單頁應用程式 (SPA) 可視化體驗撰寫器

在 Adobe Target 中，可視化體驗撰寫器 (VEC) 為行銷人員提供自助式功能，以建立活動並個人化體驗，這些可以透過 Adobe Target 的全域 Mbox 在傳統多頁應用程式上以動態方式傳送。不過，這有賴擷取頁面載入上的選件或後續伺服器呼叫，但會導致延遲，如下圖所示。由於這種作法會減損使用者體驗與應用程式效能，因此在單頁應用程式 (SPA) 上成效不彰。

在最新版本中，我們現在推出了適用於 SPA 的 VEC。適用於 SPA 的 VEC 能讓行銷人員在 SPA 上，自己動手建立測試並個人化內容，無需持續開發的相依性。VEC 可用來在熱門架構 (React 和 Angular) 上建立 A/B 測試和體驗鎖定目標 (XT) 活動。

Adobe Target 檢視和單頁應用程式

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

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

連結： 主網站

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

連結： 產品網站

當我們對產品越來越感興趣時，決定點擊產品連結。與首頁相似，產品網站整體可定義為一個檢視。我們可以將這個檢視命名為「products」，就像 https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=zh-Hant#/products 中的路徑名稱一樣。

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

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

連結： 簽出

因為我們喜歡網站上展示的一些產品，所以決定購買幾項產品。現在，結帳網站提供我們幾個選項，可選擇一般配送或快捷配送。由於「檢視」可以是網站上任一視覺化元素群組，我們可將其命名為「檢視運送偏好設定」。

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

假設現在行銷人員想執行 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 和 不支援 Adobe Target 檢視和適用於 SPA 的 VEC。

   

   透過以下位置的Adobe Target UI下載at.js 2.x： 管理>實作. at.js 2.x也可以透過中的標籤進行部署 Adobe Experience Platform. 不過，Adobe Target擴充功能目前不是最新版本，且不受支援。

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，不會傳送通知以增加曝光計數。只有當您想重新呈現頁面上含有某個選件的元件時，才應使用此項目。

   現在，讓我們來看看一些使用範例，瞭解如何叫用 triggerView() 函式在React中針對我們的假想電子商務SPA：

   連結： 主網站

   

   行銷人員如果要在整個主網站上執行 A/B 測試，會想要將檢視命名為「主頁」(可從 URL 擷取):

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

3. 透過 VEC 啟動 A/B 或 XT 活動。

   當您在 SPA 上實作 adobe.target.triggerView() 且已傳入「檢視」名稱作為參數，VEC 就能夠偵測這些檢視，並允許使用者建立 A/B 或 XT 活動的動作或修改。

   注意

   適用於 SPA 的 VEC 與您用於一般網頁的 VEC 完全相同，不過當您開啟實作了 triggerView() 的單頁應用程式時，會提供一些額外功能讓您使用。

VEC 的「修改」面板和「動作」有兩項重大改進，使得 VEC 可以順利用於 SPA。

「修改」面板

「修改」面板 (如下所示) 會擷取為特定檢視所建立的動作。請注意，一個「檢視」的所有動作會在該「檢視」下組成群組。

動作

按一下動作會醒目顯示將套用該動作之網站上的元素。在檢視下建立的每個 VEC 動作都有下列圖示，如下所示: 資訊、編輯、原地複製、移動和刪除。

下表說明每個動作:

範例 1

讓我們回到前面建立「首頁」檢視的範例。 這個檢視有雙重目標:

1. 將「加到購物車」和「讚」按鈕變更為較淺的藍色。這應該在「頁面載入」中，因為我們要變更標題的元件。
2. 將「2019 年最新產品」標籤變更為「2019 年最暢銷產品」，並將文字顏色變更為紫色。

若要執行這些目標，請在 VEC 中按一下「撰寫」，然後在「主頁」檢視上套用這些變更。

範例 2

讓我們回到前面建立PRODUCTS-PAGE-2檢視的範例。 我們的目標是要將「售價」標籤變更為「促銷價」，且標籤顏色為紅色。

1. 按一下「瀏覽」，然後按一下標頭的「產品」連結。
2. 按一下「載入更多」以取得產品的第二列。
3. 按一下「撰寫」。
4. 套用動作以將文字標籤變更為「促銷價」，且顏色會變成紅色。

範例 3

最後，就像之前說過的，您可以在更精細的層級定義「檢視」。「檢視」可以是選項按鈕的一個狀態，甚至作為選項。我們之前是以「CHECKOUT-EXPRESS」和「CHECKOUT-NORMAL」來建立「檢視」。我們的目標是要將「CHECKOUT-EXPRESS」檢視的按鈕顏色變更為紅色。

1. 按一下「瀏覽」。
2. 將一些產品加到購物車。
3. 按一下右上角的購物車圖示。
4. 按一下「訂單結帳」。
5. 按一下「快速運送」選項按鈕。
6. 按一下「撰寫」。
7. 將「付款」按鈕變更為「完成訂單」字樣的按鈕，並將顏色變更為紅色。

深入分析 at.js 和 SPA

我要如何在我的 SPA 上首次頁面載入後，擷取經動作序列化的最新對象資料的檢視?

at.js 2.x的典型工作流程是當網站載入時，所有的檢視和動作都會經過快取，這樣網站上後續的使用者動作就不會觸發伺服器呼叫來擷取選件。 如果您要根據最新設定檔資料 (視後續的使用者動作而可能有所更新) 來擷取檢視，您可以使用傳入的最新對象使用者或設定檔資料來呼叫 getOffers() 和 applyOffers()。

例如，試想您是一間電信公司，且您的 SPA 使用的是 at.js 2.x。站在公司的角度，您希望達成下列目標:

• 對於登出或匿名的使用者，顯示公司最新的促銷活動，例如在上顯示「第一個月免費」主圖優惠 http://www.telecom.com/home.
• 對於登入的使用者，針對合約即將到期的使用者，顯示升級促銷優惠，例如「您符合免費手機的資格！」 例如在 http://www.telecom.com/loggedIn/home 上顯示「您符合獲得免費手機的資格!」。

現在，您的開發人員為檢視命名，且以下列方式呼叫 triggerView():

• 若為 http://www.telecom.com/home，則檢視名稱為「首頁 (登出)」
  • 叫用的是 triggerView("Logged Out Home")。
• 若為 http://www.telecom.com/loggedIn/home，則檢視名稱為「首頁 (登入)」
  • 因路徑改變，叫用的是 triggerView("Logged In Home")。

您的行銷人員接著透過 VEC 執行下列 A/B 活動:

• 針對引數為「 」的對象，使用「第一個月免費」優惠方案的A/B活動loggedIn= false"，顯示於 http://www.telecom.com/home，其中檢視名稱為「首頁（登出）」。
• A/B活動搭配「您符合免費手機的資格！」 使用引數"loggedIn=true"，顯示於 http://www.telecom.com/loggedIn/home，其中檢視名稱為「登入主圖優惠方案」。

現在，來看看這個使用者流程:

1. 匿名的登出使用者登陸您的頁面。
2. 由於您使用的是at.js 2.x，因此請傳入「loggedIn = false「在頁面載入時，當對象具有引數時，用於擷取在合格的使用中活動中出現的所有檢視」loggedIn = false「。
3. at.js 2.x接著會擷取「首頁（登出）」檢視與動作以顯示「第一個月免費」優惠，並將其儲存在快取中。
4. 時間 triggerView("Logged Out Home") 叫用時，系統會從快取中擷取「第一個月免費」優惠，且無需伺服器呼叫即可顯示優惠。
5. 使用者現在按一下「登入」並提供其認證。
6. 由於您的網站是 SPA，您不會執行完整的頁面載入，而會改將使用者路由至 http://www.telecom.com/loggedIn/home。

現在，問題來了。由於我們將此程式碼置於路由變更，使用者登入時我們會碰到 triggerView("Logged In Home")。這會告訴 at.js 2.x 要從快取中擷取檢視與動作，但快取中唯一有的檢視是「首頁 (登出)」。

那麼，我們如何才能擷取「登入」檢視並顯示「您符合免費手機的資格！」 offer? 而由於您網站上所有的後續動作都會使用登入使用者的視角進行，您要如何確定所有的後續動作會如期向登入使用者顯示個人化優惠呢?

您可以使用 at.js 2.x 支援的新函數 getOffers() 和 applyOffers():

adobe.target.getOffers({
  request: {
  prefetch: {
    "views": [
      {
        "parameters": {
          "loggedIn": true
        },
      }
    ]
  },
});

傳遞回應： getOffers() 至 applyOffers() 而現在，與「loggedIn = true」關聯的所有檢視和動作都會更新at.js快取。

也就是說，at.js 2.x 能以隨需方式，使用最新的對象資料來擷取檢視、動作和選件。

at.js 2.x 是否支援適用於單頁應用程式的 A4T?

是的，只要您已實作 Adobe Analytics 和 Experience Cloud 訪客 ID 服務，at.js 2.x 便能透過 triggerView() 函數支援適用於 SPA 的 A4T。請見下圖的逐步說明。

支援的活動

如果我們安裝 at.js 2.x 並在網站上實作了 triggerView()，在 SPA VEC 不支援自動鎖定目標的情況下，該如何執行自動鎖定目標 A/B 活動?

如果您希望使用自動鎖定目標 A/B 活動，可以移動所有的動作，讓它們在 VEC 中的「頁面載入事件」上執行。暫留在每個動作上，然後按一下「移動到頁面載入事件」按鈕。完成後，您可以在下一步中為流量分配方法選取「自動鎖定目標」。

支援的整合

支援的功能

SPA VEC 的頁面傳送設定

頁面傳送設定可讓您設定規則，判斷受眾是否符合 Target 活動且可執行。

若要從 VEC 的三步驟引導式活動建立工作流程內存取頁面傳送選項，請從​體驗​步驟中按一下​設定 (齒輪圖示) > 頁面傳送。

例如，如上方所示的頁面傳送設定所定義，Target 活動會在訪客直接在 https://www.adobe.com 上登陸時，或是​在訪客在任何包含 https://www.adobe.com/products 的 URL 上登陸時符合並執行。這非常適合任何多頁應用程式，其中與頁面的所有互動都會叫用頁面重新載入，而 at.js 會擷取符合使用者導覽之目標 URL 的活動。

不過，由於 SPA 的運作方式不同，頁面傳送的設定方式必須如 SPA VEC 活動中所定義，可將所有動作套用至檢視。

使用案例範例

請看看這個使用案例範例:

以下是所做的變更:

• 變更位於URL下方的首頁檢視中的背景顏色： https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=zh-Hant#/.
• 變更位於URL下方的產品檢視中的按鈕顏色： https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=zh-Hant#/products.

請思考上述範例，當我們設定時 頁面傳送 僅包含： https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=zh-Hant#/ SPA在具有at.js 2.x 的 SPA 中)，那麼會發生什麼情況?

下圖顯示 Target 流程 - at.js 2.x 中的頁面載入要求:

第 1 個使用者旅程

• 使用者直接導覽至 https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=zh-Hant#/.
• at.js 2.x 向Edge提出查詢，以瞭解是否需要為URL執行任何活動： https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=zh-Hant#/.
• 在步驟 6 中，Target Edge 會傳回首頁和產品檢視的動作，以便系統快取瀏覽器內的這些動作。

結果: 使用者會在首頁檢視中看見綠色的背景顏色。之後，當使用者導覽至 https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=zh-Hant#/products，則會看到按鈕的藍色背景顏色，因為系統會在瀏覽器的「產品」檢視下快取動作。

附註：使用者導覽至 https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=zh-Hant#/products 未觸發頁面載入。

第 2 個使用者旅程

• 使用者直接導覽至 https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=zh-Hant#/products.
• at.js 2.x 向Edge提出查詢，以瞭解是否需要為URL執行任何活動： https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=zh-Hant#/products.
• 沒有符合資格的活動 https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=zh-Hant#/products.
• 由於沒有任何符合的活動，因此沒有任何快取動作和檢視可供 at.js 2.x 觸發。

結果：即使您已定義 triggerView() 若為「產品檢視」並透過SPA VEC對「產品檢視」執行動作，您將看不到預期的動作，因為您並未建立包含的規則 https://experienceleague.adobe.com/developer/ashop-react-demo/at-js/?lang=zh-Hant#/products 在「頁面傳送」設定中。

最佳做法

您會發現管理使用者旅程可能相當困難，因為使用者可能會在 SPA 的任何 URL 上登陸，並導覽至任何其他頁面。因此，建議您指定包含基底 URL 的頁面傳送規則，這樣就會包含整個 SPA。如此一來，您就不需要思考使用者為了進入您要顯示A/B測試或體驗鎖定目標(XT)活動的頁面，可能會採取的所有不同歷程和路徑。

例如，為解決遇到的上述問題，我們可以在頁面傳送設定中指定下列基底 URL:

這樣可以確保無論訪客在 SPA 上的哪個位置登陸以及導覽至首頁或頁面檢視，都會看見套用的動作。

現在，每當您將動作新增至 SPA VEC 中的檢視，就會顯示下列快顯訊息，提醒您思考頁面傳送規則。

當您為建立的每個新活動將第一個動作新增至檢視時，就會顯示此訊息。此訊息可協助確保組織中的所有人都瞭解如何正確套用這些頁面傳送規則。

訓練影片: 在 Adobe Target 中使用適用於 SPA 的 VEC

另請參閱 在Adobe Target中使用適用於單頁應用程式的視覺化體驗撰寫器(SPA VEC) 以取得詳細資訊。