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

コンテンツにCTA(行動喚起)を追加する。

更新日時 2024年 10月 21日

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

Marketing Hub   Starter , Professional , Enterprise
Content Hub   Starter , Professional , Enterprise

CTA(行動喚起)を作成したら、CTAをHubSpotと外部ページの両方に追加できます。外部ページ用のCTAを設定する場合は、HubSpotトラッキングコードをインストールする必要があります。ドラッグ&ドロップでマーケティングEメールにCTAを追加することもできます。

ページにCTAを追加する方法は、どのようなタイプのCTAを作成したかによります:

  • 埋め込みCTAを使用する場合、1ページあたり最大100埋め込みCTAを追加できます。埋め込みCTAは以下のような使い方ができます:
    • HubSpotページのデフォルトCTAモジュール
    • マーケティングEメールのデフォルトボタンモジュール
    • 外部ウェブサイトのコード・スニペット
  • スティッキーバナー、ポップアップボックス、スライド式のCTAを使用している場合、次のいずれかを行うことができます:
    • 訪問者がボタンをクリックしたときにCTAが表示されるようにトリガーします。
    • アクティベーション・トリガーを1つ以上選択し、ウェブサイトのURLまたは訪問者の情報を使用してターゲットを設定します。最初のトリガーが満たされると、CTAはターゲットページと指定された訪問者に表示されます: 
      • ページスクロール時のトリガー
      • 終了時意図のトリガー
      • 経過時間後にトリガーをかける
      • 非アクティブ時のトリガー

HubSpotのコンテンツにCTAを追加する

HubSpotのページには、 トラッキングコードが自動的にインストールされます。ほとんどの アクティベーション・トリガー、最初のトリガーが満たされたときにCTAが表示されます。ただし、埋め込み型CTAや訪問者がボタンをクリックしたときに発動するCTAを使用するには、手動でCTAを追加する必要があります。 

HubSpotページにCTAを追加する

Call-to-actionモジュールを使って、HubSpotでホスティングしているページにCTAを埋め込むことができます。 

  • コンテンツを開きます。 

    • ウェブサイトページ:HubSpotアカウントにて、[コンテンツ]>[ウェブサイトページ]の順に進みます。
    • ランディングページ:HubSpotアカウントにて、[コンテンツ]>[ランディングページ]の順に進みます。
  • コンテンツの名をクリックします。 
  • コンテンツエディターで、左サイドバーの+ Addボタンをクリックする。 
  • サイドバーエディターで、CTAモジュールを検索してクリックし、の位置にドラッグします。 
  • CTA」セクションで、「選択」をクリックします。
     

cta-to-content-editorに追加する。 

HubSpotブログ記事にCTAを追加する

  • HubSpotアカウントにて、[コンテンツ]>[ブログ]の順に進みます。
  • あなたの投稿の名をクリックしてください。
  • コンテンツエディターで、リッチテキストモジュールをクリックして、そのコンテンツをカスタマイズする。
  • リッチテキストツールバーで、Insert > 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を使用する前に、 HubSpotトラッキングコードをインストールする必要があります。

トラッキングコードをインストールした後、ほとんどのアクティベーション・トリガーの場合、最初のトリガーが満たされると 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部門、または開発者と協力する必要があるかもしれません。
     
 
この記事はお役に立ちましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。