この記事を使ってバナーメッセージを作成、設定、開始する方法を学びます。バナー内容の作成、閉じるオプションの選択、コールトゥアクションの追加、対象ユーザーの設定、目標の設定、配信スケジュール、公開前のプレビュー方法を説明します。バナーはEssential、Advanced、Expertプランで利用可能です。
バナーを作成する
まず、メインメニューからOutboundに移動し、右上の＋ 新しいメッセージをクリックします。
次に、コンテンツタイプとしてバナーを選択します。
左のサイドバーでこのコンテンツタイプを選んで、既成のテンプレートから開始することもできます。
この手順は空白のバナーから始まります。
注意：バナーはデフォルトでウェブMessengerに表示されます。ネイティブモバイルアプリ、キオスク、Messengerが存在しない他の非ウェブ環境でバナーを表示するには、Contacts Banners API（Intercom-Version: Previewで利用可能）を使用してください。
まず、バナーにタイトルを付けます。
次に、バナーの内容を作成します。太字、斜体、リンク、絵文字😉を使用できます。
絵文字を挿入するには、次の方法があります：
macOSの場合 - 入力フィールド内の任意の場所を右クリックし、絵文字と記号を選択します。
Windowsの場合 -
Windowsキー +.キーを押します。
スマートリンクは、記事やプロダクトツアーなど特定のIntercomコンテンツへのディープリンクです。バナーエディターでテキストをハイライトし、リンク挿入機能を使って対象コンテンツを選択することでのみ挿入できます。対象コンテンツは公開状態である必要があります。停止中や未公開のコンテンツはリンクできません。
注意：
バナーのスマートリンクはモバイルでは利用できません。
メッセージは簡潔にするのが良いでしょう。長文の場合は、チャットや投稿メッセージの送信を検討してください。
バナーは改行をサポートしていません。Returnキーはバナーのテキストエディター内で改行を作成しません。これは既知の制限です。書式は太字、斜体、リンク、絵文字に限定されます。複数行の内容が必要な場合は、チャットや投稿メッセージの使用を検討してください。
可能な場合は、顧客名や会社情報などのデータ属性でバナーメッセージをパーソナライズすることをお勧めします。
次に、バナーの送信者を選び、アバターを含めるかどうかを決めます。
バナーは閉じられるようにしますか？
次に、バナーに閉じるボタンを表示するかどうかを決めます。
閉じるボタンは、お客様がメッセージを読んだらすぐに非表示にできるようにします。
これは、親しみやすいリマインダー、プロモーション、その他緊急でないメッセージに最適です。
閉じるボタンを非表示にすると、バナーはお客様が対象ユーザーの条件に合わなくなるか、アクションを選択セクションで設定した操作を完了するまで表示され続けます。
重要：
既存のバナーで閉じるオプションを非表示にすると、閉じた人も再び表示されます。
お客様が複数のバナーの対象で、最初のバナーが閉じられない場合、以降のバナーは表示されません。— 他のバナーを先に送るには、閉じられないバナーを一時停止し、再度公開すると他のバナーの後に送信されます。
シリーズ内のバナーは、閉じるボタンの有無にかかわらず一度だけ表示され、その後ユーザーはシリーズの次のステップに進みます。
閉じられない（持続的な）バナーは、より緊急・重要な顧客向けコミュニケーションに最適です。例：
未払いの請求書が支払われるまでバナーを表示する。
テスト用ワークスペース／データを使用していることをユーザーに知らせる。
問題が続く限り、プラットフォームメンテナンスに関するバナーを表示する。
コールトゥアクションを選ぶ
メッセージの目的に最適なアクションを選択しましょう。
お客様に通知や警告を送るだけで、特に行動を求めない場合は「なし」のままにします。そうでなければ、バナーは以下のことができます：
URLを開く。
ボタンでURLを開く。
絵文字リアクションを求める。
訪問者のメールアドレスを収集します。
Product Tourを開始します。
選択したアクションに応じて、設定できるオプションが異なります。
URLを開く
このアクションは、バナーメッセージの最後にコールトゥアクション（CTA）リンクを追加します。以下を定義できます：
リンクテキスト。
開くURL。
リンクを新しいタブで開くかどうか。
リンクがクリックされた後にバナーを閉じるかどうか。
ボタンでURLを開く
このアクションは、バナーメッセージの最後にコールトゥアクション（CTA）ボタンを追加します。以下を定義できます：
リンクテキスト。
開くURL。
リンクを新しいタブで開くかどうか。
リンクがクリックされた後にバナーを閉じるかどうか。
ボタンの色も選択できます：
リアクションを求める
このアクションでは、絵文字で顧客から簡単なフィードバックを収集できます。選択可能な絵文字と、選択後にバナーを閉じるかどうかを設定してください。
注意：ワークフローはアウトバウンドバナーのリアクションだけでは開始できません。リアクションはワークフローのトリガーのオーディエンス定義や分岐条件として使用できます。
訪問者のメールを収集
このアクションは、メッセージの最後にフィールドを追加し、サイト訪問者から簡単にメールアドレスを収集できます。
注意：バナーにメール収集フィールドが含まれる場合、メールアドレスが不明な訪問者やleadsにのみ表示されるように自動的に非表示ルールが適用されます。顧客のメールアドレスがIntercomに既に知られている場合、バナーは表示されません。
Product Tourを開始
このアクションにより、usersは選択したProduct Tourに直接入り、同じタブまたは新しいタブで開くことができます。
注意：共有可能なURLが有効なProduct Tourのみ選択できます。
バナーのスタイルを設定
バナーエディターのスタイルセクションで、バナーの背景色とページの上部または下部に表示するかを選択します。レイアウトスタイルはインラインかフローティングの2種類から選べます。
バナー配置の2つのレイアウトオプションは以下の通りです。
インライン
インラインバナーは全幅で、ページコンテンツとウィンドウの上部の間に配置されます。スクロールするとページコンテンツがバナーの背後に移動します。
フローティング
フローティングバナーはページの中央に配置され、コンテンツの上に重なり、背後のものを覆います。スクロールしても動きません。
テキストカラー
バナーの背景色を選ぶと、テキストカラーは自動的にコントラストと読みやすさに合わせて調整されます：
注意：カスタムHTMLやCSSでバナーを作成することはできません。バナーがナビゲーションバーなどの固定要素に重なる場合は、下記のインラインバナーがナビゲーションバーに重なる場合のCSS修正を参照してください。
注意：Messengerがダークモードの場合、バナーのテキストはエディタープレビューで白く表示されていても実際の環境では黒く表示されることがあります。テキストカラーは背景色とのコントラストで自動設定されますが、ダークモードのウェブサイトテーマには対応していないため、黒地に黒文字になることがあります。テキストカラーの手動設定はできません。問題がある場合は、バナーの背景色を明るくしてテキストが読みやすくなるようにしてください。
ヒント：バナーメッセージのスタイルを試したい場合は、A/Bテストを試してください。この記事で詳細を確認。
バナーのオーディエンスを設定する
オーディエンスを選択のステップでは、バナーを表示する顧客を決定するフィルターを定義します。オーディエンスルールは動的に評価されるため、ルールに合わなくなった顧客にはバナーが表示されなくなります。
例えば、Proプランの割引を告知する場合、現在Freeプランのすべての顧客をターゲットにすることができます：
ヒント：URLをターゲットにする場合は、アプリやサイトから直接コピー＆ペーストするのが良いです。これにより、ブラウザのアドレスバーに隠れている可能性のある末尾のスラッシュなどの文字も正確にキャッチできます。
バナー表示の優先順位の仕組み
顧客が複数のバナーのオーディエンスルールに合致する場合、最初に公開されたバナーが表示されます。顧客がそのバナーを閉じると、次に公開された順に次のバナーが表示されます。
バナーの目標を設定する
目標を定義すると、Intercomがバナーが意図したアクションを促しているかどうかを測定できます。目標は条件であり、達成されるとそのバナーのコンバージョンとしてカウントされます。
例えば、顧客にプランのアップグレードを促す場合、適切な目標はPlan is Proです。Intercomはバナーを見た顧客のうち、その条件を満たした人数を追跡します：
目標を設定するには、バナーエディターのGoalステップに移動し、追跡したい条件を定義します。以下の例では、目標はPlan is Proに設定されています：
バナーの効果を全体的にテストするために、コントロールグループテストも実施できます。この記事で詳しく学べます。
バナーを特定の日付範囲や特定の時間帯にのみ表示するようスケジュール設定も可能です。Scheduleステップで開始日、終了日、またはその両方を設定します。スケジュール外の期間は、オーディエンスルールに合致する顧客にもバナーは表示されません。
バナーをプレビューして公開設定する
バナーの設定が完了したら、保存して閉じるをクリックします。バナーエディターの右上にプレビューボタンが表示されます。公開前にサイト上でバナーの見え方を確認するのに使えます。
プレビューに満足したら、公開設定をクリックします。バナーはすぐにオーディエンスルールに合致する顧客に表示されます。バナーはOutboundページからいつでも一時停止や編集が可能です。
非ウェブ環境でバナーを表示する
デフォルトでは、バナーはウェブMessengerを通じて表示されます。Messengerが存在しないネイティブモバイルアプリ、キオスク、または他の組み込み環境の場合、Contacts Banners APIを使ってサーバー側でバナーを取得・表示し、閉じる操作を記録できます。これにより、顧客はどの環境でも適切なメッセージを受け取れます。
仕組み
APIは2つのエンドポイントを提供します：
GET /contacts/{id}/banners— 現在コンタクトが合致するバナーを、コンテンツとview_id付きで返します。POST /contacts/{id}/banners/{view_id}/dismiss— バナービューの閉じる操作を記録します。
Contacts Banners APIはIntercom-Version: Previewで利用可能です。詳細はAPIリファレンスをご覧ください。
主な動作
オーディエンスのマッチングはサーバー側で行われます：これはAPIがコンタクト属性、会社属性、その他のサーバー側ルールを評価することを意味します。ページURLやページ滞在時間などのクライアント側ターゲティングルールに依存するバナーは、このエンドポイントでは返されません。これらのルールはブラウザでのみ評価可能だからです。
インプレッションはリストエンドポイント呼び出し時に記録されます：
GET /contacts/{id}/bannersを呼び出すと、返された各バナーが表示されたとカウントされます。バナーを表示する直前にのみこのエンドポイントを呼び出してください。推測的にやページ読み込みごとに呼び出すのは避けてください。閉じる操作はクロスサーフェスです：顧客が
POST /contacts/{id}/banners/{view_id}/dismissでバナーを閉じると、その情報はウェブMessengerと共有されます。同じ顧客が後でウェブアプリを訪れても、モバイルで既に閉じたバナーは表示されませんし、その逆も同様です。
このAPIを使うタイミング
Contacts Banners APIは以下の用途に設計されています：
Messenger SDKが使われていないネイティブモバイルアプリ（iOSおよびAndroid）。
キオスクや店内ディスプレイインターフェース。
ウェブMessengerがインストールできない組み込みツールやポータル。
Messengerが既にインストールされている標準的なウェブアプリでバナーを表示する場合、このAPIは不要です。オーディエンスルールに合致する顧客には自動的にバナーが表示されます。
Contacts Banner APIの使い方
Contacts Banners APIを使うには：
Outboundでバナーを作成・設定します。
サーバー側の属性（コンタクトまたは会社データ）を使ってオーディエンスを設定します。API経由でバナーを表示する場合は、ページURLやページ滞在時間のルールに依存しないでください。
バナーを公開設定します。
表示時にGET /contacts/{id}/bannersを呼び出して、コンタクトに合致するバナーを取得します。
アプリやインターフェースでバナーコンテンツを表示します。
顧客がバナーを閉じたら、POST /contacts/{id}/banners/{view_id}/dismissを呼び出して閉じる操作を記録します。
ヒント：エンドポイントの完全なリファレンスやリクエスト/レスポンススキーマはContacts Banners APIドキュメントをご覧ください。
ナビバーを覆うインラインバナー
ウェブサイトに固定要素がある場合、インラインバナーはナビバーを覆うことが予想されます。これはウェブサイトのHTML/CSSを変更することで解決可能です。
インラインバナーはページのbodyにposition:relativeとmargin-top: 48px（バナーの高さ）を追加します。
ウェブサイトのナビバーがposition:fixedまたはposition:stickyを使っている場合、ナビバーは常に上に表示されます。つまり、インラインバナーを公開設定しても、通常のようにナビバーを押し下げることができず、ナビバーを覆ってしまいます。
以下のCSS変更を行うと、インラインバナーがナビバーを覆わないようにできます：
ナビゲーションバーをbody内で配置するために
position:absoluteを使います。現在サイトで
position:fixedの後にtop: 0がある場合は、これをmargin-top: 0に置き換えます。
または、フローティングバナーを使うか、バナーをページの下部に配置することも選択できます。
バナーをテストする
バナーを全顧客に配信する前に、対象を自分やチームメンバーに限定してライブ環境で動作をテストできます。
テストユーザーを特定する: アクセス可能なユーザープロフィール（例：自分の社員メール）がワークスペースにあることを確認してください。
特定のオーディエンスルールを設定する: Choose your audience セクションで、その特定のユーザーのみを対象とするルールを追加します。
例: Email は
name@company.comです。
バナーを公開する: 対象が自分のメールに厳密に限定されているため、他の顧客はこのバナーを見ません。
動作を確認する: そのテストユーザーとして製品にログインし、バナーが表示され正しく見え、ボタンやリンクが期待通りに機能することを確認してください。
オーディエンスを更新する: テストに満足したら、バナーのオーディエンスルールを編集して、実際に配信する対象顧客セグメント（例：「All users」やPlanがFree）に設定します。