實作單頁應用程式

Last update: Tue Jul 16 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：

建立對象：

開發人員

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

傳統網站採用「頁面至頁面」導覽模型（又稱為「多頁應用程式」），網站設計與URL緊密結合，而從某網頁轉換到另一個網頁，需要頁面載入。

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

與傳統頁面生命週期比較顯示SPA生命週期的圖表。

適用於SPA的Platform Web SDK的優點

以下是為單頁應用程式使用Adobe Experience Platform Web SDK的一些好處：

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

xdm檢視和單頁應用程式

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

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

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

瀏覽器視窗中單頁應用程式的範例影像。

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

瀏覽器視窗中單頁應用程式的範例影像，其中顯示所有產品。

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

瀏覽器視窗中單頁應用程式的範例影像，顯示範例產品。

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

瀏覽器視窗中單頁應用程式的範例影像，其他頁面上會顯示範例產品。

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

瀏覽器視窗中單頁應用程式簽出頁面的範例影像。

檢視的概念可以進一步延伸。以下只是可在網站上定義的一些檢視範例。

實施XDM檢視

在Adobe Target中可運用XDM檢視，讓行銷人員透過視覺化體驗撰寫器在SPA上執行A/B和XT測試。若要完成一次性開發人員設定，需要執行下列步驟：

安裝Adobe Experience Platform Web SDK
決定您單頁應用程式中要個人化的所有XDM檢視。

定義XDM檢視後，為了傳遞AB或XT VEC活動，請在單頁應用程式中實作sendEvent()函式並將renderDecisions設定為true以及對應的XDM檢視。必須在xdm.web.webPageDetails.viewName中傳遞XDM檢視。此步驟可讓行銷人員運用視覺化體驗撰寫器，針對這些XDM啟動A/B和XT測試。

code language-javascript
`alloy("sendEvent", { "renderDecisions": true, "xdm": { "web": { "webPageDetails": { "viewName":"home" } } } });`

NOTE

在前sendEvent()個呼叫中，將會擷取並快取所有應呈現給使用者的XDM檢視。後續的sendEvent()呼叫若包含XDM檢視已傳入，將會從快取讀取並轉譯，而不需要伺服器呼叫。

`sendEvent()`函式範例

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

範例1：A/B測試首頁

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

瀏覽器視窗中單頁應用程式的範例影像。

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

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測試，以檢視在選取 快捷配送 時，將按鈕的顏色從藍色變更為紅色是否能增加轉換次數（與將兩個配送選項的按鈕顏色保持為藍色相反）。

瀏覽器視窗中單頁應用程式的範例影像（含A/B測試）。

若要根據選取的傳遞偏好設定個人化網站內容，可針對每個傳遞偏好設定建立「檢視」。選取 一般傳遞 時，可將檢視命名為「checkout-normal」。如果選取 快速運送，則可將該檢視命名為「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);
  }

}