シングルページアプリケーションの導入

Adobe Experience Platform Web SDKには、シングルページアプリケーション （SPA）などの次世代のクライアントサイド技術でパーソナライゼーションを実行するための豊富な機能が用意されています。

従来のweb サイトでは、「ページ間」ナビゲーションモデルを使用していました。これは、マルチページアプリケーションとも呼ばれます。 これらのweb サイトでは、デザインはURLと密接にリンクされており、ページ間を移動するにはページ全体の読み込みが必要です。

代わりに、シングルページアプリケーションなどの最新のweb アプリケーションでは、ブラウザーUI レンダリングを迅速に使用できるモデルが採用されています。このモデルは、ページのリロードに依存しないことが多いです。 スクロール、クリック、カーソルの移動など、顧客とのやり取りによってトリガーされます。 現代のwebのパラダイムが進化するにつれ、パーソナライゼーションと実験を展開するための、ページ読み込みなどの従来の一般的なイベントの関連性はもはや機能しません。

SPAのExperience Platform Web SDKの利点

シングルページアプリケーションにAdobe Experience Platform Web SDKを使用するメリットを以下に示します。

XDM ビューとシングルページアプリケーション

SPA用Adobe Target VECは、Viewsという概念を利用しています。これは、SPA エクスペリエンスを構成する視覚要素の論理グループです。 したがって、単一ページアプリケーションは、ユーザーのインタラクションに基づいて、URLではなくビューを介して移行と見なすことができます。 Viewは通常、サイト全体またはサイト内のグループ化されたビジュアル要素を表します。

ビューの詳細を説明するために、次の例では、Reactに実装された仮想的なオンライン e コマースサイトを使用して、例Viewsを調べます。

ホームサイトに移動すると、ヒーロー画像がイースターセールと、サイトで利用可能な最新の製品を宣伝します。 この場合、ホーム画面全体にViewを定義できます。 このViewは単に「ホーム」と呼ぶことができます。

顧客が販売している商品に関心を持つようになると、商品 リンクをクリックすることにしました。 ホームサイトと同様に、製品サイト全体をViewとして定義できます。 このViewには「products-all」という名前を付けることができます。

Viewは、サイト全体またはサイト上の視覚要素のグループとして定義できます。 製品サイトに表示される4つの製品はグループ化され、Viewと見なすことができます。 このビューには「products」という名前を付けることができます。

お客様が「さらに読み込む」ボタンをクリックしてサイト上の他の製品を検索する場合、web サイトのURLは変更されません。 ただし、ここにViewを作成して、表示されている製品の2行目のみを表すことができます。 View名は「products-page-2」である可能性があります。

。

顧客はサイトから商品を購入し、チェックアウト画面に進みます。 チェックアウトサイトでは、通常の配送とエクスプレス配送のどちらかを選択できるオプションが顧客に提供されます。 Viewは、サイト上の任意のグループのビジュアル要素になることができるため、配信環境設定のためにViewを作成し、「配信環境設定」と呼ぶことができます。

Viewsの概念は、このシナリオよりもはるかに拡張できます。 これらのシナリオは、サイトで定義できるViewsの例のほんの一部です。

XDM Viewsを実装しています

XDM ViewsをTargetで活用すると、マーケターはVisual Experience Composerを介してSPAでA/B テストとXT テストを実行できます。 これを行うには、1回限りの開発者セットアップを完了するために、次の手順を実行する必要があります。

sendEvent()関数の例

この節では、仮想e コマース SPAに対してReactでsendEvent()関数を呼び出す方法を示す3つの例の概要を説明します。

例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：パーソナライズされた商品

マーケティングチームは、ユーザーが「さらに読み込む」をクリックした後、価格ラベルの色を赤に変更して、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 テスト配信の環境設定

マーケティング部門は、Express Delivery​が選択されている場合に、ボタンの色を青から赤に変更するかどうかを確認するためにA/B テストを実行したいと考えています。 チームは、この変更が（両方の配信オプションでボタンの色を青に保つのではなく）コンバージョンを高めることができると考えています。

選択されている配信設定に応じてサイト上のコンテンツをパーソナライズするには、配信設定ごとにViewを作成できます。 通常の配信​を選択すると、Viewに「checkout-normal」という名前を付けることができます。 Express Delivery​が選択されている場合、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の定義が完了し、それらのXDM Viewsが渡されたsendEvent()を実装すると、VECはこれらのViewsを検出し、ユーザーがA/BまたはXT アクティビティのアクションと変更を作成できるようにします。

Modifications パネル

Modifications パネルは、特定のViewに対して作成されたアクションをキャプチャします。 Viewのすべてのアクションは、そのViewの下にグループ化されます。

アクション

アクションをクリックすると、このアクションが適用されるサイト上の要素がハイライト表示されます。 Viewの下に作成された各VEC アクションには、次のアイコンがあります：情報、編集、クローン、移動、削除。 これらのアイコンについては、次の表で詳しく説明します。

SPAの例にVECを使用する

この節では、Visual Experience Composerを使用してA/BまたはXT アクティビティのアクションと変更を作成する3つの例について説明します。

例1: 「ホーム」ビューの更新

この記事の前に、「ホーム」という名前のViewがホームサイト全体に対して定義されました。 さて、マーケティング部門は次の方法で「ホーム」ビューを更新したいと考えています。

VECでこれらの更新を行うには、作成​を選択し、これらの変更を「ホーム」ビューに適用します。

例2：製品ラベルの変更

「products-page-2」 Viewの場合、マーケティング部門は​価格 ラベルを​ 販売価格 ​に変更し、ラベルの色を赤に変更します。

VECでこれらの更新を行うには、次の手順が必要です。

製品ラベルを含む

例3：配信設定スタイルのパーソナライズ

Viewsは、状態やラジオボタンのオプションなど、詳細レベルで定義できます。 この記事の前の記事Viewsでは、配信設定の「checkout-normal」および「checkout-express」について定義しました。 「checkout-express」ビューのボタンの色を赤に変更したいと考えています。

VECでこれらの更新を行うには、次の手順が必要です。