バリエーションページのデザインやコンテンツを手動で変更するだけでなく、PageSenseビジュアルエディタを使用して独自のカスタムJavascriptおよびCSSコードの変更も直接書くことができます。このオプションを使用すると、バリエーション全体でスタイル、属性、または値に対して自由に変更を素早く実装することができます。Zoho PageSenseでは、2つの方法でカスタムコードを追加することができます:
1. バリエーションレベルでの設定: これにより、A/Bテストのすべてのバリエーションではなく、特定のバリエーションにカスタムのJS/CSSコードが追加されます。
2. 実験レベルでの設定: これにより、元のバージョンを含むテスト全体とすべてのバリエーションに、カスタムのJS/CSSコードが追加されます。これは、グローバルなコードエディタを使用して行います。
JS(Javascript)コードエディタを使用して、バリエーションページ上の要素を移動、削除、リサイズ、テキストやURLリンクの変更など、簡単で標準的な変更を行います。
例: ウェブサイト上のすべてのバナーで「サインアップ」CTAテキストを「はじめる」CTAに変更する。
CSSコードエディタを使用して、バリエーションページ上の特定の要素の外観を変更します。フォントサイズ、色、配置、影、ボーダーエフェクトなどの変更が可能です。これらのCSSの変更は、<body>タグの末尾に<style>タグを追加することで適用されます。
例: バリエーションページの見出しタグにボーダーと影を追加する。
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. 保存をクリックし、次へ をクリックして変更内容を保存します。
「導入したばかりで基本操作や設定に不安がある」、「短期間で集中的に運用開始できる状態にしたい」、「運用を開始しているが再度学び直したい」 といった課題を抱えられているユーザーさまに向けた少人数制のオンライントレーニングです。
日々の営業活動を効率的に管理し、導入効果を高めるための方法を学びましょう。