---
title: "ウェブ実験でJavaScriptを使う"
slug: "use-javascript-in-a-web-experiment"
abstract: "ウェブ実験でJavaScriptを使った際の動的データの挿入方法(Sitecore Personalize)。"
---
# ウェブ実験でJavaScriptを使う

組織のサイトでウェブ実験を実施するには、JavaScriptエディターでドキュメントオブジェクトモデル(DOM)のどこにオファーやコンテンツを表示したいかを指定する必要があります。これにより、HTMLが組織のウェブサイトに [どこに挿入・レンダリング](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/introduction-to-experiments-in-sitecore-personalize/introduction-to-web-experiments-in-sitecore-personalize/create-a-web-experiment/inserting-a-web-experiment-in-your-html.html "Inserting a web experiment in your HTML") されるかを決めます。

JavaScriptエディタは、あなたのバリアントで [クライアントサイドJavaScriptを実行](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/using-client-side-javascript-in-personalization/using-client-side-javascript-in-personalization.html "Using client-side JavaScript in personalization") させることができます。

ほとんどのバリアントは、[サーバー側のゲストデータを](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/using-server-side-javascript-in-sitecore-personalize/using-server-side-javascript-in-sitecore-personalize.html "Using server-side JavaScript in Sitecore Personalize") 組織のウェブサイトに渡す必要があります。例えば、ゲストの名前、所在地、ロイヤルティ番号などです。これを可能にするために、APIレスポンスに動的データを含めるように設定し、バリアントが実行された際にサーバーからデータを要求し、その後バリアントに渡されるようにする必要があります。

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

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

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

1.  **実験バリアント**タイルで、設定したいバリアントの隣にある**編集**アイコンをクリックします。
    
2.  コードエディターの**JavaScript**タブで、ウェブ実験で使いたいJavaScriptを入力します。JavaScriptコードを自動的にフォーマット・インデントするには、![Format JS icon](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/preetify.png)をクリックしてください。
    
3.  動的データをJavaScriptに挿入するには、**Data**タブの**Data Selector**検索ボックスでゲストのメールアドレスやその他の識別子を入力して検索してください。これにより、データモデルの属性やパスにアクセスできます。
    
    > !ヒントコードの設定やテスト時によく使うゲストがいる場合は、![Bookmark icon](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/bookmark.png) をクリックしてゲストをブックマークし、検索しなくて済むようにしましょう。
    
    ![Editing the JavaScript to apply personalization in a variant.](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/Use_HTML_custom_code.png)
    
4.  動的なゲストデータを含めるには、**ゲストデータモデル** ツリーの下で ![Copy icon](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/copy_data.png) をクリックし、「 **JavaScriptとしてパスをコピー**」をクリックします。
    
    ゲストデータモデルの任意の部分をJavaScript内で使用可能で、データ拡張やセグメントメンバーシップも含まれます。以下のように示されています。
    
    ![Using segment memberships from the guest data model in the JavaScript.](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/guestsegmentmembership1.png)
    
    この例では、コードは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.  意思決定モデル応答からの動的データを含めるには、**意思決定モデル応答** ツリーを展開し、「 ![Copy icon](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/copy_data.png) 」をクリックして「 **JavaScriptとしてパスをコピー**」をクリックしてください。
    
6.  実験応答からの動的データを含めるには、**Experience Response** treeを展開し、「 ![Copy icon](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/copy_data.png) 」をクリックし、「 **Copy Path as JavaScript**」をクリックしてください。
    
7.  **JavaScript**タブでデータを貼り付けて「**保存**」をクリックします。
    
8.  コードエディタを閉じるには ![back.png](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/back.png) をクリックしてください。
    
    APIリクエストを作成する際には動的データも含めなければなりません。これにより、実験が実行された際に [サーバーが動的データを要求](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/using-server-side-javascript-in-sitecore-personalize/using-server-side-javascript-in-sitecore-personalize.html "Using server-side JavaScript in Sitecore Personalize") し、それをバリアントに渡すことが保証されます。