自分で実装する

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

Cursor や Claude Code などのコーディングエージェント、または手元のエディタで施策コードを書き、編集画面の コード タブへ取り込めます。

画面内のAIエージェントでも施策は作れますが、自分で実装すると次のようなメリットがあります。

• 使い慣れた開発環境で進められる — Cursor / Claude Code など、普段のコーディングエージェントやエディタのまま実装できます
• 複雑な実装や既存デザインの流用がしやすい — 社内のコードベースであるので、配信先のデザインと厳密に統一させたり、元コードをみながら複雑な配信でも正しく実装しやすくなります
• SKILL.mdに沿えば取り込みが簡単 — 成果物JSONを 一括取り込み するだけで、コードと計測ターゲットをまとめて反映できます

全体の流れ

1. 作成画面で 自分で実装する を選ぶ（または既存施策の コード タブを開く）
2. SKILL.mdをコピー し、コーディングエージェントに渡す
3. エージェント（または手元）で HTML / CSS / JS を実装する
4. 成果物のJSONを 一括取り込み で反映する
5. サンプルプレビューとライブプレビューで確認する
6. 計測ターゲット・配信設定を整えて配信する

施策の新規作成手順は 施策を作成する をご覧ください。このページは、外部でコードを実装する場合の手順です。

作成を開始する

1. A/Bテスト画面の 新規作成 をクリックします
2. 自分で実装する を選びます
3. 表示デバイスとスタイル参照ページを指定し、生成する をクリックします
4. 編集画面が開いたら、右パネルの デザイン > コード を開きます

既存の施策を直す場合は、編集画面の デザイン > コード から同じ操作ができます。

SKILL.mdをエージェントに渡す

コード タブの SKILL.mdをコピー をクリックすると、Wicle向けの実装ガイドがクリップボードにコピーされます。

Cursor などの Agent Skill として渡すと、表示・計測・後片付けなど Wicle 上で動かすための規約に沿ったコードを書きやすくなります。実装時の細かいルールは、コピーした SKILL.md 側を参照してください。

成果物を一括取り込みする

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

{
  "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": "閉じる" }
  ]
}

取り込み手順は次のとおりです。

1. コード タブの 一括取り込み をクリックします
2. JSONを貼り付けます（クリップボードから貼付 も使えます。markdownのjsonコードフェンス付きでも取り込めます）
3. 取り込む をクリックします

取り込むと、コードと計測ターゲットの表示名がまとめて反映されます。取り込み後は、計測設定 タブでON/OFFと表示名を確認できます。

実装時に押さえるポイント（概要）

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

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

既存ページの要素だけを変える施策（HTMLが空）は、サンプルプレビューでは確認できません。ライブプレビューで確認してください。

取り込み後の確認

1. サンプルプレビューで色・文言・レイアウトを確認します
2. ライブプレビューで、実ページ上の表示位置や動的な挙動を確認します
3. 計測設定 で計測ターゲットの表示名が意図どおりか確認します
4. 配信設定 でURL条件やコンバージョンなどを設定します
5. 必要に応じて Chrome拡張で動作を確認する のChrome拡張でも動作を確認します