> For the complete documentation index, see [llms.txt](https://docs.wicle.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wicle.io/action/experiment/create/diy-coding.md).

# A/Bテストの施策を自分で実装する

Cursorなどのコーディングエージェントで施策コードを実装し、Wicleのコードタブへ取り込む手順です。

Cursor や Claude Code などのコーディングエージェント、または手元のエディタで作成したHTML・CSS・JavaScriptを、Wicleの施策へ取り込めます。配信先のソースコードやデザインを参照しながら実装したい場合に使います。

コードを変更できるのは、`下書き` または `一時停止` のトリートメントです。コントロールにはコードを取り込めません。

## 全体の流れ <a href="#flow" id="flow"></a>

1. 施策の `デザイン` > `コード` を開きます。
2. Wicle向けの実装ガイド（SKILL.md）をコーディングエージェントへ登録します。
3. エージェントや手元のエディタでHTML・CSS・JavaScriptを実装します。
4. 成果物のJSONを確認し、選択中のトリートメントへ取り込みます。
5. 簡易プレビューと実ページで表示・動作を確認します。
6. 計測対象・配信設定を整え、保存してから配信します。

## 作成を開始する <a href="#start" id="start"></a>

新しい施策を作成する場合は、Wicle AIの有効化が必要です。

1. A/Bテスト一覧の `チャットから作成` をクリックします。
2. 入力欄の `自分で実装する` をクリックします。入力欄に指示が入ります。
3. `作成を始める` をクリックし、表示デバイスとスタイル参照ページを指定して `生成する` をクリックします。
4. 編集画面のバリアントバーで取り込み先のトリートメントを選び、`デザイン` > `コード` を開きます。

既存の施策も、取り込み先のトリートメントを選んで `デザイン` > `コード` を開きます。新規作成の詳しい手順は [A/Bテストの施策を作成する](/action/experiment/create.md) をご覧ください。

## SKILL.mdをエージェントに渡す <a href="#skill" id="skill"></a>

`コード` の右側にある `外部エージェントで作成` で、初回のみセットアップします。

1. `セットアップの指示をコピー` をクリックします。
2. コピーした指示をコーディングエージェントへ渡し、スキルを登録します。SKILL.mdをファイルで渡す場合は、同じ欄の `SKILL.md` からダウンロードできます。
3. 作りたい内容を、`wicle-experiment-coding スキルを使って作成してください` と依頼します。

実装ガイドには、表示・計測・後片付けなど、Wicle上で動くコードに必要な規約が含まれています。具体的な実装は、登録したガイドに従います。

## 成果物を一括取り込みする <a href="#import" id="import"></a>

コーディングエージェントには、JS / CSS / HTML をばらばらに出させず、次のJSONを1つだけ出してもらいます。

```json
{
  "js": "(function(){ ... })();",
  "css": ".wcl-exp-banner { ... }",
  "html": "<div class=\"wcl-exp-banner\" data-wcl-experiment=\"__WCL_EXP_ID__\">...</div>",
  "trackingTargets": [
    { "id": "t1", "type": "click", "label": "申し込みボタン" },
    { "id": "t2", "type": "close", "label": "閉じる" }
  ]
}
```

取り込みは、選択中のトリートメントのコードをまとめて置き換えます。追記ではないため、既存の内容を残す場合は、その内容も成果物へ含めてください。

| JSONの項目                      | 取り込み時の扱い                                 |
| ---------------------------- | ---------------------------------------- |
| `js` / `css` / `html`        | 各言語のコードを置き換えます。空文字・省略・`null` の項目は空になります  |
| `trackingTargets` に配列を指定     | 登録済みの計測ターゲット情報を置き換えます                    |
| `trackingTargets` を省略        | 登録済みの計測ターゲット情報を保ちます                      |
| `trackingTargets` に `[]` を指定 | 登録済みの計測ターゲット情報を削除します。コード内の計測処理自体は削除されません |

1. `外部エージェントで作成` の `成果物のJSON` に貼り付けます。MarkdownのJSONコードブロックで囲まれた出力も取り込めます。
2. `取り込む内容を確認` をクリックします。
3. 取り込み先のバリアント名と、コード・計測ターゲットへの変更を確認します。
4. `この内容で取り込む` をクリックします。

取り込んだあと、`評価設定` の `施策内の計測対象` でON/OFFと表示名を確認します。コードに計測用の指定が残っている場合は、登録情報を削除しても計測対象として検出されます。

## 実装時に押さえるポイント（概要） <a href="#overview" id="overview"></a>

一般的なWeb制作の書き方だけでは、プレビューでは見えるのにサイト上で出ない・計測されないことがあります。次の点だけ押さえてください。詳細は SKILL.md に従います。

* **HTMLはそのまま画面に出ません。** JSで `getHtml` してページへ挿入する必要があります
* **施策IDは `__WCL_EXP_ID__` を使います。** 自分で固定のIDを書かないでください
* **新しいUIのクラス名は `wcl-exp-` で始めます**
* **クリックと閉じるの計測方法は異なります。** 表示名（`label`）は人が分かる名前にし、内部ID（`t1` など）と分けます
* **簡易プレビューではHTML/CSSの見た目を確認します。** 動的な挙動や既存ページの改変は、`実ページで確認` を使います
* **配信URL・比率・表示回数などの配信条件は、コードでは実装しません。** `配信設定` タブで設定します

{% hint style="warning" %}
既存ページの要素だけを変える施策（HTMLが空）は、簡易プレビューでは確認できません。`実ページで確認` を使ってください。
{% endhint %}

## 取り込み後の確認 <a href="#verify" id="verify"></a>

1. `デザイン` > `ビジュアル` の簡易プレビューで、色・文言・レイアウトを確認します。
2. 簡易プレビュー上部の `実ページで確認` から、実ページ上の表示位置や動的な挙動を確認します。
3. `評価設定` の `施策内の計測対象` で、計測ターゲットの表示名が意図どおりか確認します。
4. コンバージョンは `評価設定`、URL条件や配信比率は `配信設定` で設定し、ヘッダーの `保存` で保存します。
5. 必要に応じて [Chrome拡張でA/Bテストの動作を確認する](/action/experiment/debug.md) の手順で確認します。

表示・計測・配信条件を確認したら、[A/Bテストの配信と効果測定](/action/experiment/delivery.md) の手順で配信します。


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.wicle.io/action/experiment/create/diy-coding.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.