コードエディタの機能

コードエディタとは

VWOのコードエディタは、ビジュアルエディタと比べると発展的な機能で、コードを利用してテストパターンを作成したいユーザーのために提供されています。コードエディタを利用することで、VWOのビジュアルエディタを利用して生成されるコードの調整や、カスタムJS/CSSコードの追加が可能になります。外部JSライブラリーを追加することもできます。

Attention!

VWOコードエディタは、現状A/Bテストとパーソナライズキャンペーンでしか利用できません。

コードエディタを開く

最初からキャンペーンをカスタムコードで作成したい場合、キャンペーンURL設定画面にて Open in Code Only Mode 設定にチェックを入れてエディタ画面に進むと、常にコードエディタが表示されるようになります。

ビジュアルエディタを利用している場面で、コードエディタを開きたい場合は、ビジュアルエディタ画面の左下にある </> ボタンをクリックするとコードエディタが表示されます。 

コードエディタ画面では、下記の操作が可能です。

1. JavascriptやCSSを入力する画面への切り替え。歯車マークをクリックすると外部JSも追加することができる

2. 編集パターンの選択

3. パターンを追加

4. キャンペーン全体に適用するJS/CSSを追加

パターンのコードを編集する方法

ビジュアルエディタを利用している時にパターンのコードを編集したい場合、パターン選択メニューにてパターン名の歯車マークをクリックして、 </>コードを編集 を選択すると、該当パターンのコードエディタ画面が表示されます。

コードエディタの入力画面では、JavaScript（主にjQuery）やCSSを入力することができます。

コードエディタでは２つの jQuery表記を利用することができます。vwo_$ で jQueryを記述すると、VWO内の jQueryバージョン1.4.2を利用することになりますが、テスト対象ページに既に jQueryが設置されている場合、通常の jQuery表記 $ を利用するとページ内の jQueryバージョンを利用することができます。 

キャンペーン全体に適用するJS/CSSを追加する方法

コードエディタ画面右上の キャンペーンJS/CSS タブを選択すると、コントロールを含む全パターンに適用するコードを追加することができます。こちらに追加するコードは、デフォルトで表示されるパターンが決定されてから発火されます。つまり、表示されるパターンが反映された後に、こちらのコード内容が反映されます。

パターンが決定される前に発火されるコードを追加することも可能です。キャンペーンJS/CSSについて詳しくは、下記記事を参照してください。

・コードエディタのキャンペーンJS/CSS