コードエディタの機能
コードエディタとは
VWOのコードエディタは、ビジュアルエディタと比べると発展的な機能で、コードを利用してテストパターンを作成したいユーザーのために提供されています。コードエディタを利用することで、VWOのビジュアルエディタを利用して生成されるコードの調整や、カスタムJS/CSSコードの追加が可能になります。外部JSライブラリーを追加することもできます。
Attention!
VWOコードエディタは、現状A/Bテストとパーソナライズキャンペーンでしか利用できません。
コードエディタを開く
最初からキャンペーンをカスタムコードで作成したい場合、キャンペーンURL設定画面にて Open in Code Only Mode 設定にチェックを入れてエディタ画面に進むと、常にコードエディタが表示されるようになります。
ビジュアルエディタを利用している場面で、コードエディタを開きたい場合は、ビジュアルエディタ画面の左下にある </> ボタンをクリックするとコードエディタが表示されます。
コードエディタ画面では、下記の操作が可能です。
JavascriptやCSSを入力する画面への切り替え。歯車マークをクリックすると外部JSも追加することができる
編集パターンの選択
パターンを追加
キャンペーン全体に適用するJS/CSSを追加
パターンのコードを編集する方法
ビジュアルエディタを利用している時にパターンのコードを編集したい場合、パターン選択メニューにてパターン名の歯車マークをクリックして、 </>コードを編集 を選択すると、該当パターンのコードエディタ画面が表示されます。
コードエディタの入力画面では、JavaScript（主にjQuery）やCSSを入力することができます。
コードエディタでは２つの jQuery表記を利用することができます。vwo_$ で jQueryを記述すると、VWO内の jQueryバージョン1.4.2を利用することになりますが、テスト対象ページに既に jQueryが設置されている場合、通常の jQuery表記 $ を利用するとページ内の jQueryバージョンを利用することができます。
キャンペーン全体に適用するJS/CSSを追加する方法
コードエディタ画面右上の キャンペーンJS/CSS タブを選択すると、コントロールを含む全パターンに適用するコードを追加することができます。こちらに追加するコードは、デフォルトで表示されるパターンが決定されてから発火されます。つまり、表示されるパターンが反映された後に、こちらのコード内容が反映されます。
パターンが決定される前に発火されるコードを追加することも可能です。キャンペーンJS/CSSについて詳しくは、下記記事を参照してください。
