ユーザーグループ

ホームページにCTA(コールトゥアクション)を設定してみよう

ホームページにCTA(コールトゥアクション)を設定してみよう

ビジネス向けのランディングページにクローバ PAGEをご利用いただいている方も多いと思います。せっかくランディングページを作るのですから、サイトを訪問してくれたできるだけ多くの人に申し込みをしてほしいですよね。画面のヘッダーにも申し込みボタンがあったらいいなとか、カバー画像にも申し込みボタンをつけたいなというときに、便利なのがCTA(コールトゥアクション)機能です。

CTA(コールトゥアクション)ってなに?

CTAとは、サイトを訪問してくれた人に具体的な行動を促すための要素のことです。例えば、セミナーを案内するホームページを作るのであれば、セミナーの申し込みを促すためのボタンを目立つところに配置することで、利用者がセミナーに参加しやすくなります。

ヘッダーに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)の表示方法について紹介しました。ランディングページに使っているユーザーにはかなり嬉しい機能なのではと思います。かんたんに設置できるので、ぜひ試してみてくださいね。

無料で始める