---
title: "ウェブ実験でHTMLを使う"
slug: "use-html-in-a-web-experiment"
abstract: "動的データを活用するためにウェブ実験でHTMLを活用する方法を説明しています。"
---
# ウェブ実験でHTMLを使う

実験用のバリアントでHTMLを使えば、動的データを実行して1対1のパーソナライズを促進するのに特に有用です。

ほとんどのバリアントは、ゲストデータを組織のウェブサイトに渡す必要があります。例えば、ゲストの名前、所在地、ロイヤルティ番号などです。これを行うには、[APIリクエストに](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/introduction-to-experiments-in-sitecore-personalize/introduction-to-web-experiments-in-sitecore-personalize/compose-the-api-request-for-a-web-experiment/compose-the-api-request-for-a-web-experiment.html "Compose the API request for a web experiment") 動的データを含めるように設定し、バリアントが実行された際にサーバーからデータを要求し、その後バリアントに渡されるようにする必要があります。

handlebars.jsを使って、API応答からインデックスでネストされた値にアクセスすることができます。例えば、実験中に意思決定モデルから返されるオファーを表示したい場合などです。オファーは配列にネストされた値なので、array.indexまたはarray.{index} handlebars.js構文を使わなければなりません。

ウェブ実験が意思決定モデルで設定されている場合、意思決定モデルから返される属性をHTMLに挿入できます。

ウェブ実験でHTMLを使う方法:

1.  **実験バリアント**タイルで、設定したいバリアントの隣にある**編集**アイコンをクリックします。
    
2.  コードエディタの**HTML**タブで、ウェブ実験で使いたいHTMLを入力します。
    
3.  動的データをHTMLに挿入するには、**データ** タブの **データセレクター** 検索ボックスでゲストのメールアドレスやその他の識別子を入力して検索してください。これにより、データモデルの属性やパスにアクセスできます。
    
    > !ヒントコードの設定やテスト時によく使うゲストがいる場合は、スターアイコンをクリックしてゲストをブックマークし、検索しなくて済むようにしましょう。
    
    ![Editing the HTML to apply personalization in a variant.](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/Use_HTML_custom_code2.png)
    
4.  動的なゲストデータを含めるには、**ゲストデータモデル** ツリーの下で「 ![Copy icon](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/copy_data.png) 」をクリックし、「 **Copy Path as Handlebars**」をクリックしてください。
    
5.  意思決定モデル応答の動的データを含めるには、**意思決定モデル応答** ツリーを展開し、「 ![Copy icon](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/copy_data.png) 」をクリックして **「パスをハンドルバーとしてコピー**」をクリックしてください。
    
6.  体験応答の動的データを含めるには、**経験応答** ツリーを展開し、「 ![Copy icon](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/copy_data.png) 」をクリックして **「パスをハンドルバーとしてコピー**」をクリックしてください。
    
7.  **HTML**タブでデータを貼り付けて**保存をクリックします。**
    
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") し、それをバリアントに渡すことが保証されます。