實作單頁應用程式

Adobe Experience Platform Web SDK提供豐富的功能，讓貴公司能以新世代使用者端技術(例如單頁應用程式(SPA))為基礎進行個人化。

傳統網站使用「頁面至頁面」導覽模型（又稱為「多頁應用程式」）。 在這些網站中，設計與URL緊密連結，而在頁面之間移動需要完整頁面載入。

單頁應用程式等新式Web應用程式已改為採用可加快瀏覽器UI呈現速度的模型，且通常與頁面重新載入無關。 這些體驗會由客戶互動觸發，例如捲動、點按和游標移動。 隨著現代網路環境的不斷演化，傳統的一般事件（例如頁面載入）與部署個人化和實驗不再具有相關性。

SPA Experience Platform Web SDK的優點

以下是為您的單頁應用程式使用Adobe Experience Platform Web SDK的優點：

xdm檢視和單頁應用程式

適用於SPA的Adobe Target VEC利用了名為Views的概念：視覺化元素的邏輯群組，這些元素共同構成SPA體驗。 因此，單頁應用程式可視為根據使用者互動轉換檢視，而不是轉換URL。 View通常可以代表整個網站或網站內的分組視覺元素。

為了進一步說明檢視是什麼，下列範例使用在React中實作的假想線上電子商務網站來探索範例Views。

導覽至首頁後，主圖影像會宣傳復活節特賣以及網站上提供的最新產品。 在這種情況下，可以為整個主畫面定義View。 此View可以簡單地稱為「home」。

當客戶對該企業所銷售的產品越來越感興趣時，他們決定按一下​ 產品 ​連結。 與主網站類似，產品網站的整體可定義為View。 此View可命名為「products-all」。

因為View可以定義為整個網站或網站上的一組視覺元素。 產品網站上顯示的四個產品可分組並視為View。 此檢視可命名為「products」。

當客戶決定按一下「載入更多」按鈕來探索網站上更多產品時，在此情況下，網站URL不會變更。 不過，您可以在此處建立View，以僅代表顯示的第二列產品。 View名稱可以是"products-page-2"。

客戶決定從網站購買一些產品，然後進入結帳畫面。 在結帳網站上，客戶可選擇一般配送或快捷配送。 View可以是網站上的任何一組視覺元素，因此可以為傳遞偏好設定建立View，並稱為「傳遞偏好設定」。

Views的概念可以延伸至比此案例更遠的地方。 這些案例只是可在網站上定義的一些Views範例。

正在實作XDM Views

在XDM Views中可運用Target，讓行銷人員透過Visual Experience Composer在SPA上執行A/B和XT測試。 若要這麼做，必須執行下列步驟，以完成一次性開發人員設定：

sendEvent()函式範例

本節概述三個範例，說明如何在React中叫用假設性的電子商務SPA的sendEvent()函式。

範例1：A/B測試首頁

行銷團隊想要在整個首頁上執行A/B測試。

若要在整個主網站上執行A/B測試，必須在將XDM sendEvent()設為viewName的情況下叫用home：

function onViewChange() {

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

  alloy("sendEvent", {
    "renderDecisions": true,
    "xdm": {
      "web": {
        "webPageDetails": {
          "viewName":"home"
        }
      }
    }
  });
}

// react router v4

const history = syncHistoryWithStore(createBrowserHistory(), store);

history.listen(onViewChange);

// react router v3

<Router history={hashHistory} onUpdate={onViewChange} >

範例2：個人化產品

行銷團隊想要在使用者按一下​ 載入更多 ​後，將價格標籤顏色變更為紅色，以個人化第二列產品。

function onViewChange(viewName) {

  alloy("sendEvent", {
    "renderDecisions": true,
    "xdm": {
      "web": {
        "webPageDetails": {
          "viewName": 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});
    onViewChange('PRODUCTS-PAGE-' + page);
  }

}

範例3：A/B測試傳送偏好設定

行銷團隊想要執行A/B測試，以檢視在選取​ 快捷配送 ​時，按鈕的顏色是否從藍色變更為紅色。 團隊認為此變更可提升轉換率（而非讓兩個傳送選項的按鈕均保持藍色）。

若要根據選取的傳遞偏好設定個人化網站內容，可以為每個傳遞偏好設定建立View。 選取​ 一般傳遞 ​時，可將View命名為「checkout-normal」。 如果選取​ 快速運送，則可將View命名為「checkout-express」。

function onViewChange(viewName) {
  alloy("sendEvent", {
    "renderDecisions": true,
    "xdm": {
      "web": {
        "webPageDetails": {
          "viewName": 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;
    onViewChange(selectedPreferenceValue);
  }

}

針對SPA使用Visual Experience Composer

當您完成定義XDM Views並實作sendEvent()，且傳入了那些XDM Views時，VEC就能夠偵測這些Views，並允許使用者建立A/B或XT活動的動作或修改。

Modifications面板

Modifications面板擷取為特定View建立的動作。 View的所有動作都會分組在該View下。

動作

按一下動作會醒目顯示套用此動作之網站上的元素。 在View下建立的每個VEC動作都有下列圖示： 資訊、編輯、複製、移動 ​和​ 刪除。 下表會詳細說明這些圖示。

使用適用於SPA的VEC範例

本節概述使用Visual Experience Composer建立A/B或XT活動之動作和修改的三個範例。

範例1：更新「首頁」檢視

本文稍早前，已針對整個首頁網站定義名為「home」的View。 現在，行銷團隊想要以下列方式更新「首頁」檢視：

若要在VEC中進行這些更新，請選取​ 撰寫，並將這些變更套用至「首頁」檢視。

範例2：變更產品標籤

針對「products-page-2」View，行銷團隊想要將​ Price ​標籤變更為​ Sale Price，並將標籤顏色變更為紅色。

若要在VEC中進行這些更新，需執行下列步驟：

範例3：個人化傳送偏好設定樣式

Views可以在精細層次定義，例如單選按鈕的狀態或選項。 本文前面的Views是針對傳遞偏好設定、「checkout-normal」和「checkout-express」定義的。 行銷團隊想要將「checkout-express」檢視的按鈕顏色變更為紅色。

若要在VEC中進行這些更新，需執行下列步驟：