JS/CSSエディタを使用してバリエーションに高度な変更を加える

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コードの変更を実装することもできます。
カスタムな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.  保存をクリックし、次へ をクリックして変更内容を保存します。

アラート:A/Bテストのバリエーションを変更できるのは、実験が下書き状態または一時停止状態の場合のみです。

    Zoho CRM 管理者向けトレーニング

    「導入したばかりで基本操作や設定に不安がある」、「短期間で集中的に運用開始できる状態にしたい」、「運用を開始しているが再度学び直したい」 といった課題を抱えられているユーザーさまに向けた少人数制のオンライントレーニングです。

    日々の営業活動を効率的に管理し、導入効果を高めるための方法を学びましょう。

    Zoho CRM Training



              Zoho WorkDrive Resources



                Zoho Desk Resources

                • Desk Community Learning Series


                • Digest


                • Functions


                • Meetups


                • Kbase


                • Resources


                • Glossary


                • Desk Marketplace


                • MVP Corner


                • Word of the Day









                                  • 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 ...

                                  Resources

                                  Videos

                                  Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                  eBooks

                                  Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                  Webinars

                                  Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                  CRM Tips

                                  Make the most of Zoho CRM with these useful tips.