メインコンテンツへスキップ
Code エディタの使用に関する詳細については、こちらのビデオ をご覧ください。 この記事の内容:
  • Code エディタのインターフェースと主な機能の概要。
  • HTML、CSS、JavaScript コードの操作を含む、Code エディタを使用したバリエーションの作成手順。
  • 影響を最大化するためのバリエーション最適化のヒント。
  • 実験を起動する前にバリエーションをテストおよび検証するためのベストプラクティス。

​
ユーザーの利点

Kameleoon Code エディタを使用すると、Graphic エディタを使用せずにコードベースの実験を作成、起動、管理できます。JavaScript または CSS コードをバリエーションに直接注入し、時間を節約できます。

​
Code エディタへのアクセス

​
Experiments ダッシュボードから

Experiments ダッシュボードで New experiment > With the code editor をクリックします。
次に、テストに名前を付け、ウェブサイトとページ URL に関連付けることができます。

​
Code エディタの構造

Code エディタには次の構造があります。
  • ヘッダー: 実験の名前とステータスを表示します。Simulate と Launch ボタンも含まれます。
  • バリエーションパネル: バリエーションをリストし、新しいものを追加できます。各バリエーションは編集用に選択可能です。
  • コードエリア: 選択したバリエーションに固有の JavaScript（JS）または CSS コードを編集できます。JS と CSS を切り替えるタブを含みます。
  • 左サイドバー: 実験を起動する前に定義する必要がある条件と一般設定が含まれます。

​
ヘッダー

​
実験情報

ヘッダーには、実験に関連する主な情報が表示されます。
  • 名前
  • ステータス
  • 最後のインタラクション（例: 最後の保存、更新、起動日）。
? アイコンにマウスオーバーすると、実験に関する追加情報にアクセスできます。 実験のステータスを確認し、変更が保存されたことを確認できます。2 種類の保存があります。
  • 実験のステータスが下書き、スケジュール済み、または一時停止の場合は 自動。
  • オンラインおよび分流された実験の場合は 手動（Finalize タブの緑のボタン経由）。

​
ヘッダーアクション

​
Simulate

Developer A/B 実験が正しく表示および機能することを確認するために、シミュレートすることを強くお勧めします。実験をシミュレートするには、Simulate をクリックして新しいタブでシミュレーションモードを開きます。

​
Schedule

実験をスケジュールするには:
  1. Simulate の右にある 三点リーダーメニュー > Schedule をクリックします。
  2. 開始日、終了日、またはその両方を指定します。
  3. 必要に応じて Advanced schedule オプションを構成します。
  4. Schedule をクリックしてスケジュールの作成を確定します。
+Add a schedule をクリックして、実験に複数のスケジュールを追加します。

​
期間の見積もり

実験が活用可能な結果を得るまでにかかる時間を見積もるには:
  1. Simulate の右にある 三点リーダーメニュー > Estimate the duration をクリックします。
  2. 必要な情報を指定します。
  3. Calculate をクリックします。

​
バリエーションパネル

​
コードの挿入

すべてのバリエーションについて、JS および/または CSS フィールド（対応するタブを選択: JS または CSS）でコードを追加、変更、または削除できます。 コードウィンドウの右上に展開オプションがあります。このボタンをクリックしてコードエリアを展開します。 専用ボタンを使用して、コードウィンドウを縦または横に 2 つに分割することもできます。ボタンをもう一度クリックすると、デフォルトのビューに戻ります。 Add variation をクリックして新しいバリエーションを追加します。シェブロン をクリックして code variation または URL redirection を追加します。 Code エディタには、いくつかの機能があります。
  • JavaScript 自動補完: 入力を開始すると、エディタは提案された自動補完オプションのドロップダウンリストを表示し、目的のメソッド、パラメータ、または変数を選択できます。ホバー情報とメソッドシグネチャ情報も表示されるため、エラーを減らしてコードを完成させることができます。
  • 構文エラー検出: コードの構文エラーに下線が引かれ、ホバーウィンドウでエラーに関する詳細情報が表示されます。
  • CSS 色選択: CSS エディタでは、ポップアップカラーセレクタが RGBA 値を自動的に入力できます。
Kameleoon は JavaScript コードを記述するための API と推奨機能を提供します。Kameleoon には jQuery が含まれていないことに注意してください。代わりに、ウェブサイトに既に存在するバージョンを使用します。Kameleoon は jQuery より前にロードされる可能性があるため、バリエーションの JavaScript コードを実行する前に jQuery が完全にロードされていることを確認する必要があります。jQuery がロードされたかどうかを確認するには、次のコードを使用します。 
Kameleoon.API.Core.runWhenConditionTrue(function(){
 return typeof jQuery != "undefined"; 
 //allows to check that jQuery is loaded. Returns True if it is, or False otherwise. Kameleoon will execute this condition again every 200ms.
 
}, function(){
 //Enter here the code you want to execute in your variation. For example if you want to change the text of a block and this block has the id "block-2345", you can use the following Kameleoon API function
 
 Kameleoon.API.Core.runWhenElementPresent("#bloc-2345", function(){
 
 //Enter here your JavaScript code
 jQuery("#bloc-2345").text("My new text");
 
 });
 
}, 200);
JavaScript コードはエディタ内で直接実行されません。変更をプレビューするには、実験をシミュレートしてください。
Kameleoon.API.Core に関する詳細情報については、開発者向けドキュメントを参照してください。

​
バリエーションメニュー

三点リーダーメニュー をクリックしてバリエーションメニューを表示します。 以下が可能です。
  • バリエーション名を変更する
  • バリエーションをプレビューする
  • 表示制限を追加する
  • バリエーションを削除する
このメニューで行った変更は、選択したバリエーションにのみ適用されます。

​
バリエーション名の変更

Rename variation をクリックしてバリエーションの名前を編集します。新しい名前を入力し、X アイコンをクリックするか enter を押して確定します。

​
プレビュー

Preview variation をクリックしてバリエーションを新しいタブで開き、その表示を確認します。

​
表示制限の追加

Add a display limit をクリックして、バリエーションが表示される頻度を制御します。希望する制限を有効にします。? アイコンにマウスオーバーすると、制限に関する詳細情報を提供するツールチップが表示されます。 Save をクリックして選択を確定します。

​
削除

Delete variation > Yes をクリックしてバリエーションを削除します。最終バリエーションは削除できません。実験には少なくとも 1 つのバリエーションが必要です。

​
複製

三点リーダーメニュー の右にある 複製アイコン をクリックして、バリエーションのコピーを生成します。

​
左サイドバー

左サイドバーには、実験を起動する前に定義する必要がある条件があります。これらの手順を完了せずに実験を起動することはできません。

​
確定手順

手順は Graphic エディタと同じです。
  • ターゲティング
  • トラフィック割り当て
  • ゴール
  • 統合
これらの各セクションをクリックして、必要な条件を定義します。完了するとセクションの横に緑のチェックマークが表示され、Launch ボタンが青色になります。 これらの Finalization 手順の詳細

​
一般設定

ここで実験の一般設定を確認できます。このメニューは次のセクションで構成されています。
  • メイン情報
  • 実験コード
  • 実験カスタムスクリプト
  • 詳細設定

​
メイン情報

ここで実験のメイン情報を管理できます。エディタがロードする URL、実験のタグ、仮説を指定できます。

​
実験コード

ここで実験の一般コードを確認できます。Kameleoon は実験の各バリエーションにこのコードを適用します。トグルをクリックして、このコードを元のバリエーションに追加します。

​
実験カスタムスクリプト

このセクションに追加された JavaScript コードを使用すると、実験に特に適用されるグローバルコードを記述できます。このコードは Kameleoon のグローバルスクリプトと並行して実行され、実験が終了したときにすべての変更が自動的に削除されることが保証されます。 さらに、このスクリプトは実験コードとバリエーションコードの 両方の前 に実行され、設定したターゲティング条件にかかわらず実行されるため、Kameleoon がロードされるとすぐに常に実行されます。

​
詳細設定

ここで実験の詳細設定にアクセスできます。
カスタムアトリビューションウィンドウ
このセクションを使用して、日数と時間でアトリビューションウィンドウを定義します。アトリビューションウィンドウは、訪問者のコンバージョンと収益が特定のバリエーションにリンクされる期間です。デフォルトでは、アトリビューションウィンドウはウェブサイトレベルで設定されていますが、実験を起動する前に下記でカスタマイズできます。カスタムアトリビューションウィンドウについて詳しくは こちら を参照してください。
表示制限
上記の表示制限のセクションをお読みください。 Advanced settings または Variation メニューで表示制限を設定できます。Advanced settings セクションは、どこで設定されたかにかかわらず、構成したすべての制限の概要を提供します。
JavaScript コードオプション
このオプションを有効にすると、ページのロード後に実験の JavaScript コードがロードされます。 このオプションは、JavaScript コードを実行する前にすべてのページ要素が完全にロードされていることを保証し、衝突を防ぎパフォーマンスを向上させます。早すぎるタイミングで実行される動的コンテンツやスクリプトの問題を回避します。これは、バリエーションが初期ページレンダリング後にロードされる要素に依存している場合に役立ちます。