コンテンツにCTA(コール・トゥ・アクション)を追加する。
更新日時 2023年 9月 25日
以下の 製品でご利用いただけます(別途記載されている場合を除きます)。
|
|
CTA(コール・トゥ・アクション)を作成したら、HubSpotと外部ページの両方にCTAを追加できます。外部ページ用のCTAを設定する場合は、HubSpotトラッキングコードをインストールする必要があります。ドラッグ&ドロップでマーケティング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を追加する
HubSpotのページやブログ記事で、デフォルトのモジュールを使って埋め込みCTAを追加するには:
-
HubSpotのページでデフォルトのモジュールを使って埋め込みCTAを追加するには:
- ウェブサイトページ:HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[マーケティング]>[ランディングページ]の順に進みます。
- ウェブサイトページまたはランディングページをクリックして、CTA を追加します。
- 左パネルの「追加」タブで、デフォルトのCTA モジュールを検索して選択します。モジュールをクリックし、ページ上にドラッグします。
- 左のパネルで、「選択」をクリックします。
- HubSpotのブログ記事で埋め込みCTAを追加するには:
- HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ブログ]の順に進みます。
- ブログ記事にカーソルを合わせてCTAを挿入し、「編集」をクリックします。または、新しいブログ記事を作成します。
- コンテンツエディターでリッチテキストモジュールを探します。次に、モジュールをクリックして、その内容をカスタマイズします。
- 右上の「挿入」 > 「CTA」をクリックします。
- 右のパネルで、CTAsタブをクリックします。
- 挿入するCTAを選択し、Insertをクリックします。
- 左のパネルで、「変更を適用する」をクリックします。選択したCTAが、リッチテキストエディターとプレビューに表示されるようになります。
HubSpotでボタンクリック時にCTAをトリガーする。
ページ上のボタンをクリックすると、スティッキーバナー、ポップアップボックス、スライドインCTAを起動することができます。HubSpotページのデフォルトボタンモジュールを使ってこのトリガーを設定する:-
コンテンツを開きます。
- ウェブサイトページ:HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[マーケティング]>[ランディングページ]の順に進みます。
- CTAと対応するボタンを追加するウェブサイトページまたはランディングページをクリックします。
- 左パネルの「追加」タブで、デフォルトのボタンモジュールを検索して選択します。ボタンモジュールをクリックし、ページ上にドラッグします。
- 左のパネルで、「リンク先」ドロップダウンメニューをクリックし、「CTA」を選択します。
- CTA ドロップダウンメニューをクリックし、既存のCTAを選択します。
- ボタンモジュールのセットアップを続けます。
ドラッグ&ドロップでEメールに埋め込みCTAを追加できます。
埋め込みCTAをドラッグ&ドロップでEメールに追加し、複数のタッチポイントでCTAオファーの効果を追跡できます。
ドラッグ&ドロップEメールエディター でCTAを追加するには:
- HubSpotアカウントにて、[マーケティング]>[Eメール]の順に進みます。
- CTAを追加したいEメールにカーソルを合わせ、[ 編集 ]をクリックします。または新規に Eメールを作成します。
- 左のパネルで、Buttonモジュールをクリックし、Eメールエディターにドラッグします。
- 左のパネルで、「リンク先」ドロップダウンメニューをクリックします。次に、CTAを選択します。
- CTA]フィールドの下にある[選択]をクリックします。
- 右のパネルで、挿入するCTAを選択し、[ 挿入 ]をクリックします。
注: EメールのCTAを作成または選択する場合、単一のボタンまたは画像のみがサポートされています。ボタンと画像など、複数の要素を持つCTAは使用できません。
テーマのボタンをカスタマイズして、ボタンクリック時にCTAをトリガーする。
HubSpotでカスタムテーマを使用している場合、CTAをトリガーするために、テーマのボタンモジュールをカスタマイズする必要がある場合があります。デザインマネージャーでデフォルトテーマのファイルを編集するには、まずテーマの複製が必要です。アセットマーケットプレイスから購入したテーマは複製できません。代わりに子テーマを作成することをお勧めします。
テーマのボタンモジュールをカスタマイズする場合:
- HubSpotアカウントにて、[マーケティング]>[ファイルとテンプレート]>[デザインツール]の順に進みます。
- デザインマネージャーの左上で、お使いのボタンモジュールを検索してください。
- 右のパネルで、「ボタン」(フィールドグループ)にカーソルを合わせ、「編集」をクリックします。
- Grouped fields(グループ化されたフィールド)」の「URL(URL )」にカーソルを合わせ、「Edit(編集)」をクリックします。
- サポートされるURLタイプ]ドロップダウンメニューをクリックします。次に、CTAのチェックボックスを選択します。
- 右上の[変更を公開]をクリックします。変更を公開した後、ページでテーマボタンモジュールを使用すると、CTA オプションが表示されるようになります。
外部コンテンツにCTAを追加する
外部ページにCTAを追加することができます。外部ウェブサイトでHubSpot CTAを使用する前に、 HubSpotトラッキングコードをインストールする必要があります。トラッキングコードをインストールした後、ほとんどのアクティベーショントリガーの場合、最初のトリガーが満たされると CTA が表示されます。ただし、埋め込み型CTAや訪問者がボタンをクリックしたときに発動するCTAを使用するには、手動でCTAを追加する必要があります。
外部サイトにCTAを埋め込む
外部ページに埋め込みCTAを追加する場合:
- HubSpotアカウントにて、[マーケティング]>[リード情報の収集]>[CTA]の順に進みます。
- 左上でドロップダウンメニューをクリックし、「CTAs」を選択します。
- CTAにカーソルを合わせ、アクション > 埋め込みをクリックします。
- copy to clipboard をクリックすると、CTAコードがクリップボードにコピーされます。
- 外部ウェブサイトのコンテンツ管理システム(CMS)に移動します。
- CTAの埋め込みコードをHubSpot以外のページのHTMLに貼り付け、CTAを表示させたい場所に貼り付けます。
- CTAをウェブページ上でプレビューして、本番時の見え方を確認する。CTAが正しく表示されない場合は、コピーしたコードが外部のCMSで変更されていないことを確認します。
- 完成したら、ページを公開します。

外部サイトでのボタンクリックでCTAを発動させる
外部のウェブサイトでCTAを使用する前に、HubSpotトラッキングコードをインストールしていることを確認してください。外部ページにトリガーを設定する場合。
- HubSpotアカウントで、Marketing > Lead Capture > CTAsに移動します。
- 左上でドロップダウンメニューをクリックし、「CTAs」を選択します。
- CTAにカーソルを合わせ、[ 編集 ]をクリックします。
- 上部にある「ターゲット」タブをクリックします。
- Trigger on button click」セクションで、「Code snippet」をクリックします。

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