Intercom JavaScript API の実用的なガイド

Intercomメッセンジャーは、初期設定のままでも非常に優れています。サイトやアプリ上で顧客とチャットできるだけでも、大きな強みです。しかし、もっと多機能にしたいと思ったらどうでしょうか？特定の瞬間にチャットウィジェットをポップアップさせたり、ユーザーの行動を正確に追跡してより良いサポートを提供したいと思うかもしれません。

そこで登場するのが、Intercom JavaScript APIです。

このガイドは、メッセンジャーを見て「これを微調整できたらな」と思ったことがあるすべての人のためのものです。APIとは何か、具体的に何ができるのか、そして最も重要な点かもしれませんが、その限界についても解説します。最後まで読めば、全体像を把握し、より少ない労力で同じ（あるいはそれ以上の）結果を得る方法がわかるでしょう。

Intercom JavaScript APIとは？

では、Intercom JavaScript APIとは一体何なのでしょうか？ Intercom JavaScript APIとは、開発者がメッセンジャーを操作するために使用できるコマンドのセットです。まるでチャットバブル用のリモコンのように、いつ、何を表示し、誰と話すかを指示できます。

その主な役割は、いくつかの主要な領域に分類できます。

• 体験のカスタマイズ： メッセンジャーの外観や動作を制御できます。有料顧客と無料トライアルユーザーで挙動を変えたいですか？可能です。特定のページで非表示にしたいですか？問題ありません。

• ユーザーデータの追跡： APIを使用すると、ユーザーとその行動に関する情報をIntercomに直接送信できます。誰かがプランをアップグレードしたり、特定のボタンをクリックしたりした際に、そのイベントを記録できます。これにより、詳細な顧客プロファイルが構築され、サポートチームにとって貴重な情報となります。

• セッションの管理： 少し技術的に聞こえるかもしれませんが、これは非常に重要です。ユーザーのセッションがいつ開始・停止するかを管理でき、特に現代のWebアプリにおいて、ユーザーがログアウトした際に会話のプライバシーを確保するために不可欠です。

これらはすべて「クライアントサイド」、つまりユーザーのWebブラウザでコードが実行されることで実現します。これにより、ユーザー体験をその場で変更する力を持つことができるのです。

Intercom JavaScript APIの主な機能

では、このAPIで具体的に何ができるのかを見ていきましょう。APIには様々なメソッドが用意されていますが、主な機能はいくつかの核となる役割に集約されます。

メッセンジャーの外観と操作性の制御

最も一般的な使い方の1つが、メッセンジャーウィジェットの制御です。ユーザーのアクションに応じて表示・非表示を切り替えられるため、最適なタイミングでサポートを提供するのに役立ちます。

以下は、最も一般的なコマンドのいくつかです。

• Intercom('show') と Intercom('hide')：これらは文字通りの機能です。例えば、サイト上の「ヘルプが必要ですか？」ボタンを誰かがクリックしたときに、メッセンジャーをポップアップさせるために使用できます。

• Intercom('showSpace', spaceName)：この便利なコマンドは、メッセンジャーの特定の部分を開くことができます。ユーザーをヘルプセンター（help）、既存の会話（messages）、またはメッセンジャーのホーム画面（home）に直接誘導できます。

• Intercom('showNewMessage', 'pre-populated content')：これは新しいメッセージ作成画面を開きます。さらに良いことに、「最近の注文について質問があります…」のように、会話を始めるためのテキストをあらかじめ入力しておくこともできます。

Intercomメッセンジャーのスクリーンショット。モダンなデザインと、Intercom JavaScript APIで制御できるライブチャット機能を示しています。

ユーザーセッションとデータの管理

これは、特にセキュリティや最新のWebアプリでユーザーデータを正確に保つ上で非常に重要です。

セッションを処理するための必須メソッドは以下の通りです。

• Intercom('boot', {...})：このコマンドはIntercomを起動し、ユーザーが誰であるかを伝えます。ユーザーがページを移動しても完全なリフレッシュが行われないシングルページアプリケーションには必須です。

• Intercom('update', {...})：ページのリロードなしにユーザー情報を更新する必要がありますか？このコマンドを使いましょう。顧客がプレミアムプランにアップグレードした場合、updateを使用してplan: 'premium'という詳細を即座にIntercomに送信できます。

• Intercom('shutdown')：これは必ず使用してください。ユーザーがアプリからログアウトする際に、shutdownを呼び出す必要があります。これにより、ブラウザからIntercomセッションと会話履歴がクリアされます。これを忘れると、次にそのコンピュータを使用する人が、他人のプライベートなチャットを見てしまう可能性があります。

開発者は、ログイン時、ログアウト時、またはユーザーデータが変更された際に、これらのコマンドを適切なタイミングで呼び出すよう、細心の注意を払う必要があります。

ユーザーイベントの追跡

イベントトラッキングは、ユーザーが何をしているかをIntercomに伝えるための機能です。人々が製品をどのように使用しているかを把握し、関連性の高いメッセージを送信するために非常に強力です。

このための主要なコマンドは Intercom('trackEvent', 'event-name', {metadata}) です。

例えば、ユーザーがウェビナーにサインアップした場合、次のイベントを送信できます。

Intercom('trackEvent', 'signed-up-for-webinar', { webinar_topic: 'Advanced Reporting' });

そのイベントはIntercomのユーザープロファイルに記録されます。そこから、「レポート作成ウェビナーに登録したすべての人」のようなセグメントを作成し、ターゲットを絞ったフォローアップを送信できます。しかし注意点として、APIはイベントを送信するだけです。その後に何が起こるかのロジックは、Intercomのキャンペーンツールか、さらなるカスタムコードで別途構築する必要があります。

Intercom JavaScript APIの始め方

はっきりさせておきますが、これはクリック操作だけで設定できるものではありません。Intercom JavaScript APIを機能させるには、開発者が必要です。ウェブサイトのコードを直接編集する必要があるため、通常、サポート担当者やマーケティング担当者が単独で対応できる作業ではありません。

開発者がインストールするには、いくつかの異なる方法があります。

1. 従来のJavaScriptスニペット： これはコピー＆ペースト方式です。Intercomの設定からコードの一部を取得し、ウェブサイトのHTMLに貼り付けます。クリックごとに新しいページが読み込まれる、より伝統的なサイトに適した選択肢です。

2. NPMパッケージ： ReactやVueなどで構築された現代的なシングルページアプリケーションの場合、これが最適な方法です。Intercomをコードベースに組み込むための、はるかにクリーンで整理された方法です。

3. タグマネージャー： GoogleタグマネージャーやSegmentなどのツールを介してIntercomを読み込むこともできます。もしあなたの会社がすでにこれらのツールを使ってサードパーティのスクリプトを管理しているなら、これが最も簡単な方法でしょう。

どう選ぶべきでしょうか？それはウェブサイトの技術スタックに大きく依存します。旧来のサイトならスニペットが機能します。現代的なアプリならNPMパッケージが最適です。すでにタグマネージャーを全面的に利用しているなら、その方法を使い続けるのが良いでしょう。

どの方法を選択するにしても、Intercom設定からapp_idが必要です。これは、メッセンジャーがどのワークスペースに接続するかを指示するキーとなります。

Intercom JavaScript APIのデメリット

ここまで読むと、APIはかなり便利そうに聞こえますよね？確かにその通りです。しかし、すべてをAPIに頼ると、大きな問題につながる可能性があります。ここでは、多くのチームが繰り返し直面する現実的な問題点をご紹介します。

開発者に完全に依存してしまう

何かを変更したい、新しいイベントを追跡したい、ワークフローを調整したい、新しいプロアクティブメッセージを追加したいと思うたびに、チケットを発行して開発者を待たなければなりません。Intercomコミュニティフォーラムの多くの人々が経験するように、これは大きなボトルネックを生み出します。サポートチームが素晴らしいアイデアを持っていても、エンジニアリングのバックログに埋もれてしまいます。これでは迅速な対応は望めません。

ウェブサイトのコードが煩雑になる

APIはトリガーを提供するだけです。インテリジェンスはどこかに実装する必要があります。「顧客がプレミアムプランに加入していて、請求ページを3回閲覧した場合にのみこのメッセージを表示する」といったワークフローを実現したい場合、開発者はそのロジックをウェブサイトに直接ハードコーディングしなければなりません。やがて、アプリのコードベースは、メンテナンスが困難で脆弱なサポート固有のルールで散らかってしまいます。

スマートではない

APIは操り人形のようなもので、あなたが糸を引いた通りにしか動きません。ユーザーが実際に何を尋ねているのかを理解する能力はゼロです。過去の会話から学習したり、質問の背後にある意図を把握したり、自分で答えを見つけたりすることはできません。すべてのインタラクションは、事前に綿密に計画され、コーディングされている必要があります。

すべてのデータにアクセスできるわけではない

APIはユーザーのブラウザで実行されるため、ブラウザで利用可能なデータしか見ることができません。データベースから顧客の注文履歴にアクセスしたり、サーバー設定を確認したりする必要がある場合はどうでしょうか？開発者は、バックエンドからそのデータを取得し、Intercomに送るためだけの別のシステムを構築しなければなりません。簡単であるべきことに、多大な労力がかかります。

Intercom JavaScript APIより優れた自動化の代替手段はあるか？

これら多くの制限を読んで、何もしないか、もう一人開発者を雇うしかないのか、と悩んでいるかもしれません。幸いなことに、別の選択肢があります。すべてのワークフローを手作業でコーディングする代わりに、既存のツールに直接接続して面倒な作業を代行してくれるAIレイヤーを使用することができます。

これこそが、私たちがeesel AIを開発した目的です。eesel AIはIntercomやヘルプドキュメント、その他のアプリに接続し、カスタムコードを一行も書くことなく、スマートな自動化を実現します。

これが、先ほど述べた問題をどのように解決するかをご紹介します。

• 数ヶ月ではなく数分で開始： 開発者のボトルネックを覚えていますか？それはもうありません。サポートマネージャーは、ワンクリックの連携でeesel AIを自分で設定できます。エンジニアリングチームのスケジュールではなく、顧客のスピードに合わせて動けるようになります。

• あなたが主導権を握る（コード不要）： 複雑なワークフローを開発者に説明する代わりに、eesel AIのビジュアルエディタで自分で構築できます。AIの振る舞い、ペルソナ、そしてShopifyで注文を検索したり、適切なチームにチケットを割り当てたりといったアクションに関するルールを設定できます。コードは一切不要で、すべての権限を手にできます。

Intercom JavaScript APIのよりシンプルな代替手段であるeesel AIのカスタマイズおよびアクションワークフロー画面のスクリーンショット。

• すべてのナレッジを接続： JavaScript APIはブラウザデータに縛られますが、eesel AIはすべてに接続できます。ヘルプセンター、過去の会話、Confluenceの社内Wiki、Google Docsのドキュメントなどから学習します。これにより、部分的な回答ではなく、完全な回答を提供できます。

• ローンチ前にテスト： 新しくカスタムコーディングされたワークフローが実際に機能するかどうか、どうやって確認しますか？指を交差させて、うまくいくことを祈るしかありません。eesel AIを使えば、過去の何千ものチケットでシミュレーションを実行し、AIがどのように機能したかを正確に確認できます。顧客向けに有効化する前に、その解決率に関する実データを得ることができます。

eesel AIのシミュレーションダッシュボード。AIが将来のサポート自動化率を予測する様子を示しており、これは標準のIntercom JavaScript APIでは利用できない機能です。

Intercom JavaScript APIを使うべきか？

Intercom JavaScript APIは、高度にカスタマイズされたメッセンジャー体験を構築するために、きめ細かな制御を必要とする開発者にとって優れたツールです。エンジニアリングリソースに余裕があれば、非常にクールなことを実現できます。

しかし、ほとんどのチームにとって、自動化のためにそれに頼ることは、時間と費用がかかり、フラストレーションのたまる道です。開発者への絶え間ない依存を生み出し、サポートチームが迅速に実験や改善を行うことをほぼ不可能にします。

もし、コーディングのマラソンなしで、より速く、よりスマートなサポートフローを構築したいのであれば、AIレイヤーが最適です。eesel AIのようなツールは、あなたがすでに使い慣れているIntercomの内部で、世界クラスの自動化をはるかに迅速かつ柔軟に実現する方法を提供します。

カスタムコード不要で、AIがあなたのIntercom設定に何をもたらすか見てみませんか？ eesel AIを無料でお試しください。