この記事を使ってバナーメッセージを作成、設定、開始します。バナー内容の作成、閉じるオプションの選択、コールトゥアクションの追加、ターゲット設定、目標設定、配信スケジュール、公開前のプレビュー方法を学べます。バナーは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修正を参照してください。
ヒント: バナーメッセージのスタイルをテストしたい場合は、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）を対象に設定します。