---
title: "カスタムコードを使ってウェブ実験用のバリアントを作成します"
slug: "create-a-variant-for-a-web-experiment-using-custom-code"
abstract: "カスタムコードを使ってウェブ実験用のバリアントを作成する方法を詳しく説明しています。"
---
# カスタムコードを使ってウェブ実験用のバリアントを作成します

ウェブ実験にパーソナライズを適用するには、カスタム[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/use-html-in-a-web-experiment.html "Use HTML in a web experiment")、[CSS、](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/use-css-in-a-web-experiment.html "Use CSS in a web experiment")[またはJavaScript](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/use-javascript-in-a-web-experiment.html "Use JavaScript in a web experiment")を使ってバリアントを作成できます。Sitecore Personalizeウェブ実験[を実行する](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")と、バリアントで設定された任意のHTML、CSS、またはJavaScriptを実行します。

パーソナライズを機能させるためには、ゲストデータを組織のウェブサイトに渡す必要があります。これにはゲストの名前、所在地、ロイヤルティ番号などの詳細が含まれます。これらの情報はサーバーサイドデータと呼ばれます。円滑化させるために、[FreeMarkerを使って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") を作成し、関連するHTML、CSS、またはJavaScriptコードで参照する必要があります。

カスタムコードを使ってウェブ実験のバリアントを作成するには:

1.  実験バ **リアント** タイルで「 **バリアントを作成**」をクリックします。
    
    > !注各実験で最大6つのバリアントを作成できます。
    
2.  **テンプレート選択**ペインで「**テンプレートを作成**」をクリックします。
    
3.  コードエディターでは、該当する[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/use-html-in-a-web-experiment.html "Use HTML in a web experiment")、[CSS](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/use-css-in-a-web-experiment.html "Use CSS in a web experiment")、[またはJavaScript](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/use-javascript-in-a-web-experiment.html "Use JavaScript in a web experiment")タブにカスタムコードを使います。
    
4.  [FreeMarkerを使って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")
    
5.  **「保存**」をクリックします。
    
6.  コードエディタを閉じるには ![back.png](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/back.png) をクリックしてください。