【STEP2】キャンペーンの作成（新UI）

画面の見方

テスト対象URLの設定

1. Pagesをクリックします。

2. URL にテスト対象URLを入力します。

3. 複数ページをテスト対象にしたい場合などは[URL一致]のタブをクリックして設定していきます。
   詳細な設定方法は下記リンクをご確認ください。
   　・テスト対象URLの設定
   　・VWOで利用可能なURLパターン

バリエーションの作成

Variationsをクリックすると、バリエーションの作成画面が表示されます。

VWOでは、対象となる元のページをコントロール（Control）、変更を加えた後のページをバリエーション（Variation）と呼びます。1つのテストに複数のバリエーションを作成することが可能です。
バリエーションを増やしたい時は、「+Add Variation」から増やすことが出来ます。

バリエーションを作成するには、二つの方法があります。
画面を見ながらマウスで編集するビジュアルエディタと、コードで編集するコードエディタです。
「Visual editor」のタブを切り替えることで編集モードを変更できます。
ここではVWOのビジュアルエディタを使用した方法をご紹介します。

ビジュアルエディタでは画像の差し替え、移動、スタイルの変更などを、実際の画面を見ながら行うことができます。

Tips

コードエディタを使用することで、より複雑なテスト設定が可能になります。

・コードエディタの機能

エディタの種類を選択し、「Open」をクリックするとエディタが起動します。
ここでは、「Googleカスタム検索」の「検索」ボタンの色を、灰色からオレンジに変更してみましょう。

3. 背景の色を変更したいので、STYLES のBackgroundを開き、Background colour をクリック、オレンジ色を選択した後、DONE を押します。

メトリクスの設定

コントロールとバリエーションによる効果を比較するためには、メトリクスを設定し、計測する必要があります。
ボタンのクリック数を計測するメトリクスを作成していきましょう。

（1）以下の通りにメトリクスの内容を設定します。

①    メトリクスの名前

任意の名前を設定することが出来ます。例では、「お問い合わせボタンクリック」としています。

②    メトリクスの定義

「イベントがトリガーされた場合」を選択してください。

③    イベントの種類

「Click」を選択してください。

④    プロパティの種類

「CSSのセレクタ」、「HTMLのid名」、「HTMLのclass名」、「HTMLのタグ名」のいずれかより設定いただけます。

⑤    値の入力をします。例では、CSSのセレクタパスを指定しています。

⑥    （任意）今後も別のキャンペーンで同じメトリクスを使いたい場合、「Save this metric for future use」にチェックをしてください。次回以降使いまわすことが出来るので、設定の手間が省けます。

⑦    設定が完了したら、「作成」ボタンをクリックしてください。

（2）メトリクスの設定画面の下部に追加が確認出来れば設定完了です。

Tips

メトリクスは複数設定することが可能です。また要素のクリックを追跡の他に、ページの訪問数、フォーム送信、サイト上の売上等、様々な種類のメトリクスを設定することができます。

・ Metricsを使ったゴール設定

その他の設定（任意項目）

最後に、キャンペーンのその他の設定を行います。

セグメントの設定

「Audience and Traffic」からセグメントを設定することが出来ます。
セグメントの詳細な設定方法は下記リンクをご確認ください。
　・VWOセグメントギャラリー
　・カスタムセグメント

配信ボリュームの設定

「Audience and Traffic」のページ下部では、このABテストキャンペーンの配信ボリュームを設定することが出来ます。

その他のオプション

「More configurations」から、更に詳細な設定を行うことが出来ます。