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

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

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

• • アクティビティトリガーのうち1つ以上を選択し、ウェブサイトのURLまたは訪問者情報のいずれかを使用して目標を設定します。最初のトリガーが満たされると、対象ページと指定されたビジターに対してCTAが表示されます。外部ページのCTAを設定する場合、HubSpotのトラッキングコードをインストールする必要があります。
    • ページスクロール時のトリガー
    • 終了時インテントのトリガー
    • 経過時間後にトリガーをかける
    • 非アクティブ時のトリガー

HubSpotのページにCTAを追加する

HubSpotのページに埋め込みCTAを追加します。 

HubSpotのページでデフォルトのモジュールを使って埋め込みCTAを追加するには： 

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

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］＞［ランディングページ］の順に進みます。

• ウェブサイトページまたはランディングページをクリックして、CTA を追加します。 
• 左パネルの「追加」タブで、デフォルトのCTA モジュールを検索して選択します。モジュールをクリックし、ページ上にドラッグします。 

• 左のパネルで、「選択」をクリックします。
• 右のパネルで、CTAsタブをクリックします。
• 挿入するCTAを選択し、Insertをクリックします。 
• 左のパネルで、「変更を適用する」をクリックします。選択したCTAが、リッチテキストエディタとプレビューに表示されるようになります。

HubSpotでボタンクリック時にCTAをトリガーする。 

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

  • ウェブサイトページ：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部門、または開発者と連携する必要があるかもしれません。