ウェブ体験でJavaScriptを使う

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

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

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

JavaScriptを使って、APIレスポンスからインデックスでネストされた値にアクセスできます。

!注このエクスペリエンスはゲスト属性などのサーバー側データを呼び出し、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. 体験応答からの動的データを含めるには、経験応答 ツリーを展開し、「 」をクリックして「 パスをJavaScriptとしてコピー」をクリックしてください。

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

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

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