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

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

コンテンツにCTAを追加した後、 Professional または Enterprise サブスクリプションをお持ちの場合は、 ワークフローを作成して 、訪問者がCTAに反応した後のアクションを自動化することができます。例えば、訪問者がCTAでフォームを送信した後に、一連のマーケティング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を埋め込むことができます。 

1. 目的のコンテンツに移動します。 

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

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

1. HubSpotアカウントにて、［コンテンツ］＞［ブログ］の順に進みます。
2. あなたの投稿の名をクリックしてください。
3. コンテンツエディターで、リッチテキストモジュールをクリックして、そのコンテンツをカスタマイズする。
4. リッチテキストツールバーで、「挿入」 > Call-to-actionをクリックします。
    

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

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

1. 目的のコンテンツに移動します。

   • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
   • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
2. をクリックする。
3. 左パネルの「追加」タブで、デフォルトのボタンモジュールを検索して選択します。ボタンモジュールをクリックし、ページにドラッグします。
    

4. 左のパネルで、「リンク先」ドロップダウンメニューをクリックし、「CTA」を選択します。
5. CTA ドロップダウンメニューをクリックし、既存のCTAを選択します。 
6. ボタンモジュールの設定を続行します。
    

ドラッグ＆ドロップでEメールに埋め込みCTAを追加できます。

埋め込みCTAをドラッグ＆ドロップでマーケティングEメールに追加し、複数のタッチポイントでCTAオファーの効果をトラッキングできます。

注： EメールのCTAを作成または選択する場合、単一のボタンまたは画像のみがサポートされています。ボタンと画像など、複数の要素を持つCTAは使用できません。

ドラッグ&ドロップEメールエディターでCTAを追加するには、次の手順に従います。

1. HubSpotアカウントにて、［マーケティング］＞［Eメール］の順に進みます。
2. CTAを追加したいEメールにマウスポインターを合わせ、[ 編集 ]をクリックします。または 、新しいEメールを作成します。
3. 左のパネルで、「ボタン」モジュールをクリックし、Eメールエディターにドラッグします。
    

4. 左のパネルで、「リンク先」ドロップダウンメニューをクリックします。次に、CTAを選択します。 
5. CTA］フィールドの下にある［選択］をクリックします。 
6. 右のパネルで、挿入するCTAを選択し、[ 挿入 ]をクリックします。
   

テーマのボタンをカスタマイズして、ボタンクリック時にCTAをトリガーする。 

HubSpotでカスタムテーマを使用している場合、CTAをトリガーするためにテーマのボタンモジュールをカスタマイズする必要があるかもしれません。

既定のテーマを編集する場合は、まず テーマを複製 する必要があります。 アセットマーケットプレイスから購入したテーマは複製できないため、代わりに子テーマを作成する ことをお勧めします。 

テーマのボタンモジュールをカスタマイズする場合： 

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. 左上で、ボタンモジュールを検索してください。 
3. 右のパネルで、「ボタン」（フィールドグループ）にマウスポインターを合わせ、「編集」をクリックします。
4.  「グループ化されたフィールド」（グループ化されたフィールド）」の「URL（URL ）」にマウスポインターを合わせ、「「編集」（編集）」をクリックします。
5. サポートされるURLタイプ］ドロップダウンメニューをクリックします。次に、CTAのチェックボックスを選択します。 
6. 右上の［変更を公開］をクリックします。変更を公開すると、ページでテーマボタンモジュールを使用する際にCTAオプションが表示されるようになります。
    

外部コンテンツにCTAを追加する

外部ページにCTAを追加するには、 HubSpotトラッキングコードをインストールする 必要があります 。 

スティッキーバナー、ポップアップボックス、またはスライドインのCTAの場合、トラッキングコードをインストールすると、最初のアクティベーショントリガーを満たしたときにCTAが表示されるようになります。CTAをページに埋め込む必要はなく、CTAを確認するときに埋め込みオプションは表示されません。 

ただし、特に埋め込みCTA(埋め込みCTA)や訪問者がボタンをクリックしたときにトリガーされるCTAの場合は、手動でCTAを追加する必要があります。 

外部サイトにCTAを埋め込む 

外部ページに埋め込みCTAを追加する場合：

1. HubSpotアカウントにて、［マーケティング］＞［CTA］の順に進みます。
2. 左上の ドロップダウンメニュー をクリックし、[CTA]を選択します。
3. CTAの上にマウスポインターを置いて[ アクション]をクリックし、[埋め込み]を選択します。
4. copy to clipboard をクリックすると、CTAコードがクリップボードにコピーされます。  
5. 外部ウェブサイトのコンテンツ管理システム（CMS）に移動します。 
6. CTAの埋め込みコードをHubSpot以外のページのHTMLに貼り付け、CTAを表示させたい場所に貼り付けます。 
7. CTAをウェブページ上でプレビューして、本番時の見え方を確認する。CTAが正しく表示されない場合は、外部CMSがコードを変更していないか確認してください。
8. 完成したら、ページを公開します。 

通常、CTAを編集しても埋め込みコードには影響しません。例えば、[ リンクを新しいタブで開く ]オプションを編集しても、埋め込みコードの target="_blank" 属性は変更されません。 

埋め込みコードスニペットは、CTAのiframeバージョンがレンダリングされる前のプレースホルダとして機能します。このレンダリングバージョンのCTAは、エディターで設定された正しい新しいタブで開く値を反映します。

プレースホルダー内の同じウィンドウでリンクを開くには、ユーザーが手動でターゲット属性タグを target="_self"に変更できます。

 

外部サイトでのボタンクリックでCTAを発動させる 

外部サイトでCTAを使用する前に、HubSpotトラッキングコードをインストールする必要があります。外部ページにトリガーを設定する場合。

1. HubSpotアカウントにて、［マーケティング］＞［CTA］の順に進みます。
2. 左上のドロップダウンメニューをクリックし、［CTA］を選択します。
3. CTAにマウスポインターを合わせ、[ 編集 ]をクリックします。 
4. 上部にある［ターゲティング］タブをクリックします。 
5. ボタンクリックによるトリガーセクションの下で、コードスニペットをクリックする。

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

 

CTAが表示されない場合のトラブルシューティング 

スティッキーバナー、ポップアップボックス、またはスライドインCTAをページに追加した後、CTAが表示されない場合、次の原因が考えられます。

• 以前のCTAの送信または無視:訪問者は以前にCTAを却下したことがあります。設定された期間 が経過するまで、同じCTAが再び表示されることはありません。
  
  • 訪問者がページのCTAを却下した場合は、そのページの他のCTAも非表示になります。ただし、他のCTAは次のセッションにも表示されます。

  • 以前にCTAでフォームを送信した訪問者が、Cookieを削除せずに同じブラウザーで同じページを閲覧した場合、同じCTAが再び表示されることはありません。 

• CTAのターゲティングルール: 訪問者が、CTAの[ 表示する対象者]設定 で設定されたターゲティング要件を満たしていません。
• 同じ場所の複数のCTA :同じページに表示するように2つのCTAが設定されている場合、CTAは競合し、トリガーが異なっていても、そのうちの1つを削除するまで表示されません。 
  • 例えば、1つのCTAがすべてのページで読み込まれるように設定されていて、50%のページスクロールでトリガーされ、もう1つのCTAがすべてのページで読み込まれて離脱意図に基づいてトリガーされる場合、それぞれトリガーしてもCTAの一方または両方が読み込まれない場合があります。