CTAを作成する

CTAツールを使って、ボタンのCTA、バナー、ポップアップを作成し、HubSpotのページに追加して、新しい訪問者を引き付けましょう。外部ページにCTAを追加することもできます。

外部ページにCTAを追加する前に、HubSpotトラッキングコードをインストールするか、WordPressサイトにHubSpot WordPressプラグインをインストールする必要があります。CTAを追加した後で、訪問者を特定のページ、ミーティングリンク、または外部URLに誘導してトラフィックを促進します。 

モバイルデバイスでは、レスポンシブレイアウトを有効にするか、CTAオプションで小さな画面ではCTAを非表示にすることを選択できます。CTAを公開した後で、CTAのパフォーマンスを分析する方法についての詳細をご確認ください。 

CTAをデザインする

CTAエディターで、訪問者の関心を集めるようにCTAのデザインをカスタマイズします。CTAを作成するとき、スマートコンテンツを使用して、閲覧者カテゴリーに基づいてCTAの異なるバージョンを表示することもできます。 CTAでのスマートコンテンツの使用についての詳細をご確認ください。 

• HubSpotアカウントにて、［マーケティング］＞［CTA］の順に進みます。
• 右上の［作成］をクリックします。
• 上部の［ポップアップ］タブまたは［埋め込みとボタン］タブを選択します。 
  • ポップアップCTAには次のタイプが含まれます。
    
    • バナー：ページの上部または下部に固定され、常に表示されるバナーです。このバナーは訪問者がページをスクロールしても常に表示されます。 
    • ポップアップボックス：設定したスケジュールで表示されるポップアップボックスです。 
    • スライドイン：ウェブサイトの端からスライドしてくるバナー。このバナーは訪問者がページをスクロールしても常に表示されます。 
  • 埋め込みCTAとボタンCTAには次のタイプが含まれます。 
    • 埋め込み：見込み客を特定のページに誘導する目的でウェブサイトやHubSpot Eメールで使用できるバナー、CTA、またはボタンです。
    • 埋め込み画像：HubSpotのページやEメールで使用できる画像です。
• 作成するCTAのタイプに基づいてテンプレートを選びます。
  • 各CTAテンプレートには、画像やテキストフィールドなどのカスタマイズ可能な要素があります。
  • 例えば、「クリックしてチャット」テンプレートを選択してWhatsAppリンクを起動したり、「イベント」テンプレートを選択して、訪問者がカンファレンスやワークショップに登録できるようしたりすることが可能です。 

• 左側のパネルの［追加］タブから、要素を追加し、CTAのレイアウトを編集します。 

• • CTAにさらにコンテンツを追加するには、新しい要素をクリックし、エディターの右側のパネルに直接ドラッグします。また、CTAに動画要素を追加することもできます。CTAに動画を追加する際の要件であるオプションについて、詳細をご確認ください。 
  • CTAのレイアウトを変更するには、要素にマウスポインターを合わせ、クリック＆ドラッグして新しい位置に移動します。
  • 要素を複製するには、要素にマウスポインターを合わせてduplicate複製アイコンです。
  • 要素を削除するには、要素にマウスポインターを合わせ、delete削除アイコンをクリックします。 
  • 要素を編集するには、その要素をクリックします。左側のパネルで、要素の内容とデザインを編集できます。

• 左側のパネルで［コンテンツ］タブをクリックして、要素を管理します。 
  • 要素を編集するには、要素の名前をクリックします。左側のパネルで、要素の内容とデザインを編集できます。リッチテキスト要素では、AIアシスタントを使用してCTAコンテンツを作成したり、改善したりできます。 
  • 要素を削除するには、要素にマウスポインターを合わせて、delete 削除アイコンをクリックします。 
• 左側のパネルで［デザイン］タブをクリックし、CTAをカスタマイズしてプレビューします。
  • 特定のページでCTAをプレビューするには、右上の［プレビュー］をクリックします。次に、［特定のページでプレビュー］ドロップダウンメニューをクリックし、CTAをプレビューするHubSpotページを選択します。 

• • CTAの外観をカスタマイズするには、以下のオプションのいずれかを選択します。次に、左側のパネルで変更内容を設定します。 
    • 位置：スティッキーバナーCTAの場合、上部または下部の位置を選択できます。スライドインCTAの場合、ページの左上、左下、右上、右下にCTAを配置できます。 
    • サイズ調整：CTAの高さを設定します。CTAの内容に基づいて高さを自動設定するオプションをオンに切り替えることができます。
    • レイアウト：CTAのレイアウトを設定します。CTAコンテンツにパディングを追加できます。また、レスポンシブレイアウトを有効にするオプションをオンに切り替えることもできます。レスポンシブレイアウトでは、小さな画面でもCTAの列が縦に重なります。
    • スタイル：CTAのスタイル（CTAの基本フォント、境界線、ドロップシャドウなど）を設定します。CTAでカスタムフォントを使用できます。HubSpotコンテンツでカスタムフォントを使用する方法をご覧ください。 
    • 背景：CTAの背景を設定します。背景色を設定するか、背景画像をアップロードするかを選択できます。
    • ［閉じる］オプション：ポップアップボックスCTAの場合、訪問者がポップアップボックス外部をクリックしたときにCTAを閉じることができるようにするオプションをオンに切り替えることができます。このオプションをオフにすると、訪問者は閉じるアイコンを使う方法でのみCTAを閉じることができます。 

HTML CTAをデザインする

カスタム埋め込みHTML CTAを作成し、カスタムテーマやカスタムCSSを適用するには、次のようにします。

• 左側のパネルで［ゼロから開始］をクリックします。 
• 次に［詳細オプション］をクリックして展開し、［埋め込みHTML］を選択します。
• ［リンク先］ドロップダウンメニューをクリックし、リダイレクト先となるCTAのオプションを選択します。
  • Eメールアドレス：mailtoリンクを作成します。このリンクを新しいページで開くには、［リンクを新しいタブで開く］チェックボックスをオンにします。 
  • ファイルダウンロード: CTAをファイルマネージャーのファイルにリンクします。既存のファイルを選択するか、新しいファイルをアップロードし、ボタンのCTAをクリックした訪問者に新しいブラウザーウィンドウで画像を表示する場合は、［リンクを新しいタブで開く］チェックボックスを選択します。 
  • ミーティングリンク：CTAをHubSpotミーティングリンクにリンクします。［ミーティングリンクを選択］ドロップダウンをクリックし、ミーティングリンクを選択します。このリンクを新しいページで開くには、［リンクを新しいタブで開く］チェックボックスをオンにします。 
  • いずれかの自分のページ：CTAをいずれかのHubSpotページまたはブログ記事にリンクします。［ページ］ドロップダウンメニューをクリックし、ページまたは記事を選択します。ボタンCTAのリンクはページIDに紐付けられ、ページのURLが変更されるとボタンCTAのリンクも自動的に更新されます。このリンクを新しいページで開くには、［リンクを新しいタブで開く］チェックボックスをオンにします。 
  • URL：CTAをHubSpot外部のページにリンクします。［リンクURL］フィールドに、訪問者を誘導するウェブサイトURLを入力します。このリンクを新しいページで開くには、［リンクを新しいタブで開く］チェックボックスをオンにします。 
  • CTA：カスタムCTAを使用して、スティッキーバナー、ポップアップボックス、またはスライドインCTAをトリガーします。
• ［ボタンの内容］フィールドにCTAテキストを入力します。 
• CTAのデザインをさらにカスタマイズするには、［詳細］をクリックします。
  

• ［詳細］ページでは、カスタムCSSクラスやルールを追加することができます：
  • カスタムCSSクラス：CTAにカスタムクラスを入力します。カスタムクラスを使用して、フォントファミリーなどのデザインスタイルをウェブサイト内の複数のCTAに適用できます。カスタムCSSクラスは、HubSpotページで使用するCSSスタイルシートに含める必要があります。
  • カスタムCSSルール：CTAに特化したインラインスタイルを適用するためのカスタムルールを追加します。
    • 新しいCSSルールを追加するには、［追加する］または［+追加］をクリックし、セレクターとスタイルを設定します。 
      • セレクター：CSSセレクターを入力します。この値はオプションで、CTAのセレクターと組み合わされます。例えば、入力されたセレクターが:hoverの場合、組み合わされたセレクターは次のようになる。${ctaSelector}:hover
      • スタイル：設定されたセレクターに適用するカスタムCSSスタイルルールを入力します。セレクターを入力しなくても、スタイルを入力することができます。例えば、color: yellow;です。

• 既存のCSSルールを編集するには、そのルールにマウスポインターを合わせて、edit編集アイコンをクリックします。 
• CSSルールを複製するには、そのルールにマウスポインターを合わせて、duplicate複製アイコンをクリックします。 

• CSSルールの優先順位を管理するには、各ルールをクリックしてドラッグし、優先順位順に並べます。
• CSSルールを削除するには、そのルールにマウスポインターを合わせて、delete削除アイコンをクリックします。 

• 旧CTAと同じHTMLとクラスをCTAに適用するには、［旧マークアップを使用］チェックボックスをオンにします。旧CTAをスタイル設定するページにCSSスタイルシートがある場合、このチェックボックスを選択すると、HTML CTAにも同じスタイルが適用されます。 

• CTAデザインの設定を終了するには、［保存し、適用］をクリックします。
  

スティッキーバナー、ポップアップボックス、スライドインCTAを表示する位置とタイミングをカスタマイズする

スティッキーバナー、ポップアップボックス、スライドインCTAを設定した場合、このCTAをサイト上に表示するタイミングを選択して、訪問者のターゲティングを行います。ページへのCTAの追加についての詳細をご確認ください。 

フィルターを使用すると、どの訪問者がCTAを見るかについて、複数のルールを組み合わせることができます。ターゲティングルールの設定の詳細をご確認ください。

アクティベーショントリガー 

CTAがページに表示されるタイミングを決定するアクティビティートリガーを選択します。選択した最初のトリガーが満たされると、CTAが表示されます。 

• 上部にある［ターゲティング］タブをクリックします。
•  ［表示するタイミング］セクションで、使用したいアクティベーショントリガーの横にあるスイッチをクリックして切り替えます。
  • ボタンクリックによるトリガー：訪問者がボタンをクリックするとCTAが表示されます。ボタンクリックによるトリガーをポップアップCTAに設定する方法についての詳細をご確認ください。既定ではこのオプションは常にオンになっています。 
    • これは、HubSpotページでは既定のボタンモジュールを使用して設定し、外部ページではボタンのクラスをカスタマイズして設定します。
    • 外部ページでこのトリガーを設定するには、HubSpotトラッキングコードをインストールする必要があります。 
  • ページスクロール時のトリガー：訪問者がページを指定されているパーセンテージを超えてスクロールした時点でCTAが表示されます。
  • 離脱意図に基づいて実行：訪問者がブラウザーウィンドウの上部バーにカーソルを移動すると、CTAが表示されます。
  • 経過時間後にトリガー：指定した秒数の経過後にCTAを表示します。
  • 無操作の後にトリガー：訪問者が指定した秒数にわたって無操作であったときにCTAが表示されます。

ウェブサイト URL

同じ［ターゲティング］タブで、特定のウェブページURLやクエリーパラメーター値に対する条件付きロジックを追加できます。既定では、CTAが全てのページに表示されます。

• 訪問者が特定のウェブサイトURLにアクセスしたときにCTAを表示するには、［ウェブサイトURL］セクションで、次の手順に従います。
  • 最初のドロップダウンメニューをクリックし、［ウェブサイトURL］を選択します。
  • 2つ目のドロップダウンメニューをクリックし、ターゲティングルールを選択します。
  • テキストフィールドにルール基準を入力します。
• 訪問者がURLに特定のクエリーパラメーターが含まれるウェブサイトページにアクセスしたときにCTAを表示するには、次の手順に従います。
  • 最初のドロップダウンメニューをクリックし、［クエリーパラメーター］を選択します。
  • 1つ目のテキストフィールドに、クエリーパラメーター名を入力します。
  • 2つ目のドロップダウンメニューをクリックし、ターゲティングルールを選択します。
  • 2つ目のテキストフィールドに、クエリーパラメーター値を入力します。
• 別のルールを追加するには、［ルールを追加］をクリックします。
• 特定のページからCTAを除外するには、［除外ルールを追加する］をクリックします。例えば、プライバシー ポリシー ページの例外を追加することがあります。

訪問者の情報および行動

既知の訪問者の情報と行動に基づいて、［ターゲティング］タブで特定のコンタクトをターゲティングすることもできます。追加できるフィルタリングルールのタイプは、アカウントのサブスクリプションによって異なります。 

• 指定したウェブサイトの訪問者全てに対してCTAを表示するには、［全ての訪問者］を選択します。このオプションは既定でオンになっています。 
• 特定の訪問者に対してCTAを表示するには、［絞り込まれた訪問者］オプションをクリックします。次にフィルターを設定します。 
  • 最初のドロップダウンメニューをクリックして、訪問者の絞り込み方法を選択します。

• • 次のドロップダウンメニューをクリックして、フィルタリングルールを選択します。
  • CTAを表示するタイミングに関するルールを追加するには、［ルールを追加］をクリックしてフィルターを選択します。

• • CTAを非表示にするタイミングを選択します。
    
    • ［除外ルールを追加］をクリックします。
    • 最初のドロップダウンメニューをクリックして、CTAを非表示にするタイミングを選択します。 
    • 次のドロップダウンメニューをクリックして、フィルタリングルールを選択します。
    • CTAを非表示にするタイミングに関するルールを追加するには、［除外ルールを追加］をクリックしてフィルターを選択します。

• • 別のフィルタリング ルール セットを作成するには、［フィルターグループを追加］をクリックし、フィルタリングルールを選択します。

表示頻度 

訪問者がスティッキーバナー、ポップアップボックス、またはスライドインCTAを初めて消去した後で、CTAを再度表示するかどうかと、表示する頻度を選択します。［ターゲティング］タブでCTAの表示頻度を設定します。 

•  ［表示する頻度］セクションで［もう一度表示する］ドロップダウンメニューをクリックし、頻度を選択します。 
  • 設定した期間の後：訪問者がCTAを消去した時点から再度表示されるまでの期間を設定します。
  • 繰り返す：以前に訪問者がCTAに反応している場合でも、選択されたウェブページに訪問者がアクセスしてトリガーアクションを実行するたびにCTAを表示します。
  • 今後は表示しない：訪問者に対してCTAを1回だけ表示します。最初に表示された後は、CTAが表示されることはありません。 

注：［ボタンクリックによるトリガー］を「アクティベーショントリガー」として使用している場合、これはCTAには適用されません。

 

CTAオプションをカスタマイズする

［オプション］タブで、CTAを小さいサイズの画面に表示するかどうか、関連付けられているキャンペーン、CTAのスケジュールなど、さまざまなCTAオプションをカスタマイズします。 

• 上部の［オプション］タブをクリックします。
• スティッキーバナー、ポップアップボックス、スライドインCTAは、小さなサイズの画面では非表示にできます。［画面サイズ（小）］セクションで［小さい画面サイズではオフにする］チェックボックスをオンにします。

• 「Marketing Hub Professional」または「Enterprise」のサブスクリプションをご利用の場合、CTAをキャンペーンに関連付けることができます。
  • CTAを既存のキャンペーンに関連付けるには、［キャンペーン］ドロップダウンメニューをクリックし、キャンペーンを選択します。
  • CTAを新規キャンペーンに関連付けるには、［キャンペーン］ドロップダウンメニューをクリックし、［キャンペーンを作成］をクリックします。そして、キャンペーンを設定に進みます。 

• • キャンペーンを作成したことがない場合は、［キャンペーンを作成］をクリックします。そして、キャンペーンを設定に進みます。 
• CTAのクリック数をトラッキングする方法を設定します。以下のオプションから選択します。 
  • リダイレクトからのクリックを追跡：訪問者を最終ページにリダイレクトする前に、クリックをCTAに関連付ける初期URLに訪問者を誘導することによってクリック数をトラッキングします。このオプションは既定でオンになっています。
  • ブラウザーからのクリックを追跡：訪問者のブラウザー空のクリックを非同期に追跡します。このオプションでは、リダイレクト先がないためにアンカータグを使用でき、CTAによって設定されたURLに訪問者が誘導されます。 

• スティッキーバナー、ポップアップボックス、スライドインCTAの場合、CTAが表示されるタイミングをスケジュールできます。
  
  • CTAの表示開始する日時をスケジュールするには、［予定としてスケジュール］スイッチをオンに切り替えます。次に、開始日と時刻を選択します。 
  • CTAの表示を停止する日時をスケジュールするには、［公開終了日時を設定］スイッチをオンに切り替えます。次に、終了日と時刻を選択します。 

CTAを公開する 

CTAの設定が完了したら、CTAを公開します。 

• 右上の［確認および公開］をクリックします。
• 右側のパネルでCTAを確認し、［今すぐ公開］をクリックします。CTAは自動的にターゲットページに公開されます。