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. 保存をクリックし、次へ をクリックして変更内容を保存します。
Zoho CRM 管理者向けトレーニング
「導入したばかりで基本操作や設定に不安がある」、「短期間で集中的に運用開始できる状態にしたい」、「運用を開始しているが再度学び直したい」 といった課題を抱えられているユーザーさまに向けた少人数制のオンライントレーニングです。
日々の営業活動を効率的に管理し、導入効果を高めるための方法を学びましょう。
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
Zoho コミュニティ オンラインフォーラム
フォーラムをフォローして、Zoho ユーザーによる活用のノウハウやアドバイスを入手。サービスのアップデート情報やユーザー向けイベントの告知について通知を受け取りましょう。
Related Articles
ページセンスにカスタムプロジェクトJSコードを追加する
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 ...Zoho PageSense と Mixpanel を統合する
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 もしMixpanelを使用してウェブサイトのトラフィックをモニタリングし、顧客がサイトのページとどのように対話しているかをより詳しく把握したい場合は、PageSenseとの統合が強力な洞察を提供します。この統合により、すべてのA/BおよびSplit ...ページセンスビジュアルエディターの概要
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 Zoho ...Zoho PageSense と Google Universal Analytics を統合する
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 Google Universal Analytics（UA）の統合を使用すると、Zoho PageSenseで実行されている実験の各バリエーションのウェブメトリクスを追跡できます。 このページでは、以下の方法を使用して、Zoho PageSenseをGoogle ...バリエーションに収益目標を追加する
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 PageSenseは、A/B（およびSplit ...