ビジュアルエディター

2020-06-04 22:20:00 [Optimizely Classic]実験のビルド

WYSIWYG（What You See Is What You Get）エディターとも呼ばれる Optimizely ビジュアルエディターを使用すると、実験のページのバリエーションをすべて視覚的な形式で作成できます。

ベストプラクティス
ここでは、ビジュアルエディターを使用するときに留意するとよいベストプラクティスをいくつか示します。

ページの要素への変更を微調整するには、[移動してサイズ変更] を使用する。
離れた位置に要素をドラッグするには、[再配置] を使用する。
[HTML の編集] の使用時には、可能な限り最小のコンテナを選択する。
ビジュアルエディターで、同じ要素に対して複数の HTML の変更をしない。
動的にロードされたコンテンツでの [HTML の編集] の使用には注意してください。
[HTML の編集] ツールを使用して、<script> タグを追加しないでください。

1.エディターの概要
2.[スタイルの編集] を使用した視覚的プロパティまたは CSS プロパティの変更
3.変更（または追跡）する正しい要素を選択するにはコンテナの選択が便利
4.移動してサイズ変更は慎重に使用する。再配置を使うとよい
5.対話型要素や動的要素の編集には対話モードを使う
6.HTML の編集/HTML の挿入は強力な機能だが、使用には注意が必要
7.エディター設定を使用したエディターでのページの変更
8.エディターでのモバイルウェブサイトの編集
9.エディターのキーボードショートカット

エディターの概要

ビジュアルエディターのクイックツアーを開始します。

ビジュアルエディターのクイックツアーを開始

実験タイトルは実験の名前です。実験に応じた、覚えやすく、わかりやすい名前にしてください。

上部パネルには、変更を保存する、元に戻す、やり直す基本ツールがあります。ここで、訪問者グループと目標を作成または使用して、実験を開始または一時停止することもできます。

エディターモードでは、編集モードと対話モードを切り替えることができます。詳細については、この記事の対話モードのセクションを参照してください。

[オプション] メニューには、[URL ターゲット設定] や [トラフィックの割り当て] など、実験の共通設定があります。

バリエーションメニューには、[プレビュー] や [新しいページにリダイレクト] など、バリエーションの共通設定があります。

[コード編集] ボックスでは、コードを使用してバリエーションを作成できます。

次の各セクションでは、ビジュアルエディターの主要な機能の使用方法について説明します。

[スタイルの編集] を使用した視覚的プロパティまたは CSS プロパティの変更

Optimizely を使用すると、要素をクリックして [要素の編集...] > [スタイルの編集] を選択し、要素の CSS に含まれている視覚的プロパティを変更できます。

[要素の編集...] > [スタイルの編集] を選択し、視覚的プロパティを変更

ヒント：
[スタイルの編集] を使用して要素のプロパティを変更できませんか。要素が画像である可能性があります。画像は、CSS を変更しても編集できません。要素をクリックして、[画像の変更] オプションが表示されるかどうかによって、エディターの要素が画像であるかどうかがわかります。
ウェブサイトでは多数の要素が重なっているため、間違った要素を選択している可能性もあります。正しい要素の正確な選択に関する詳細については、後述の [コンテナの選択]ツールのセクションを参照してください。

[スタイルの編集] を使用すると、要素のスタイル（CSS）プロパティを簡単に変更できます（テキスト、色と背景、ディメンション、ボーダー、レイアウトなど）。一部のセクションでは、[詳細の表示] をクリックすると、詳細プロパティも変更できます。

要素のスタイル（CSS）プロパティを簡単に変更

たとえば、[スタイルの編集] を使用して、フォントサイズ、フォントの色、背景色、ボーダースタイルを変更し、上記の [Google でログイン] ボタンをクリックすると、結果は次のようになります。

スタイル（CSS）を変更した結果

[スタイルの編集] でできること以上にバリエーションの CSS を広範に変更する場合は、次の jQuery コードを使用して、[コードの編集] セクションに CSS を入力する必要があります。

$("body").append('<style> YOUR_CSS_HERE</style>');

この他に、[コードの編集] セクションの使用が必要なのは、背景画像を変更する場合です。これはページの「ボディー」に配置されているためコードが必要です。 Optimizely のビジュアルエディターでは選択できません。

背景画像を変更する場合は、次のコードを [コードの編集] ボックスにコピーして、サンプル URL を実際の画像の URL に置き換えます。これは、ブラウザーの画像を右クリックして、[画像 URL のコピー] を選択すると表示されます。

$("body").css({'background-image':'url("http://exampleurl.com/image.jpg" )'});

画像がオンラインにホストされていない場合は、Optimizely の [挿入...] > [画像の挿入] 機能を使用して画像をアップロードする必要があります。次に、画像を右クリックして、[画像 URL のコピー] を選択します。

また、[画像の編集] または [画像の挿入] を使用してサイトの画像を簡単に追加または置き換えて、画像の交換実験を実行することもできます。アップロード可能な画像の最大サイズは 4 MB です。

変更（または追跡）する正しい要素を選択するにはコンテナの選択が便利

[コンテナの選択]

Optimizely により、親ページの要素を選択し、現在選択している要素をエディターに含めることができます。エディターでの要素の選択時に問題が発生した場合や期待したようにスタイル変更が機能しない場合にこのヒントが役立ちます。

追跡するコンテナ内の要素をクリックし、[コンテナの選択] を選択するだけです。該当する要素を含む HTML 要素の長いリストが表示されます。リストの上部には、自分が選択した要素の次に大きい HTML 要素、下部には最も大きい HTML 要素が表示され、<body> 自体が続きます。つまり、リストには、より限定的な要素からあまり限定的でない要素の順に並べられます。

これは、マウスを使用した場合には簡単に選択できないより大きな要素の選択に役立つ方法です。多くの場合、この方法を使用して再配置、または CSS を編集するアイテムを選択します。

移動してサイズ変更は慎重に使用する。再配置を使うとよい

[移動してサイズ変更]

これらの機能の動作については、このページの上部にある基本的な変更に関するビデオを参照してください。[移動してサイズ変更] では、ピクセル計算された移動によって要素を調整します。これは、小さな移動に適していますが、要素の長距離の移動には適していません。[移動してサイズ変更] を使用して要素をページの一方の側から他の側にドラッグしたい場合がありますが、大きなピクセル長（数百ピクセル以上）の移動により、ブラウザー間の互換性問題が発生する可能性があります。ブラウザーごとにピクセル長の解釈は異なります。

ベストプラクティス：

離れた位置に要素を移動する場合の最適なソリューションは、使用できるときは [再配置] ツールを使用することです。[再配置] を使用してできる限り最終的な位置に近い場所に要素をドラッグして、HTML の構造を再配置し、最終的な位置のあたりにある要素の近くにその要素を配置します。[移動してサイズ変更] を使用して、その位置から最終的な位置に要素を移動します。

ヒント：
上級ユーザーには、[コードの編集] ボックスで使用できるいくつかの便利な挿入 jQuery メソッドがあり、分離された要素をバリエーションコードで配置する場所をさらに正確に絞り込むことができます。

http://api.jquery.com/category/manipulation/dom-insertion-outside/

.after()

.before()

.insertAfter()

.insertBefore()

http://api.jquery.com/category/manipulation/dom-insertion-inside/

.append()

.appendTo()

.prepend()

.prependTo()

対話型要素や動的要素の編集には対話モードを使う

Optimizely の対話モードは、ウェブサイトをエディターにロード中に変更できるように設計されています。たとえば、対話モードを使用して、ドロップダウンメニューまたはトレイ内の項目を編集します。

エディターで要素をクリックすると、通常はコンテキストメニューが表示されます。これは、ユーザーは実際には動的要素と対話できないことを意味します。対話モードを入力し、通常ブラウザーで行っているようにページと対話します。ページを変更したい状態にして、[編集モード] をクリックするか、キーボードで Ctrl + I を押します。

注：
対話モードでは常に元のページが表示されるため、対話することができます。編集モードに変更すると、バリエーションコードが適用された状態のページが表示されます。

次に、対話モードの動作の例を示します。次のページには、展開および縮小できる 3つのセクションがロードされます。

対話モードの動作の例

「Learn」という 3 つ目ブロックに含まれているコンテンツに対してテストする場合は、展開する必要があります。そのためには、エディターの右上にある [対話モード]をクリックします。

エディターの右上にある [対話モード]をクリック

これで、プラスボタンをクリックしてこのセクションを展開し、変更できます。

プラスボタンをクリックしてセクションを展開

[対話モード] を再度クリックすると、元のページが表示され、対話しながらさまざまな状態にすることができます。[編集モード] をクリックすると、新しい状態のページに適用された変更が表示されます。

HTML の編集/HTML の挿入は強力な機能だが、使用には注意が必要

[挿入] > [HTML の挿入] をクリックして表示される画面

実験で細かい HTML 変更をテストする場合は、[HTML の編集]/[HTML の挿入] を選択すると実行できます。これにより、ページを表示する方法をドリルダウンできます。たとえば、[HTML の編集] を使用して、要素を「コピーして貼り付ける」ことができます。コピーする要素をクリックして [HTML の編集] を選択し、ボックス内にコードをコピーするだけです。次に、要素を複製するページの領域をクリックして [HTMLの挿入] を選択し、コードを貼り付けることができます。これにより、要素が複製され、そこから次の要素を変更できます。

[HTML の編集]（または [HTML の挿入]）を使用して、バリエーションページに動画を追加することもできます（YouTube、Vimeo、Wistia、またはその他の動画サービスから追加する動画の埋め込みコードを貼り付けます）。

[挿入] > [HTML の挿入] をクリックすると、次のように表示されます。

省略記号（...）を動画の埋め込みコードに置き換えた結果

次に、省略記号（...）を動画の埋め込みコードに置き換えます。次のようになります。

[オプション] > [エディター設定] をクリックしてダイアログを表示

コールバック API を実装していない場合は、目標の iFrame 動画を追跡できないことに注意してください。エンタープライズプランのお客様は、サポートチケットを送信して詳細についてお問い合わせください。

[HTML の編集] は非常に便利な機能ですが、いくつか注意事項があります。

ベストプラクティス：

HTML の変更は、非常に広範囲の影響を簡単に与えてしまうことがあるので、可能な限り最小のコンテナを選択してください。エディター内から編集する選択対象を可能な限り絞り込んでください。たとえば、親デバイス自体全体の HTML を編集するのではなく、そのデバイス内の画像を取り込んでください。[HTML の編集] ツールが表示されると、選択した既存の HTML すべてが表示されます。これは、バリエーションコードに追加可能なすべてのテキストである可能性があります。たった 1 行の句読点を変更する小さな変更であったとしても、テキストのダイアログ全体が jQuery の .replaceWith() 文に変換される可能性があります。上記の [コードの編集] チェックボックスをオンにしてバリエーションコードがどのように表示されるかを確認できます。スニペットのファイルサイズは、文字が含められるたびに増加します。そのため、10,000 文字を超える文字を編集する場合は、訪問者のページのロードに非常に時間がかかり、問題が発生した場合にデバッグが非常に困難になる可能性があります。

ビジュアルエディターで同じ要素に HTML の複数の変更を加えないようにしてください。編集したばかりの HTML をやり直したり書き直す必要がある場合は、前の変更のバリエーションコードを（[コードの編集]ボックスで）直接調整するか、または新しい変更を加えてからコードに移動し、前の [HTML の編集] の変更を削除することをお勧めします。最初に前のコードを削除して新しいコードを最初から作成することもできます。新しい [HTML の編集] の変更では、選択したすべてのコンテンツが置き換えられるため、同じ要素を編集する古いバリエーションコードを保持する理由はありません。

動的にロードされたコンテンツでの [HTML の編集] の使用には注意してください。これには、製品価格、製品詳細、またはエディターでロードしたページのバージョンに固有の広告なども含まれます。[HTML の編集] は、編集を選択したすべてのコンテンツをハードコード化するため、動的コンテンツを簡単に上書きして静的にすることが可能です。新しいバリエーションコードは、エディターで変更が行われると常にページで実行されたようにページを表示します。[HTML の編集] ダイアログボックスで要素の未加工の HTML を表示する場合は、変更に対して [完了] を選択すると変更がいずれにも影響を与えない場合でもそのコンテンツのすべてがハードコード化されます。動的コンテンツの編集を避け、これを含まないページの領域を選択するようにしてください。編集が必要な場合、jQuery を使用してこれらの領域の実験を編集する方法以外にも方法はあります。[HTML の編集] 以外のツールも使用できます。

[HTML の編集] ツールを使用して、ページに <script> タグは追加できません。バリエーションの一部として外部の JavaScript をロードする場合は、開発者向けドキュメントで説明する方法を使用することをお勧めします。または、[コードの編集] ボックスでバリエーションコードに JavaScript の行を直接追加することができます。

エディター設定を使用したエディターでのページの変更

[エディター設定] では、エディターにロードされるページを制御できます。実験の実行対象とは関係ありません。実験の実行対象を制御するには、[URL ターゲット条件]を使用してください。

ほとんどの場合、実験を実行するページをロードするだけです。ただし、複数の製品ページなど、ページグループで実験を実行することもあります。これを実行するには、変更するテンプレートを含む 1 つのページをエディターにロードし、それを実験の作成に使用します。次に、[オプション] > [URL ターゲット設定] を使用して、テンプレートを共有するその他のすべてのページにテストを拡張します。

[オプション] > [エディター設定] をクリックすると、次のようなダイアログが表示されます。

[エディター設定]

ダイアログでは、上記の例のように最初にロードした URL が別のページにリダイレクトされる場合に通知されます。これは、実験を実行するように設定する場所を特定するのに役立つ可能性があります。ページがリダイレクトされる場合は、実験をリダイレクト先のページで実行するようにしてください。他の場所に自動的にリダイレクトされる URL をロードしようとすると、Optimizely もリダイレクトされるため、通常は最終的なリダイレクト先の URL をロードするのが最善です。

エディターでのモバイルウェブサイトの編集

Optimizely エディターを使用して、モバイルユーザーに表示されるページのコンテンツをテストできます。これを実行するには、[オプション] > [エディター設定] に移動します。

次に、[エディター設定] インターフェースにサイトの URL を入力し、[モバイル版のページをロードする] というチェックボックスをオンにします。そうすると、選択したデバイスに表示されるサイトが表示されます。選択できるのは、Android スマートフォン、Android タブレット、iPad、および iPhone です。

モバイル固有のサイト（m.yoursite.com など）がある場合は、その URL を入力してエディターにサイトをロードします。反応を見ながらサイトを設計する場合は、そのサイトをこの機能を使用して同様にテストできます。この機能を使用すると、モバイルサイトの AB テストが可能になります。

重要：
[エディター設定] 機能は、実験の実行対象には影響を与えません。エディターで表示しているページにのみ影響します。モバイル専用ではないサイトを変更する場合は、モバイルデバイスを使用する訪問者にのみ適用する訪問者グループを設定します。

モバイル設定

[適用] をクリックすると、選択したモバイルデバイスで表示されるサイトを使用してエディターがリロードされます。これで、非モバイルのサイトと同じエディター機能を使用してバリエーションを作成できるようになります。

モバイルでの表示

注：
エディターでは、プロキシーを使用してページをロードし、選択したモバイルデバイスに対するユーザーエージェントを変更することによりモバイルデバイスをシミュレートします。モバイルサイトで特定の Cookie、セッション状態、またはゲート型コンテンツを使用する場合は、エディターにページが正しくロードされない可能性があります。これが発生した場合は、Optimizely サポートにお問い合わせください。

エディターのキーボードショートカット

キーボードショートカット、またはホットキーを使用すると、よく使用する機能に迅速にアクセスできるため時間を節約できます。これらは簡単に覚えられて、次の機能を使用する際に役立つように設計されています。

バリエーションコードの切り替え：C

バリエーションメニューの切り替え：V

対話モードの切り替え：Ctrl + I

オプションメニューの切り替え：O

ツールバーを折りたたむ / 展開する：T

やり直し：Y

元に戻す：Z

保存：Ctrl + S

バリエーションの追加：N

元のバリエーションに切り替え：`（アクサングラーブ、1 のキーの左）

バリエーションの 1 から 10 の切り替え：数字キー 1 から 0

前のバリエーション：-（マイナスキー）

次のバリエーション：=（イコールキー）

お問い合わせ

すべてのデバイス、チャンネル、すべてのユーザーとのタッチポイントで
最適な顧客体験を提供できます。