目次
1.OptimizelyXのビジュアルエディターOptimizelyXのビジュアルエディターを活用することで、コードを書かずに素早く顧客体験を改善できます。また、カスタムコードを使用することで、CSS・Javascriptをコーディングして顧客体験を改善できます。
注：ビジョアルエディターがページを読み込まない場合は、ポップアウトエディターで読み込み直してください。もしそれでも問題が生じる場合は、トラブルシューティングをご覧ください。
ビジュアルエディターページを表示すると、編集中のページをご覧になれます。もし、サイト内の違う要素を編集するために、ロードするページを変更したい場合は、以下の手順で変更できます。
1.ページ名とURLが記載されているバーをクリックし、"View"をクリックしてください。
2.”Configure Page”画面に移ります。その後、編集したいページのURLが１種類か、それとも複数かによって手順が変わります。
◆URLが１種類の場合は、URLを変えることで、編集したいページを変更することができます。URLフィールドは、それが使われるあらゆるExperiment（実験）において、ページの定義を変更します。
◆URLが複数ある場合や全ページに対してテストを行う場合は、エディターURLフィールドを変更することができます。これを行ったとしても、ビジュアルエディター上でのページ表示にのみに影響し、訪問ユーザーが見るページのURLターゲティングには影響ありません。
注：URLの種類が１種類の場合、"Configure Page"上でのサイトURLを変えると、あらゆるExperimentとキャンペーンにおける、ページのターゲティングが変わってしまいます。そのページで複数のエクスペリメントを行いたい場合は、そのページを編集するのではなく、新しくページを作ることをお勧めします。
複数ページやファネルでA/Bテストを作成する場合、ドロップダウンメニューにある"Add Page"をクリックし、今あるページを追加するか、新しいページを作るかを選んでください。
ビジュアルコードやカスタムコードで複数ページのA/Bテストを実行する場合、まずドロップダウンから編集中のページを選んでください。編集が確実に、かつ正しく反映されます。
注：原則的に、"Implementation"のセクションで新しいページを作ることをお勧めします。ページ自体はA/Bテストやキャンペーンを跨いで何度も使用できるからです。Implementationタブでページを作ることにより、素早くページを作ることができるだけでなく、事例ごとのデータを収集して各ページに追加することができます。
ページ内の要素をクリックすることでビジュアルの変更ができます。要素を選ぶ方は、左側のメニュー上部や、セレクターボックスに入力してください。その後、左側にあるメニューのオプションを使い、要素の変更を行えます。
セレクトボックスの右側にある虫眼鏡ボタンをクリックすることで、セレクターが何を選んだのかを、ページ内の要素に重ねてご覧になれます。
その中で編集したい要素を選び、それをクリックしてください。
要素の編集途中の場合は、保存するか、その変更を削除してください。新たに要素を編集しない場合は、もう一度虫眼鏡アイコンをクリックしてください。
時に、選択したい要素をクリックだけで選択することが難しい場合や、複数の要素を選択したい場合があるかと思います。
その場合は、以下の手順でセレクターを編集することができます。
[ 指でボタンを押す ] アイコンを押して、ビジュアルエディターをインタラクティブモードに切り替えてください。
切り替えることで、以下のことが実現します。
これにより、ビジュアルエディターの要素セレクター機能が停止するので、ページに自由に干渉できるようになります。
メニューの"Create"ボタンをクリックすることで編集を始めることができます。
ビジュアルエディターでHTMLやCSSのプロパティを変更できます。それ以外にも、以下のことができます。
今の要素を変える以外にも、インサートHTMLをクリックすることで新しい要素を追加できます。
HTMLを使って新しい要素を追加する場合、HTMLの知識が必須となります。HTMLを十分に使いこなせない場合は、HTMLに詳しい方の力を借りながら作業を行ってください。
"Insert Image"をクリックすることで、新しいイメージを追加できます。また、"Redirect"をクリックすることで、別のURLのページに出力できます。
拡張（一度作った要素を再利用する）場合は、"Implementation"＞"Extensions"＞"Create New"の手順を踏んでください。
ビジュアルエディターを使うことで、要素の並び替えや位置変更ができます。以下がその手順の流れになります。
例えば、"Rearrange [位置を変えたい要素] to go before [ターゲットとなる要素]"と設定することで、要素をターゲットとする要素のひとつ前に場所移動します。
編集作業をしていると、バリエーションを作るのではなく、別のURLのページに訪問者を割り当てたい場合があると思います（例えば２種類のLPを比較テストする場合など）。
Optimizelyでは、この訪問者を別のURLに遷移させる機能を"Redirect"と呼び、バリエーションのひとつ（もしくは複数）をオリジナルの代わりに、LPのURLとして訪問者を割り当てます。
Optimizelyでは、削除しない限り、一度作ったバリエーションのコードは消滅しません。JS・CSSを変えたどんなテスト案でも、リダイレクト前には実行されます。
ビジュアルエディターで編集をすると、変更点はOptimizelyのCDN（コンテンツデリバリーネットワーク）サーバーにアップロードされます。テスト実行する前に、どのように訪問者にページが表示されるのか確認することができます。
1,アップロードのステータスを確認します。CDNにアップロードしている(Uploading to CDN)のであれば、Experiment（実験）はまだアップロード中です。プレビューを見るには、下のメッセージ文が消えるまでお待ちください。
2,"Changes"メニューで、"Preview Tool"を選択してください。
他にも、以下のようにプレビュー機能を活用できます。
注：左のメニューにプレビューの項目が見つからない場合は、チェンジオプションのサブメニューにアクセスしてしまっている可能性があります。その場合は、一度ブラウザバックし。プレビュー項目をもう一度探してください。
編集中にページのロードで問題が生じた場合、ヘッダーにある"Pop-out"エディターをクリックしてください。
ポップアウトエディターでは、[ 新しいブラウザで開く ] アイコンをクリックすることで、新しいブラウザ画面にページをロードします。