Adobe Target ビューの実装

1. at.js 2.x をインストールします。
   まず、at.js 2.x をインストールする必要があります。このバージョンの at.js は、SPA を考慮して開発されました。以前のバージョンの at.js および mbox.js では、Adobe Target ビューおよび SPA の VEC はサポートされていません。
   Adobe Target UI でセットアップ／実装をクリックし、at.js 2.x をダウンロードします。at.js 2.x は、Adobe Launch を使用してもデプロイできます。ただし、Adobe Target Extensions は現在更新されてなく、サポートされていません。
2. サイトに at.js 2.x の最新の関数 triggerView() を実装します。
   A/B テストまたは XT テストを実行する SPA のビューを定義したら、ビューをパラメーターとして at.js 2.x の triggerView() 関数を実装します。これにより、マーケティング担当者は VEC を使用し、定義されたビューに対して A/B テストと XT テストを設計して実行できます。これらのビューに対して triggerView() 関数が定義されていない場合、VEC はビューを検出しません。そのため、マーケティング担当者は VEC を使用して A/B テストや XT テストを設計して実行できません。
   adobe.target.triggerView(viewName, options)

   パラメーター	タイプ	必須？	検証	説明
   viewName	文字列	○	1. 末尾にスペースは入れられません。 2.空にはできません。 3.ビュー名はすべてのページに対して一意である必要があります。 4. 警告 ： ビュー名の先頭または末尾を「 / 」にしないでください。これは、顧客は URL パスから表示名を一般的に抽出するためです。「home」と「 /home 」は区別されます。 5. 警告 ： {page: true} オプションを使用して同じビューを連続してトリガーしないでください。	ビューを表す文字列型として任意の名前を渡します。このビュー名は、VEC の「変更」パネルに表示されます。マーケティング担当者はこれを使用してアクションを作成し、A/B および XT アクティビティを実行します。
   options	オブジェクト	×
   options > page	ブール値	×		TRUE ： ページのデフォルト値は true です。 page=true の場合、インプレッション数を増分するために Edge サーバーに通知が送信されます。 FALSE : page=false の場合、インプレッション数を増分するための通知は送信されません。オファーを含むページ上のコンポーネントを再レンダリングする場合にのみ使用します。

   次に、仮想的な e コマース SPA 向けに React で triggerView() 関数を呼び出す方法の使用例を見てみましょう。
   リンク：ホーム サイト
   
   マーケティング担当者の立場からホームサイト全体で A/B テストを実行する場合、ビューに「home」という名前を付けられます。

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

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

 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 のシステム図

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

トリガービューによる A4T と at.js 2.x および SPA との正常な連携

• カスタムイベントを使用して、アプリケーションへの注目を喚起する通知をおこなう
• ビューのレンダリングが開始する前にカスタムイベントを発生させる
• ビューのレンダリングが終了したらカスタムイベントを発生させる

• at-view-start - ビューのレンダリングが開始したときに発生
• at-view-end - ビューのレンダリングが終了したときに発生

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

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

トレーニングビデオ