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

従来の Web サイトは、「ページ間」ナビゲーションモデル（別名マルチページアプリケーション）を使用していました。このモデルでは、Web サイトデザインは URL と密接に結合され、ある Web ページから別のページへのトランジションにはページ読み込みが必要になります。 シングルページアプリケーション（SPA）などの最新型 Web アプリケーションは、代わりにブラウザの UI レンダリングの迅速な使用を推進するモデルを採用しています。多くの場合、ブラウザの UI レンダリングは、ページの再読み込みとは独立しています。 これらのエクスペリエンスは、スクロール、クリック、カーソル移動などの顧客のインタラクションによってトリガーされることがよくあります。 最新の Web の枠組みが進化するにつれて、パーソナライゼーションと実験をデプロイするためのページ読み込みなどの従来の汎用イベントは機能しなくなりました。

at.js 2.x は、次世代のクライアントサイドテクノロジーでパーソナライゼーションを実行するための機能を提供します。 このバージョンは、SPA と調和したインタラクションを実現するための at.js の改善に焦点を当てています。

以前のバージョンでは利用できない at.js 2.x を使用するメリットを紹介します。

Adobe Target ビューと単一ページアプリケーション

SPA用のAdobe Target VECでは、SPA エクスペリエンスを構成するビジュアル要素の論理的なグループである「ビュー」と呼ばれる新しい概念を活用しています。 このため SPA は、URL ではなくユーザーのインタラクションによりビュー間を移行するものと考えられます。 通常、ビューはサイト全体またはサイト内のグループ化されたビジュアル要素を表せます。

ビューについて詳しく説明するには、Reactに実装されたこの仮想的なオンライン e コマースサイトを操作し、ビューの例をいくつか見てみましょう。 下のリンクをクリックして、このサイトを新しいブラウザータブで開きます。

リンク： ホームサイト

ホームサイトに移動すると、イースターセールを宣伝するヒーロー画像やこのサイトで販売されている最新の製品がすぐに表示されます。 この場合、ビューはホームサイト全体として定義できます。 これは、以下の「Adobe Target ビューの実装」セクションで詳しく説明するため、注意すると便利です。

リンク： 製品サイト

販売されている製品に興味を引かれたため、「Products」リンクをクリックすることにします。 ホームサイトと同様、製品サイト全体をビューとして定義できます。 このビューには https://target.enablementadobe.com/react/demo/#/products) のパス名と同様に「products」という名前を付けられます。

このセクションの冒頭は、ビューをサイト全体またはサイト上の視覚要素のグループとして定義しました。 上記のように、サイトに表示されている 4 つの製品をグループ化して、ビューとしても考えられます。 このビューに名前を付ける場合、「Products」という名前を使用できます。

「Load More」ボタンをクリックして、サイト上のより多くの製品を見てみることにします。 この場合、web サイトの URL は変化しません。 ただし、ここにあるビューは、上に示されている製品の 2 列目のみを表示できます。 このビューは「PRODUCTS-PAGE-2」と呼べます。

リンク： チェックアウト

サイトに表示されている製品が気に入ったので、いくつかを購入することにしました。 現在、チェックアウトサイトでは、通常配送または速達配送を選択できるようになっています。 ビューはサイト上のビジュアル要素のグループにできるため、これに「View Delivery Preferences」という名前を付けられます。

さらに、ビューの概念を大きく拡張することもできます。 マーケターが選択された配送設定に応じてサイト上のコンテンツをパーソナライズする場合、配送設定ごとにビューを作成できます。 この例では、「Normal Delivery」を選択する場合、ビューに「Normal Delivery」という名前を付けられます。 「Express Delivery」を選択する場合、ビューに「Express Delivery」という名前を付けることができます。

次に、マーケターは、A/B テストを実行して、どちらの配送オプションでもボタンの色を青のままにするのに対して、速達が選択されたときに色を青から赤に変更することでコンバージョンを上昇させることができるかどうかを確認したいと思うかもしれません。

Adobe Target ビューを実装しています

Adobe Target ビューについて説明したので、Targetでこの概念を活用して、マーケターがVECを介してSPAでA/B テストとXT テストを実行できるようにすることができます。 これには開発者による 1 回限りの設定が必要です。 設定する手順を見てみましょう。

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

リンク： 製品サイト

では、もう少し複雑な例を見てみましょう。 マーケターは、ユーザーが「さらに読み込む」ボタンをクリックした後に「価格」ラベルの色を赤に変更することで、商品の2行目をパーソナライズしたいとします。

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

リンク： チェックアウト

マーケターが選択された配送設定に応じてサイト上のコンテンツをパーソナライズする場合、配送設定ごとにビューを作成できます。 この例では、「Normal Delivery」を選択する場合、ビューに「Normal Delivery」という名前を付けられます。 「Express Delivery」を選択する場合、ビューに「Express Delivery」という名前を付けることができます。

マーケターは、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);
   }
 }

at.js 2.x のシステム図

次の図は、ビューを使用した at.js 2 ワークフローと、これが SPA 統合をどのように強化するかについて説明しています。 at.js 2.x で使用されている概念に関するより詳しい概要については、「シングルページアプリケーションの実装」を参照してください。

これで、triggerView() が SPA のどこに 実装されているかに関わらず、ビューとアクションはキャッシュから取得され、サーバー呼び出しなしでユーザーに表示されるようになります。 triggerView() は、インプレッション数を増分して記録するために、Target バックエンド に通知リクエストもおこないます。

シングルページアプリケーションの Visual Experience Composer

at.js 2.x のインストールを完了し、サイトに triggerView() を追加した後、VEC を使用して A/B および XT アクティビティを実行します。 詳細については、「シングルページアプリケーション（SPA）の Visual Experience Composer」を参照してください。

TriggerViewを使用して、A4Tがat.js 2.xおよびSPAで正しく動作することを確認します

at.js 2.xでAnalytics for Target （A4T）が正しく動作することを確認するには、Target リクエストとAnalytics リクエストで同じSDIDを送信してください。

SPA に関するベストプラクティスは次のとおりです。

at.js 2.x には、新しい API 関数 triggerView() が追加されました。 triggerView() を使用して、ビューのレンダリングが開始したことを at.js に通知する必要があります。

カスタムイベント、at.js 2.x、Analytics を組み合わせる方法については、次の例を参照してください。 この例では、HTML ページに訪問者 API、at.js 2.x、AppMeasurement がこの順に含まれていると仮定します。

次のカスタムイベントがあるとしましょう。

A4T と at.js 2.x を確実に連携させるには、

ビュー開始ハンドラーは次のようになります。

document.addEventListener("at-view-start", function(e) {
  var visitor = Visitor.getInstance("<your Adobe Org ID>");

  visitor.resetState();
  adobe.target.triggerView("<view name>");
});

ビュー終了ハンドラーは次のようになります。

document.addEventListener("at-view-end", function(e) {
  // s - is the AppMeasurement tracker object
  s.t();
});

これらの例ではJavaScript コードを使用していますが、Adobe Experience Platformのタグなど、タグマネージャーを使用している場合は、これらすべてが簡略化できます。

上記の手順に従う場合は、SPA 用の堅牢な A4T ソリューションが必要です。

実装のベストプラクティス

at.js 2.x APIを使用すると、様々な方法でTarget実装をカスタマイズできますが、このプロセス中は正しい操作の順序に従うことが重要です。

次の情報は、ブラウザーで初めて単一ページアプリケーションを読み込む際に従う必要がある操作の順序と、その後に発生するビューの変更について説明します。

最初のページ読み込み処理の順序 order

SPA ビューの変更に対する操作の順序（ページ全体のリロードなし）

トレーニングビデオ

詳細は次のビデオで説明されています。

at.js 2.x の仕組みについて

詳しくは、at.js 2.x の仕組みについてを参照してください。

SPA での at.js 2.x の実装

詳しくは、「Adobe Targetのat.js 2.xをシングルページアプリケーション（SPA）に実装する」を参照してください。

Adobe TargetでのSPAにVECの使用

詳しくは、Adobe Target でのシングルページアプリケーション Visual Experience Composer（SPA VEC）の使用を参照してください。