JS/CSSエディタを使用してバリエーションに高度な変更を加える
バリエーションページのデザインやコンテンツを手動で変更するだけでなく、PageSenseビジュアルエディタを使用して独自のカスタムJavascriptおよびCSSコードの変更も直接書くことができます。このオプションを使用すると、バリエーション全体でスタイル、属性、または値に対して自由に変更を素早く実装することができます。Zoho PageSenseでは、2つの方法でカスタムコードを追加することができます：
1. バリエーションレベルでの設定: これにより、A/Bテストのすべてのバリエーションではなく、特定のバリエーションにカスタムのJS/CSSコードが追加されます。
2. 実験レベルでの設定: これにより、元のバージョンを含むテスト全体とすべてのバリエーションに、カスタムのJS/CSSコードが追加されます。これは、グローバルなコードエディタを使用して行います。
JS（Javascript）コードエディタを使用して、バリエーションページ上の要素を移動、削除、リサイズ、テキストやURLリンクの変更など、簡単で標準的な変更を行います。
例: ウェブサイト上のすべてのバナーで「サインアップ」CTAテキストを「はじめる」CTAに変更する。CSSコードエディタを使用して、バリエーションページ上の特定の要素の外観を変更します。フォントサイズ、色、配置、影、ボーダーエフェクトなどの変更が可能です。これらのCSSの変更は、<body>タグの末尾に<style>タグを追加することで適用されます。
例: バリエーションページの見出しタグにボーダーと影を追加する。
Zoho PageSenseでは、プロジェクトJS設定の下でウェブサイト全体に対してカスタマイズされたJS/CSSコードの変更を実装することもできます。 1. A/B実験を選択し、 エディター タブをクリックします。
2. 以下のいずれかの操作を行います：
a. 特定のバリエーションに固有のカスタムJS / CSSコードを追加するには、ビジュアルエディタの左上にあるJSボタンをクリックし、バリエーション用のJavascriptを貼り付けるか入力します。カスタムCSSコードを追加するには、CSSタブをクリックしてください。
たとえば、バリエーションページで「もっと見る」というボタンのテキストを「詳細を読む」に変更したい場合、JSコードエディタに対応するカスタムJavaScriptコードを追加することで、特定のバリエーションページに変更を適用することができます。実験中の元のバージョンも含まれます。
一方、バリエーションページの特定のセクションに背景色を適用したい場合は、以下に示すようなCSSカスタムコードを使用することができます。このコードは、特定のバリエーションページがユーザーのWebブラウザで読み込まれる際に実行されます。
b. すべてのバリエーションにJS/CSSの変更を適用するには、ビジュアルエディタの右上にあるグローバルコードボタンをクリックし、実験のための希望のJavascriptコードをJSセクションに貼り付けるか、書き込んでください。カスタムCSSコードを追加するには、CSSタブをクリックしてください。
たとえば、ウェブページの「もっと見る」ボタンを「詳細を読む」に変更したい場合、グローバルコードエディタに対応するJavaScriptを追加することで、実験のオリジナルバージョンを含むすべてのバリエーションページに変更を適用することができます。
一方で、バリエーションページの特定のセクションに背景色を適用したい場合は、Global Codeエディタ内に対応するCSSコードを記述し、A/B実験の元のバージョンを含むすべてのバリエーションページでテストすることができます。
3. 保存をクリックし、次へ をクリックして変更内容を保存します。