シングルページアプリケーションの実装

Adobe Experience Platform Web SDK は、単一ページアプリケーション（SPA）などの次世代のクライアントサイドテクノロジーでパーソナライゼーションを実行できる豊富な機能を提供します。

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

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

SPA 向け Experience Platform Web SDK のメリット

単一ページアプリケーションで Adobe Experience Platform Web SDK を使用する利点は次のとおりです。

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

Adobe Target VEC for SPA では、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 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：パーソナライズされた製品

マーケティングチームは、ユーザーが さらに読み込む をクリックした後で価格ラベルのカラーを赤に変更して、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 アクティビティのアクションと変更を作成する 3 つの例について説明します。

例 1:「home」ビューを更新する

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

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

例 2：製品ラベルを変更する

「products-page-2」の View については、マーケティングチームは Price ラベルを Sale Price に変更し、ラベルの色を赤に変更します。

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

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

状態 Views ラジオボタンからのオプションなど、詳細なレベルで定義することができます。 この記事の前半では、配信の環境設定、「checkout-normal」および「checkout-express」について Views が定義されていました。 マーケティングチームは、「checkout-express」表示のボタンの色を赤に変更したいと考えています。

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