HubSpotでCTAバナーを設置する手順：4つの表示形式と表示条件の決め方

HubSpotのCTAバナーは、スティッキーバナー・ポップアップボックス・スライドイン・埋め込み済みの4つの表示形式から選びます。

設定するのは4つです。 表示するタイミング、表示するページと除外ルール、訪問者の条件、そして表示頻度です。この4つが決まれば、あとは画像とリンク先を入れるだけで公開できます。

注意点が1つあります。 一覧画面では表示回数とクリック回数を確認できますが、どのページで何回表示・クリックされたかは分析できない仕様です。ページ別に効果を見たい場合は、対象ページを絞ったCTAを別々に作る必要があります。

BtoBビジネスのWEBサイトにおいてもCTA（Call To Action）ボタンはさまざまなWEBサイトで見られるものとなりましたが、これはWEBサイトの訪問者により行動を促して欲しいと運営側が思ったときに出てくるものです。CTAバナーがあることでWEBサイト訪問者にさまざまな行動を促すことができ、それが結果的に問い合わせや資料請求にもつながります。

利用するための前提条件は？

※この機能はHubSpot Marketing HubおよびHubSpot CMS HubのProfessional Plan / Enterprise Planにおいて利用できます ※この機能は記事公開時においてはパブリックベータ版となっています

記事公開後に提供状況が変わっている場合があります。 現在の提供状況と対象エディションは、HubSpotのナレッジベースで最新の情報をご確認ください。

HubSpotのCTAバナー機能を利用するには、ベータ版へのアクセス申請が必要となります。ベータ版へのアクセスについてはスーパー管理者が行う必要がありますので、スーパー管理者権限をお持ちでない場合は、スーパー管理者に依頼するようにしましょう。

申請の手順そのものはHubSpotの新機能をベータ版でいち早く使う方法にまとめています。

HubSpotの新機能をいち早く利用する方法（ベータ版への参加）

CTAバナーはどこから作成しますか？

HubSpotのCTAバナー機能のベータ版へのアクセス申請が完了すると、以下のようにCTA機能の画面が変更になっているかと思います。

CTA機能の利用方法は、グローバルメニューの[マーケティング]から[リード情報の収集]の中にある[CTA]を選択します。

ベータ版のアクセス申請が完了していると、左側のメニューがプルダウンで選択できるようになっています。ここで[CTAベータ]を選択しましょう。

新規にCTAバナーを作成する際は、右上の[作成]ボタンを押します。

CTA作成にあたっては、事前に作られたテンプレートから選択してCTAを作成する方法と、ゼロから作成する方法と２つの方法があります。

今回はゼロから作る方法について解説していきますが、CTAバナーには４つの種類があります。

• スティッキーバナー

• ポップアップボックス

• スライドイン

• 埋め込み済み

スライドインバナーはどう設定しますか？

ここではスライドインのCTAバナーの作成方法・設定方法について解説していきます。

CTAバナーは左右上下どこからでも登場させることができます。下記画像の赤枠で囲った部分にて、画像やサイズ、リンク先などを設定することができます。

表示するタイミングを決める

次にターゲティングを設定します。ターゲティングでは以下の内容を設定します。

• 表示するタイミング ボタンクリックによるトリガー 訪問者がページのボタンをクリックするとCTAが表示されます。 ページスクロール時にトリガー 訪問者がページを特定の割合でスクロールしたときにCTAが表示されます。 離脱糸に基づいて実行 訪問者がWEBサイトから離脱するタイミングで表示されます。 経過時間後にトリガー 訪問者がページに一定時間滞在したときに表示されます。 無操作の後にトリガー 訪問者による操作が一定時間ない場合に表示されます。

記事を読み終えた直後に資料を勧めたい場合は、スクロール率か経過時間が向いています。 開いた直後に出す設定にすると、読む前に閉じられます。

表示するページと除外ルールを決める

次にどの場所で表示されるかを決めます。考え方として、どういったページを訪問した人にはどういった行動をしてほしいか…という基準で表示させる場所を検討すると良いと思います。例えば、料金ページを見た人には問い合わせ用のCTAバナーを表示させる、製品ページを見た人に、製品の詳細が掲載されているホワイトペーパーダウンロードページへ誘導する、などです。

また、表示させる場所だけでなく、表示させない場所も検討するようにしましょう。例えば、問い合わせページにて、問い合わせページへの誘導のバナーを表示させても意味がありませんので、そういった除外ルールも設定するようにしましょう。

訪問者の条件と表示頻度を決める

次に訪問者の情報に基づいてフィルタリングを行います。ここではさまざまな条件でフィルタリングをすることができます。例えば、HubSpotで作成した動的（静的）リストに含まれる人のみに表示させたり、デバイスのタイプに基づいて表示させたり、国を限定して表示させたりすることができます。もちろんこれらの条件を利用して、除外ルールを設定することもできます。

さらに、表示させる頻度についても設定することができます。訪問の際に表示させるのか1度しか表示させないのか、複数回表示させるが、その間のインターバルをどのくらいの期間あけるのか、などを設定することができます。

条件に使うリストの作り方はHubSpotのリスト機能とは？動的リストと静的リストの使い分けの仕方で解説しています。

オプションを設定する

最後にオプションとして、いくつかの設定をすることができます。

• 画面サイズ モバイルやタブレットなど、画面サイズが小さい場合には表示させないオプション

• キャンペーン どのキャンペーンに所属させるのかの設定

• スケジュール いつからいつまでに表示させるのか（もしくはずっと表示させるのか）の設定

効果はどこまで分析できますか？

一覧画面においては、そのバナーが何回表示されたのか何回クリックされたのかを見ることができます。一方で、どのページで何回表示されたのか、どのページで何回クリックされたのか、については分析できない仕様になっているため、その点については今後の改善を期待したいところです。

回避策は、対象ページを絞ったCTAを分けて作ることです。 料金ページ用と製品ページ用を別々のCTAとして作成すれば、一覧の表示回数とクリック回数がそのままページ別の数字になります。作るCTAの本数は増えますが、どのページが効いているかを判定できます。

つまずきやすい点は？

1. 表示のタイミングが早すぎる

ページを開いた直後にポップアップを出すと、内容を読む前に閉じられます。スクロール率か経過時間を条件に入れてください。

2. 除外ルールを設定していない

問い合わせページや資料ダウンロードの完了ページにまで同じバナーが出ると、すでに行動した人に同じ行動を促すことになります。表示ページを決めたら、必ず除外ページもセットで決めてください。

3. リンク先を用意する前にバナーを作る

CTAの先にあるフォームやダウンロードページが未完成のまま公開すると、クリックした人が行き止まりに当たります。フォームの設計はフォームの入力方式、獲得後の流れはリードジェネレーションで扱っています。

まとめ

HubSpotのCTAバナーは4つの表示形式から選び、表示タイミング・表示ページと除外ルール・訪問者の条件・表示頻度の4つを設定すれば公開できます。

効果測定はバナー単位までで、ページ別の内訳は取れません。ページ別に見たい場合は、対象ページを絞ったCTAを分けて作ってください。

トライエッジではHubSpotの導入・運用を支援しています。詳しくはHubSpot 導入・運用支援、サイト側の設計からのご相談もお問い合わせより承ります。

FAQよくあるご質問

出典・執筆：株式会社トライエッジ／濱津 舞（AEO／CRM・MA 導入・運用）。 2024年4月8日公開／2026年8月14日更新。