更新日時 2023年 1月 20日
ポップアップ・コール・トゥ・アクション（CTA）ツールを使ってバナーやポップアップを作成し、HubSpotのページに追加して新しい訪問者を惹きつけましょう。そして、特定のページやミーティング用リンク、外部URLへ誘導することでトラフィックを増加させます。
ポップアップのCTAをデザインする
ポップアップCTAエディターで、ポップアップCTAのデザインをカスタマイズして、訪問者を魅了しましょう。
- HubSpotアカウントで、Marketing > Lead Capture > Pop-up CTAsに移動します。
- 右上の「作成」をクリックします。
- ワークフローは、ゼロから作成することも、テンプレートから作成することも可能です。
- テンプレートから新しいポップアップCTAを作成するには、右側のパネルで「HubSpot Templates」をクリックします。そして、自分の目標に合ったテンプレートを選びます。
- 新しいポップアップCTAをゼロから作成するには、右側のパネルで、「ゼロから始める」をクリックします。次に、Sticky BannerまたはPop-up boxを選択します。
- スティッキーバナー：ページの上部または下部に固定される常設のバナーです。バナーは、訪問者があなたのページをスクロールするときに残ります。
- ポップアップボックス：設定されたスケジュールで表示されるポップアップボックス。
- 左側のパネルの「Add」タブから、ポップアップCTAの要素を追加し、レイアウトを編集します。
- ポップアップCTAにさらにコンテンツを追加するには、クリックして新しい要素をCTAエディターの右側のパネルに直接ドラッグします。
- ポップアップCTAのレイアウトを変更するには、要素にカーソルを合わせてクリックし、新しい位置までドラッグします。
- 要素を複製するには、その要素の上にカーソルを置き、「複製」アイコンをクリックします。アイコン
- 要素を削除するには、要素の上にカーソルを置き、ゴミ箱のアイコンをクリックします。
- 要素を編集するには、要素をクリックします。左側のパネルでは、要素の内容やデザインを編集することができます。
- 左のパネルで、「コンテンツ」タブをクリックして、要素を管理します。
- 要素を編集するには、要素の名前をクリックします。左側のパネルでは、要素の内容やデザインを編集することができます。
- 要素を削除するには、要素の上にカーソルを置き、ゴミ箱のアイコンをクリックします。
- 左のパネルで、デザインタブをクリックして、ポップアップCTAのカスタマイズとプレビューを行います。
- ポップアップCTAの外観をカスタマイズするには、「サイズ」、「レイアウト」、「スタイル」、「背景」のいずれかをクリックします。次に、左側のパネルで変更内容を設定します。スティッキーバナータイプのCTAでは、上部と下部の位置を選択することができます。
- 特定のページでポップアップCTAをプレビューするには、「特定のページでプレビュー」ドロップダウンメニューをクリックし、ポップアップCTAをプレビューするHubSpotのページを選択します。
- ポップアップCTAの外観をカスタマイズするには、「サイズ」、「レイアウト」、「スタイル」、「背景」のいずれかをクリックします。次に、左側のパネルで変更内容を設定します。スティッキーバナータイプのCTAでは、上部と下部の位置を選択することができます。
ポップアップのCTAを表示する場所と時間をカスタマイズできるを表示する
ポップアップCTAを設定した後、このポップアップCTAをサイト上にいつ表示させたいかを選択し、訪問者をターゲットにします。フィルターを追加して、どの訪問者がポップアップCTAを見るかについて、複数のルールを組み合わせることができます。ターゲティングルールの詳細をご覧ください。
ウェブサイトURL
特定のウェブページURLや、クエリーパラメーター値の条件付きロジックを追加できます。デフォルトでは、ポップアップCTAはすべてのページで表示されます。
- 上部にある「ターゲット」タブをクリックします。
- 訪問者が特定のウェブサイトのURLにいるときにポップアップCTAを表示するには、「ウェブサイトのURL」セクションで
- 最初のドロップダウンメニューをクリックし、［ウェブサイトURL］を選択します。
- 2つ目のドロップダウンメニューをクリックし、ターゲティングルールを選択します。
- テキストフィールドにルールの条件を入力します。
- URLに特定のクエリパラメーターが含まれるWebサイトのページに訪問者がいるときに、ポップアップCTAを表示すること。
- 最初のドロップダウンメニューをクリックし、［クエリーパラメーター］を選択します。
- 1つ目のテキストフィールドに、クエリーパラメーター名を入力します。
- ドロップダウンをクリックし、ターゲッティングルールを選択します。
- 2つ目のテキストフィールドに、クエリーパラメーター値を入力します。
- 別のルールを追加するには、［ルールを追加］をクリックします。
- 特定のページ（プライバシーポリシーページなど）からCTAを除外するには、「除外ルールを追加する」をクリックします。
- ポップアップのCTAを非表示にするタイミングを選択します。
- 除外ルールの追加］をクリックします。
- は、ポップアップCTAを非表示にするタイミングを選択するための最初のドロップダウンメニューです。
- 次のドロップダウンメニューをクリックして、フィルタリングルールを選択します。
- ポップアップCTAを隠すタイミングのルールをさらに追加するには、「除外ルールを追加する」をクリックして、フィルターを選択します。
- 別のフィルタリングルールを作成するには、［フィルターグループを追加］をクリックし、フィルタリングルールを選択します。
起動トリガー
ポップアップCTAがページ上に表示されるタイミングを決定するアクティベーション・トリガーを選択します。最初に選択したトリガーが満たされると、ポップアップCTAが表示されます。
- How/When "セクションで、使用するアクティベーション・トリガーの横にあるチェックボックスを選択します。
- 50%ページスクロール時：訪問者がページの半分までスクロールしたときに、ポップアップCTAが表示されます。
- 終了時インテント：訪問者がブラウザーウィンドウの上部のバーにカーソルを移動させると、ポップアップのCTAが表示されます。
- 経過時間x秒後：指定した秒数後にポップアップのCTAが表示されます。
- ボタンクリックでトリガー：訪問者がボタンをクリックすると、ポップアップのCTAが表示されます。
- 外部ページにトリガーを設定する場合。
- Trigger on button clickセクションで、Code snippetをクリックします。
- ダイアログボックスで、［コピー］をクリックします。
- 埋め込みコードを外部ウェブサイトのボタンにhrefとして貼り付けてください。
- 外部ページにトリガーを設定する場合。
-
-
- HubSpotのページでトリガーを設定するには。
- セルボタンモジュールをHubSpotの任意のページに設定します。
- 左のパネルで、Link toドロップダウンメニューをクリックし、Call-to-actionを選択します。
- Call-to-actionドロップダウンメニューをクリックし、既存のCTAを選択します。
- ボタンモジュールのセットアップを続けます。
- HubSpotのページでトリガーを設定するには。
-
ポップアップのCTA オプションのカスタマイズ
オプションタブで、ポップアップCTAを小さな画面サイズに表示するかしないかのオプションをカスタマイズします。
- 上部の［オプション］タブをクリックします。
- 小さな画面サイズ ] セクションで、スイッチをオフに切り替えると、小さな画面サイズでのポップアップCTAが非表示になります。
公開するポップアップCTA
ポップアップCTAの設定が完了したら、ポップアップCTAを公開します。
- 右上の「レビューと公開」をクリックします。
- 右側のパネルで、ポップアップのCTAを確認し、「今すぐ公開」をクリックします。ポップアップCTAは、対象ページに自動的に掲載されます。
