A/Bテストでのビジュアルエディターの使用

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

Zoho PageSenseのビジュアルエディターでは、元のWebページのコードを変更せずに、Webページのバリエーションを作成できます。コンテンツの編集、スタイルの変更、要素の並べ替え、要素の追加や削除のほか、カスタムHTML、CSS、JavaScriptを使用した詳細な変更も可能です。

ビジュアルエディターを開く方法

Webページがビジュアルエディターで開き、バリエーションを作成、変更できます。
編集するバリエーションを［バリエーション］のドロップダウンから選択します。

ビジュアルエディターの概要

ビジュアルエディターでは、バリエーションの作成と管理に次の選択肢を利用できます。

選択肢	実行できる操作
［新しいバリエーションを追加する］	バリエーションを追加で作成したり、既存のバリエーションの名前を変更、複製、削除したりできます。
［URLターゲティング］	URLターゲティングを使用して、複数のWebページを同じA/Bテストに含めることができます。
［デバイス表示］	バリエーションの編集やプレビュー中に、［デスクトップ］、［モバイル］、［タブレット］表示を切り替えられます。
［元に戻す］／［やり直す］	直近の変更を元に戻すか、やり直します。
［共通コード］	オリジナルとすべてのバリエーションを含む、テスト全体に適用するJavaScriptまたはCSSを追加できます。
［JS／CSS］	選択したバリエーションにのみ適用するJavaScriptまたはCSSを追加できます。
［編集］／［操作］	Webページの要素を編集する操作と、Webページを操作する操作を切り替えます。
編集パネル	選択した要素で利用できる編集設定にアクセスできます。

バリエーションの作成と管理

オリジナルのWebページから複数のバリエーションを作成し、パフォーマンスを比較できます。

バリエーションを作成するには。

ビジュアルエディターで［バリエーション］のドロップダウンを開きます。
［新しいバリエーションを追加する］をクリックします。
新しいバリエーションに必要な変更を加えます。

また、バリエーションの横にある［その他］アイコンを使用して、名前を変更したり、複製したり、削除したりできます。

Webページ要素の編集

Webページ上の要素を選択して編集パネルを開き、必要な変更を行います。

操作	説明
テキストを編集する	見出し、段落、ボタンのラベル、その他のテキストを変更します。
HTMLを編集する	要素のHTMLを変更します。
HTMLを追加する	新しいHTMLコンテンツをWebページに追加します。
画像を編集する	画像を置き換えるか、変更します。
画像を追加する	バリエーションに画像を追加します。
メディアを追加する	HTMLエディターを使用して、対応している音声または動画コンテンツを追加します。
要素を移動する	ドラッグ＆ドロップで、Webページ上の要素を移動します。
要素を非表示にする	バリエーション内の既存の要素を非表示にします。
要素を削除する	バリエーションから要素を削除します。
スタイルを変更する	要素の外観とスタイルを変更します。
リンクを変更する	リンクまたは要素に関連付けられたURLを変更します。
目標を設定する	要素をテストのコンバージョン目標として使用します。

PageSenseでは、外観上の多くの変更に必要なHTMLとCSSが自動的に生成されるため、基本的な変更でコードを記述する必要はありません。

編集モードと操作モードの切り替え

ビジュアルエディターには、Webページを操作するための［編集］モードと［操作］モードがあります。A／Bテストの対象に複数のWebページが含まれる場合、ビジュアルエディターの［操作］モードを使用してWebサイト内を移動し、必要なページにアクセスできます。これは、複数のページにURLターゲティングを設定しており、対象のWebページ全体で変更または検証を行う必要がある場合に役立ちます。

モード	目的
［編集］	バリエーション内のWebページ要素を選択して変更します。
［操作］	ボタンのクリック、ドロップダウンの展開、切り替えスイッチの操作、Webページ内の移動など、訪問者と同じようにWebページを操作します。