ウェブ実験でJavaScriptを使う

組織のサイトでウェブ実験を実施するには、JavaScriptエディターでドキュメントオブジェクトモデル(DOM)のどこにオファーやコンテンツを表示したいかを指定する必要があります。これにより、HTMLが組織のウェブサイトに どこに挿入・レンダリング されるかを決めます。

JavaScriptエディタは、あなたのバリアントで クライアントサイドJavaScriptを実行 させることができます。

ほとんどのバリアントは、サーバー側のゲストデータを 組織のウェブサイトに渡す必要があります。例えば、ゲストの名前、所在地、ロイヤルティ番号などです。これを可能にするために、APIレスポンスに動的データを含めるように設定し、バリアントが実行された際にサーバーからデータを要求し、その後バリアントに渡されるようにする必要があります。

JavaScriptを使って、API応答からインデックスでネストされた値にアクセスできます。例えば、実験でDecision Modelから返されるOfferを表示したい場合もあります。Offerは配列にネストされた値なので、array.indexまたはarray.{index} 構文を使う必要があります。

!注この実験はゲスト属性などのサーバー側データを呼び出し、CSJSで利用することができます。これにはゲストの完全な履歴や、リアルタイムセッションデータの連続ストリームが含まれます。

ウェブ実験でJavaScriptを使用する方法:

1. 実験バリアントタイルで、設定したいバリアントの隣にある編集アイコンをクリックします。

2. コードエディターのJavaScriptタブで、ウェブ実験で使いたいJavaScriptを入力します。JavaScriptコードを自動的にフォーマット・インデントするには、をクリックしてください。

3. 動的データをJavaScriptに挿入するには、DataタブのData Selector検索ボックスでゲストのメールアドレスやその他の識別子を入力して検索してください。これにより、データモデルの属性やパスにアクセスできます。

   !ヒントコードの設定やテスト時によく使うゲストがいる場合は、 をクリックしてゲストをブックマークし、検索しなくて済むようにしましょう。

   

4. 動的なゲストデータを含めるには、ゲストデータモデル ツリーの下で をクリックし、「 JavaScriptとしてパスをコピー」をクリックします。

   ゲストデータモデルの任意の部分をJavaScript内で使用可能で、データ拡張やセグメントメンバーシップも含まれます。以下のように示されています。

   

   この例では、コードはguest.segmentMemberships.nameを用いてゲストがrewards_memberセグメントに属するかvip_tierセグメントのいずれかに属するかを判定します。

   !注ゲスト属性はグローバルなJavaScriptオブジェクトとして利用できません。 guest.firstNameのような直接ドット表記アクセスはサポートされておらず、ゲストオブジェクトがJavaScript実行範囲に定義されていないため参照エラーが発生します。JavaScriptでゲスト属性にアクセスするには、Handlebars補間を使います:

   const firstName = "{{guest.firstName}}";

   ハンドルバーの式はスクリプト実行前に評価されるため、JavaScriptベースのバリアントでゲストデータを取得するためのサポート手法となっています。オートコンプリートやCopy Path as JavaScriptはguest.firstNameのようなパスを提案することがありますが、これらはデータモデルのパスを指し、JavaScript変数スコープではなく、JavaScript内で使用する場合はHandlebars構文でラップする必要があります。

5. 意思決定モデル応答からの動的データを含めるには、意思決定モデル応答 ツリーを展開し、「 」をクリックして「 JavaScriptとしてパスをコピー」をクリックしてください。

6. 実験応答からの動的データを含めるには、Experience Response treeを展開し、「 」をクリックし、「 Copy Path as JavaScript」をクリックしてください。

7. JavaScriptタブでデータを貼り付けて「保存」をクリックします。

8. コードエディタを閉じるには をクリックしてください。

   APIリクエストを作成する際には動的データも含めなければなりません。これにより、実験が実行された際に サーバーが動的データを要求 し、それをバリアントに渡すことが保証されます。