ビジュアルエディタの機能

ビジュアルエディタを使用することで、キャンペーンのバリエーション（テストパターン）を編集することができます。

ビジュアルエディタのメニュー

ビジュアルエディタを開くと、テスト対象URLページのビジュアルと、画面下部にビジュアルエディタのメニューが表示されます。

1. 「</>」 （コードエディタ）：JS/CSSを追加することができます。

2. 「＜ 」 （キャンペーン設定画面に戻る）：設定画面に戻ります。

3. デザインモード・ナビゲートモード：テストページを編集するか、ナビゲートするか切り替えることができます。

4. 取り消す：編集などを取り消します。

5. やり直す：取り消した編集を元に戻します。

6. 保存する：要素を編集したり、コードを追加した後に保存します。

7. ヘルプ：よくある質問を確認することができます。

8. DESKTOP：デフォルトではPCの画面が表示されますが、iPhone、Android、タブレットなどの画面表示に切り替えることができます。

9. GOALS：設定されているゴールを確認することができます。

10. バリエーション：バリエーションを編集・追加・削除することができます。
    ※ キャンペーンが１度開始された場合、データに影響されるためバリエーションを削除する事が出来ません。

11. 次へ：編集したキャンペーンを保存して設定を進めます。

ビジュアルエディタの要素編集機能

キャンペーンのバリエーション（テストパターン）を編集するには、表示されているページ内の編集したい要素をクリックして、表示される操作メニューから該当する機能を選び、編集を行ってください。

1. 画像変更：選択した画像を変更できます。（画像はリンク先を指定、またはローカルからアップロードします）

2. 要素変更：要素のテキスト、URL、CSSのスタイルや属性を変更できます。

3. 移動/サイズ変更：選択した要素を移動させたり、大きさを変更することができます。

4. HTMLの編集：選択した要素内に含まれるHTMLを直接編集することができます。

5. 削除：選択した要素を削除することができます。

6. 隠す：選択した要素を画面内から隠すことができます。

7. Inline Edit：選択した要素のテキスト・フォントサイズなどを変更することができます。

8. コピー：選択した要素を複製します。

9. Paste：（何かをコピーをした後に）コピーされた要素を選択した要素の前後に挿入することができます。

10. 位置変更：選択した要素の親要素の中での順番を変更することができます。

11. 親要素を選択する：選択した要素の親要素（またはその親要素の親要素など）を選択することができます。

12. クリック計測：要素クリックゴールを設定して、要素のクリック数を計測することができます。

ここでは良く使用される要素編集機能について、操作方法をご説明します。

画像の変更

画像を変更することができます。

1. Upload Image: ファイルを選択 をクリックし、自分のPCにある画像をアップロードして設定することができます。

2. Specify URL: もし画像が他のサイトにすでに掲載されている場合は、この欄にその画像のURLを設定することができます。

3. Browse existing images: すでに VWOにアップロードした画像があれば、それを選択することもできます。

4. 変更する画像の Title (タイトル)、Alt Text (代替テキスト)、Size (サイズ)、Border (境界線) をここで設定できます。

要素変更

要素変更をクリックした時に現れるダイアログには、GENERAL、STYLE、ATTRIBUTES の3つのタブがあります。

GENERAL

テキスト、URL、リンク先ページをどう開くかに加えて、良く使用される色などのCSSスタイルや id、class などの属性もこの GENERAL タブから変更できます。

STYLES

STYLES タブからは、テキストのフォントや色、背景、ボーダー、レイアウトなどのCSSスタイルを変更できます。Custom から新しくプロパティを加えることもできます。

リアルタイムでプレビューを見ながら要素のスタイルを変更できることが利点です。

ATTRIBUTES

ATTRIBUTES タブでは要素の ID やクラス、タイトル (要素の説明) といった一般的な HTML属性 に加え、他の HTML属性をカスタマイズすることも可能です。

属性を追加したり、変更するには Custom をクリックして 属性の名前と値を入力します。 

ビジュアルエディタから行った変更は、コードにも反映されます。HTMLの編集から確認や変更が可能です。

要素をコピーしペーストする

要素を複製することができます。

• 複製したい要素を選択します。選択してから、コピー をクリックしてください。

• 押した後に、Paste というメニューオプションが出てきます。

• 挿入したいところの要素を選択して、この要素の直前 か この要素の直後 を選択してください。

位置変更

要素の順序を変更することができます。

• 変更したい要素を選択して、位置変更をクリックしてください。

• 選択した要素を新しい位置までドラッグしてください。

親要素を選択する

選択した要素の、親を選択することができます。

例えば、リンクが付いてる画像の飛び先を変更したいのですが、そのリンクを直接選択できません。画像を選択して、親要素を選択する を使用すれば、リンクの要素を選択できるようになります。

動的コンテンツと静的コンテンツの違い

動的コンテンツ

ユーザーインプットなどに応じて生成されるコンテンツです。サーバーにリクエストを投げて、サーバーがレスポンスとしてユーザーに更新したコンテンツを表示します。

静的コンテンツ

インターネットに載せる前にすでに決まっているレイアウトなどのコンテンツです。ユーザーがページをリフレッシュしても、同じものが表示されます。

動的コンテンツを編集する際の注意点

ビジュアルエディタから、動的コンテンツを編集することはお勧めしておりません。動的コンテンツの内容をビジュアルエディタから変更すると、不具合が起こる可能性が高いです。

動的コンテンツを編集する場合は、HTMLの編集 ではなくて、</>コードを編集 を選択し、コードエディタをご利用ください。

1. 編集したいバリエーションを選択してください。

2. 左側に出てくるメニューにある </>コードを編集 ボタンをクリックしてください。

こちらが コードエディタ です。jQuery・JavaScript のコードを書くことで、ページ内にある動的コンテンツに変更を加えることができます。CSSのコードを書くこともできます。