コンテンツにCTA(行動喚起)を追加する。
更新日時 2025年7月7日
以下の 製品でご利用いただけます(別途記載されている場合を除きます)。
|
|
CTA(行動喚起)を作成したら、CTAをHubSpotと外部ページの両方に追加できます。外部ページ用のCTAを設定する場合は、HubSpotトラッキングコードをインストールする必要があります。ドラッグ&ドロップでマーケティングEメールにCTAを追加することもできます。
コンテンツにCTAを追加した後、 Marketing Hub または Content Hub Professional または Enterprise サブスクリプションがある場合は、 ワークフローを作成して 、訪問者がCTAに反応した後のアクションを自動化することができます。例えば、訪問者がCTAでフォームを送信した後に、一連のマーケティングEメールをトリガーして、新しいコンタクトを育成することができます。
コンテンツにCTAを追加する手順
ページにCTAを追加する方法は、どのようなタイプのCTAを作成したかによります:
- 埋め込みCTAを使用する場合、1ページあたり最大100埋め込みCTAを追加できます。埋め込みCTAは以下のような使い方ができます:
- HubSpotページのデフォルトCTAモジュール
- マーケティングEメールのデフォルトボタンモジュール
- 外部ウェブサイトのコード スニペット
- スティッキーバナー、ポップアップボックス、スライド式のCTAを使用している場合、次のいずれかを行うことができます:
- 訪問者がボタンをクリックしたときにCTAが表示されるようにトリガーします。
-
- アクティベーション トリガーを1つ以上選択し、ウェブサイトのURLまたは訪問者の情報を使用してターゲットを設定します。最初のトリガーが満たされると、CTAはターゲットページと指定された訪問者に表示されます:
- ページスクロール時のトリガー
- 終了時意図のトリガー
- 経過時間後にトリガーをかける
- 非アクティブ時のトリガー
- アクティベーション トリガーを1つ以上選択し、ウェブサイトのURLまたは訪問者の情報を使用してターゲットを設定します。最初のトリガーが満たされると、CTAはターゲットページと指定された訪問者に表示されます:
HubSpotのコンテンツにCTAを追加する
HubSpotのページには、トラッキングコードが自動的にインストールされます。ほとんどのアクティベーション トリガー、最初のトリガーが満たされたときにCTAが表示されます。
ただし、埋め込み型CTAや訪問者がボタンをクリックしたときに発動するCTAを使用するには、手動でCTAを追加する必要があります。
HubSpotページにCTAを追加する
Call-to-actionモジュールを使って、HubSpotでホスティングしているページにCTAを埋め込むことができます。
-
コンテンツに移動します。
- ウェブサイトページ:HubSpotアカウントにて、[コンテンツ]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[コンテンツ]>[ランディングページ]の順に進みます。
- コンテンツの名をクリックします。
- コンテンツエディターで、左サイドバーの+ Addボタンをクリックする。
- サイドバーエディターで、CTAモジュールを検索してクリックし、の位置にドラッグします。
- CTA」セクションで、「選択」をクリックします。
HubSpotブログ記事にCTAを追加する
- HubSpotアカウントにて、[コンテンツ]>[ブログ]の順に進みます。
- あなたの投稿の名をクリックしてください。
- コンテンツエディターで、リッチテキストモジュールをクリックして、そのコンテンツをカスタマイズする。
- リッチテキストツールバーで、「挿入」 > Call-to-actionをクリックします。
- 右のパネルで、CTAsタブをクリックします。
- 挿入するCTAを選択し、「挿入」をクリックします。
- 左のパネルで、「変更を適用する」をクリックします。選択したCTAがリッチテキストエディターとプレビューに表示されます。
HubSpotでボタンクリック時にCTAをトリガーする。
ページ上のボタンをクリックすると、スティッキーバナー、ポップアップボックス、スライドインCTAを起動することができます。HubSpotページのデフォルトボタンモジュールを使ってこのトリガーを設定する:-
コンテンツに移動します。
- ウェブサイトページ:HubSpotアカウントにて、[コンテンツ]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[コンテンツ]>[ランディングページ]の順に進みます。
- をクリックする。
- 左パネルの「追加」タブで、デフォルトのボタンモジュールを検索して選択します。ボタンモジュールをクリックし、ページにドラッグします。

- 左のパネルで、「リンク先」ドロップダウンメニューをクリックし、「CTA」を選択します。
- CTA ドロップダウンメニューをクリックし、既存のCTAを選択します。
- ボタンモジュールの設定を続行します。
ドラッグ&ドロップでEメールに埋め込みCTAを追加できます。
埋め込みCTAをドラッグ&ドロップでマーケティングEメールに追加し、複数のタッチポイントでCTAオファーの効果をトラッキングできます。
ドラッグ&ドロップEメールエディター でCTAを追加するには:
- HubSpotアカウントにて、[マーケティング]>[Eメール]の順に進みます。
- CTAを追加したいEメールにマウスポインターを合わせ、[ 編集 ]をクリックします。または新規Eメールを作成。
- 左のパネルで、「ボタン」モジュールをクリックし、Eメールエディターにドラッグします。
- 左のパネルで、「リンク先」ドロップダウンメニューをクリックします。次に、CTAを選択します。
- CTA]フィールドの下にある[選択]をクリックします。
- 右のパネルで、挿入するCTAを選択し、[ 挿入 ]をクリックします。
注: EメールのCTAを作成または選択する場合、単一のボタンまたは画像のみがサポートされています。ボタンと画像など、複数の要素を持つCTAは使用できません。
テーマのボタンをカスタマイズして、ボタンクリック時にCTAをトリガーする。
HubSpotでカスタムテーマを使用している場合、CTAをトリガーするためにテーマのボタンモジュールをカスタマイズする必要があるかもしれません。
既定のテーマを編集する場合は、まず テーマを複製 する必要があります。 アセットマーケットプレイスから購入したテーマは複製できないため、代わりに子テーマを作成する ことをお勧めします。
テーマのボタンモジュールをカスタマイズする場合:
- HubSpotアカウントにて、[コンテンツ]>[デザインマネージャー]の順に進みます。
- 左上で、ボタンモジュールを検索してください。
- 右のパネルで、「ボタン」(フィールドグループ)にマウスポインターを合わせ、「編集」をクリックします。
- 「グループ化されたフィールド」(グループ化されたフィールド)」の「URL(URL )」にマウスポインターを合わせ、「「編集」(編集)」をクリックします。
- サポートされるURLタイプ]ドロップダウンメニューをクリックします。次に、CTAのチェックボックスを選択します。
- 右上の[変更を公開]をクリックします。変更を公開すると、ページでテーマボタンモジュールを使用する際にCTAオプションが表示されるようになります。
外部コンテンツにCTAを追加する
外部ページにCTAを追加するには、 HubSpotトラッキングコードをインストールする 必要があります 。
スティッキーバナー、ポップアップボックス、またはスライドインのCTAの場合、トラッキングコードをインストールすると、最初のアクティベーショントリガーを満たしたときにCTAが表示されるようになります。CTAをページに埋め込む必要はなく、CTAを確認するときに埋め込みオプションは表示されません。
ただし、特に埋め込みCTA(埋め込みCTA)や訪問者がボタンをクリックしたときにトリガーされるCTAの場合は、手動でCTAを追加する必要があります。
外部サイトにCTAを埋め込む
外部ページに埋め込みCTAを追加する場合:
- HubSpotアカウントにて、[マーケティング]>[CTA]の順に進みます。
- 左上の ドロップダウンメニュー をクリックし、[CTA]を選択します。
- CTAの上にマウスポインターを置いて[ アクション]をクリックし、[埋め込み]を選択します。
- copy to clipboard をクリックすると、CTAコードがクリップボードにコピーされます。
- 外部ウェブサイトのコンテンツ管理システム(CMS)に移動します。
- CTAの埋め込みコードをHubSpot以外のページのHTMLに貼り付け、CTAを表示させたい場所に貼り付けます。
- CTAをウェブページ上でプレビューして、本番時の見え方を確認する。CTAが正しく表示されない場合は、外部CMSがコードを変更していないか確認してください。
- 完成したら、ページを公開します。
通常、CTAを編集しても埋め込みコードには影響しません。例えば、[ リンクを新しいタブで開く ]オプションを編集しても、埋め込みコードの target="_blank"
属性は変更されません。
埋め込みコードスニペットは、CTAのiframeバージョンがレンダリングされる前のプレースホルダとして機能します。このレンダリングバージョンのCTAは、エディターで設定された正しい新しいタブで開く値を反映します。
プレースホルダー内の同じウィンドウでリンクを開くには、ユーザーが手動でターゲット属性タグを target="_self"
に変更できます。
外部サイトでのボタンクリックでCTAを発動させる
外部サイトでCTAを使用する前に、HubSpotトラッキングコードをインストールする必要があります。外部ページにトリガーを設定する場合。
- HubSpotアカウントにて、[マーケティング]>[CTA]の順に進みます。
- 左上のドロップダウンメニューをクリックし、[CTA]を選択します。
- CTAにマウスポインターを合わせ、[ 編集 ]をクリックします。
- 上部にある[ターゲティング]タブをクリックします。
- ボタンクリックによるトリガーセクションの下で、コードスニペットをクリックする。

- ダイアログボックスで[コピー]をクリックします。
- 外部サイトのボタンに埋め込みクラスを貼り付けます。あなたのサイトのボタンにCSSクラスを追加する方法がわからない場合は、ウェブマスター、IT部門、または開発者と協力する必要があるかもしれません。
