ページにCTA(コール・トゥ・アクション)を追加する
更新日時 2023年 5月 30日
以下の 製品でご利用いただけます(別途記載されている場合を除きます)。
|
|
CTA(コール・トゥ・アクション)を作成したら、HubSpotと外部ページの両方にCTAを追加することができます。ページにCTAを追加する方法は、どのようなタイプのCTAを作成したかによります:
- 埋め込みCTAを作成した場合、HubSpotのデフォルトのコールトゥアクションモジュール、または外部ウェブサイトのコードスニペットを使用して、埋め込みCTAを追加することができます。
- スティッキーバナー、ポップアップボックス、スライド式のCTAを作成した場合、以下のどちらかを行うことができます:
- 訪問者がボタンをクリックしたときにCTAが表示されるようにトリガーをかける。
-
- アクティビティトリガーのうち1つ以上を選択し、ウェブサイトのURLまたは訪問者情報のいずれかを使用して目標を設定します。最初のトリガーが満たされると、対象ページと指定されたビジターに対してCTAが表示されます。外部ページのCTAを設定する場合、HubSpotのトラッキングコードをインストールする必要があります。
- ページスクロール時のトリガー
- 終了時インテントのトリガー
- 経過時間後にトリガーをかける
- 非アクティブ時のトリガー
- アクティビティトリガーのうち1つ以上を選択し、ウェブサイトのURLまたは訪問者情報のいずれかを使用して目標を設定します。最初のトリガーが満たされると、対象ページと指定されたビジターに対してCTAが表示されます。外部ページのCTAを設定する場合、HubSpotのトラッキングコードをインストールする必要があります。
HubSpotのページにCTAを追加する
HubSpotのページでは、 トラッキングコードが自動的にインストールされます。ほとんどの アクティベーショントリガーの場合、最初のトリガーが満たされたときにCTAが表示されます。ただし、埋め込み型CTAや訪問者がボタンをクリックしたときに発動するCTAを使用するには、手動でCTAを追加する必要があります。HubSpotのページに埋め込みCTAを追加します。
HubSpotのページでデフォルトのモジュールを使って埋め込みCTAを追加するには:
-
コンテンツを開きます。
- ウェブサイトページ:HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[マーケティング]>[ランディングページ]の順に進みます。
- ウェブサイトページまたはランディングページをクリックして、CTA を追加します。
- 左パネルの「追加」タブで、デフォルトのCTA モジュールを検索して選択します。モジュールをクリックし、ページ上にドラッグします。
- 左のパネルで、「選択」をクリックします。
- 右のパネルで、CTAsタブをクリックします。
- 挿入するCTAを選択し、Insertをクリックします。
- 左のパネルで、「変更を適用する」をクリックします。選択したCTAが、リッチテキストエディタとプレビューに表示されるようになります。
HubSpotでボタンクリック時にCTAをトリガーする。
ページ上のボタンをクリックすると、スティッキーバナー、ポップアップボックス、スライドインCTAを起動することができます。HubSpotページのデフォルトボタンモジュールを使ってこのトリガーを設定する:-
コンテンツを開きます。
- ウェブサイトページ:HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[マーケティング]>[ランディングページ]の順に進みます。
- CTAと対応するボタンを追加するウェブサイトページまたはランディングページをクリックします。
- 左パネルの「追加」タブで、デフォルトのボタンモジュールを検索して選択します。ボタンモジュールをクリックし、ページ上にドラッグします。
- 左のパネルで、「リンク先」ドロップダウンメニューをクリックし、「CTA」を選択します。
- CTA ドロップダウンメニューをクリックし、既存のCTAを選択します。
- ボタンモジュールのセットアップを続けます。
テーマのボタンをカスタマイズして、ボタンクリック時にCTAをトリガーする。
HubSpotでカスタムテーマを使用している場合、CTAをトリガーするために、テーマのボタンモジュールをカスタマイズする必要がある場合があります。デザインマネージャーでデフォルトテーマのファイルを編集するには、まずテーマの複製が必要です。アセットマーケットプレイスから購入したテーマは複製できません。代わりに子テーマを作成することをお勧めします。
テーマのボタンモジュールをカスタマイズする場合:
- HubSpotアカウントにて、[マーケティング]>[ファイルとテンプレート]>[デザインツール]の順に進みます。
- デザインマネージャーの左上で、お使いのボタンモジュールを検索してください。
- 右のパネルで、「ボタン」(フィールドグループ)にカーソルを合わせ、「編集」をクリックします。
- Grouped fields(グループ化されたフィールド)」の「URL(URL )」にカーソルを合わせ、「Edit(編集)」をクリックします。
- サポートされるURLタイプ]ドロップダウンメニューをクリックします。次に、CTAのチェックボックスを選択します。
- 右上の[変更を公開]をクリックします。変更を公開した後、ページでテーマボタンモジュールを使用すると、CTA オプションが表示されるようになります。
外部ページにCTAを追加する
外部サイトでHubSpotのCTAを使用する前に、 HubSpotのトラッキングコードをインストールする必要があります。トラッキングコードを設置後、ほとんどのアクティベーショントリガーについて、最初のトリガーが満たされたときにCTAが表示されます。ただし、埋め込み型CTAや訪問者がボタンをクリックしたときに発動するCTAを使用するには、手動でCTAを追加する必要があります。
外部サイトにCTAを埋め込む
外部ページに埋め込みCTAを追加する場合:
- HubSpotアカウントで、Marketing > Lead Capture > CTAsに移動します。
- 左上でドロップダウンメニューをクリックし、「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部門、または開発者と連携する必要があるかもしれません。

関連記事
-
CTA(コール・トゥ・アクション)の作成
CTA(コールトゥアクション)ツールを使って、ボタンのCTA、バナー、ポップアップを作成し、HubSpotのページに追加して、新しい訪問者を引き付けましょう。また、外部ページにCTAを追加することもできます。 ...
ナレッジベース -
電話発信リンクまたはmailtoリンクを作成する
クリックトゥコールボタンは、クリックされると、モバイルデバイスの訪問者と特定の電話番号を結びます。 ...
ナレッジベース -
HubSpotのコンテンツとデータをエクスポートする
ページ、コンタクト、ファイルなど、自分のアカウントからHubSpotコンテンツとデータをエクスポートする方法を説明します。 ...
ナレッジベース