メインコンテンツにスキップ
お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。

ページにCTA(コール・トゥ・アクション)を追加する

更新日時 2023年 5月 30日

以下の 製品でご利用いただけます(別途記載されている場合を除きます)。

Marketing Hub Starter, Professional, Enterprise
CMS Hub Starter, Professional, Enterprise

CTA(コール・トゥ・アクション)を作成したら、HubSpotと外部ページの両方にCTAを追加することができます。ページにCTAを追加する方法は、どのようなタイプのCTAを作成したかによります:

  • 埋め込みCTAを作成した場合、HubSpotのデフォルトのコールトゥアクションモジュール、または外部ウェブサイトのコードスニペットを使用して、埋め込みCTAを追加することができます。 
  • スティッキーバナー、ポップアップボックス、スライド式のCTAを作成した場合、以下のどちらかを行うことができます:
    • 訪問者がボタンをクリックしたときにCTAが表示されるようにトリガーをかける。

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部門、または開発者と連携する必要があるかもしれません。
 




この記事はお役に立ちましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。