ビジネス向けのランディングページにクローバ PAGEをご利用いただいている方も多いと思います。せっかくランディングページを作るのですから、サイトを訪問してくれたできるだけ多くの人に申し込みをしてほしいですよね。画面のヘッダーにも申し込みボタンがあったらいいなとか、カバー画像にも申し込みボタンをつけたいなというときに、便利なのがCTA(コールトゥアクション)機能です。
CTAとは、サイトを訪問してくれた人に具体的な行動を促すための要素のことです。例えば、セミナーを案内するホームページを作るのであれば、セミナーの申し込みを促すためのボタンを目立つところに配置することで、利用者がセミナーに参加しやすくなります。
プロジェクトの管理画面から、「高度な設定」>「詳細設定」を開きます。「コールトゥアクションを使用する」にチェックを入れることで、ヘッダーにCTAを設置することができます。CTAは標準のヘッダー、カスタムヘッダーのどちらでも使用できます。
CTAボタンはこのように表示されます。
カスタムヘッダーの場合はスクロールに合わせてCTAボタンもついてきます。
スマートフォンでは画面の下にボタンが固定表示されています。
続いて、カバー画像にもCTAを設置してみましょう。プロジェクトの管理画面から「サイト管理」>「カバー画像」を開いて、CTAを設置したい画像の設定画面を開きます。
CTAを設置するには、画像の配置が「画面いっぱいに表示」に設定されている必要があります。
「コールトゥアクションを使用する」にチェックを入れて、CTAを有効にします。
カバー画像にもCTAが表示されましたね!
CTAボタンにはそれぞれ固有のIDが割り当てられているので、Google Tag Manager等でクリックイベントを計測することができます。Google Tag Managerを設定する際は、以下の表を参考にしてみてください。
| ID | クラス | |
|---|---|---|
| ヘッダーのCTAボタン | header-cta__button | cta__button header__cta |
| モバイルのCTAボタン | mobile-cta__button | cta__button mobile-cta__button |
| カバー画像のCTAボタン | hero-cta__button | cta__button hero__cta |
今回はコールトゥアクション(CTA)の表示方法について紹介しました。ランディングページに使っているユーザーにはかなり嬉しい機能なのではと思います。かんたんに設置できるので、ぜひ試してみてくださいね。