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

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

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

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

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

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

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

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

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

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

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

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

バリエーションの横にある［その他］アイコンから、名前の変更、複製、削除を行うこともできます。

ウェブページの要素の編集

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

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

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

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

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

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