Level up your Twilio API skills in TwilioQuest, an educational game for Mac, Windows, and Linux. Download Now

メニュー

Expand
Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Node.jsとExpressを使用した通話の追跡

この Express.js ウェブアプリケーションでは、Twilio を使って、さまざまなマーケティングチャンネルの有効性を追跡する方法を示します。

このアプリケーションには、3 つの主要な機能があります。

  • さまざまなマーケティングキャンペーン(広告用掲示板やバスの車内広告など)で使う電話番号を Twilio から購入する
  • その電話番号に対する着信をセールス担当者に転送する
  • 電話番号および受け取った通話に関するデータを示すチャートを表示する

Whatclinic.comがTwilioを使用してヘルスケア業界向けに通話の追跡プラットフォームを構築する方法を確認しましょう。

このチュートリアルでは、このアプリケーションを実行するための主要なコードをいくつか紹介します。コードを実行する方法については、GitHub のプロジェクトの README をお読みください。

はじめましょう!

使用可能な電話番号を検索する

Call tracking requires us to search for and buy phone numbers on demand, associating a specific phone number with a lead source. From the dashboard, the user can search for new numbers, optionally filtering by area code. This code uses the Twilio Node.js helper library.

        
        
        
        
        controllers/availableNumbers.js

        使用可能な電話番号を検索する

        controllers/availableNumbers.js

        ここで、これらの番号を購入用にユーザーに表示し、キャンペーンを有効にする方法を見てみましょう。

        使用可能な電話番号を表示する

        使用可能な電話番号を表示する

        ユーザーがダッシュボードから電話番号を検索すると、現時点で購入できる番号のリストが表示されます。番号用に生成されたフォームを送信すると、その電話番号を購入できます。

              
              
              
              
              views/availableNumbers.jade

              使用可能な電話番号を表示する

              views/availableNumbers.jade

              Twilio C#ヘルパーライブラリーを活用して、購入用の利用可能電話番号をどのように表示できるかについて見てきました。 ここで利用可能電話番号の購入方法を確認しましょう。

              電話番号の購入方法

              電話番号を購入

              LeadSource リソースの create 関数は、電話番号をパラメーターとして受け付け、このアプリケーションのユーザーの代わりに、Twilio の API から番号を購入します。発信者の ID 機能を有効にし、この番号と現在の TwiML アプリ SID を関連付けます。転送番号とリードソースの説明を追加できるよう、直ちにユーザーをリダイレクトします。

                    
                    
                    
                    
                    controllers/leadSources.js

                    電話番号を購入する

                    controllers/leadSources.js

                    アプリケーションSIDの確認場所がわからない場合でもご安心ください。 次の手順で方法をご案内します。

                    アプリケーションSIDの確認方法を見る

                    TwiML アプリケーションでウェブホックの URL を設定する

                    電話番号を購入する際、VoiceアプリケーションSIDを指定します。 これはTwiMLアプリケーションに対する識別子で、REST API経由で作成するか、Twilio Consoleで作成できます。

                    TwiMLAppを作成する

                    電話番号を関連づける方法を確認する

                    電話番号をリードソースに関連付ける

                    番号を購入したので、ユーザーが転送番号とこの番号の説明を追加するためのフォームを表示します。これ以降、この番号への通話は、このソースに起因するものとみなされます。すべての電話番号は E.154 形式です。

                          
                          
                          
                          
                          controllers/leadSources.js

                          引き合いソースを作成する

                          controllers/leadSources.js

                          ここまで、リードソースの作成と、それをTwilio電話番号に関連づける方法は大変理解しやすいものです。 ここでは、この情報を保存するリードソースのモデルについて詳しく見ていくことにしましょう。

                          リードソースのモデルの定義方法

                          LeadSource モデル

                          このモデルには、前のステップのフォームで提供された情報が含まれます。LeadSource モデルは、Twilio 番号を指定したリードソース(「Wall Street Journal Ad」や「Dancing guy with sign」など)に関連付けます。また、セールスやサポートヘルプ回線など、すべての通話のリダイレクト先となる電話番号も追跡します。

                                
                                
                                
                                
                                models/LeadSource.js

                                LeadSource モデル

                                models/LeadSource.js

                                As the application will be collecting leads and associating them to each LeadSource or campaign, it is necessary to have a Lead model as well to keep track of each Lead as it comes in and associate it to the LeadSource.

                                Let's see what the Lead model looks like

                                リードモデル

                                Lead は、LeadSource で生成された通話を表します。LeadSource に関連付けられた電話番号に電話がかかるたびに、Lead モデルを使って、その通話に関して Twilio が提供するデータの一部を記録します。

                                      
                                      
                                      
                                      
                                      models/Lead.js

                                      リードモデル

                                      models/Lead.js

                                      Twilio電話番号だけでなくLeadSourceを作成するコードのバックエンド部分が完成しました。 アプリケーションの次の部分は着信通話を処理し、それを適切な営業部のメンバーに転送するためのWebhookになります。 これらWebhookの構築方法を見ていきましょう。

                                      通話の転送方法を学ぶ

                                      通話を転送し、リードを作成する

                                      いずれかの Twilio 番号にお客様から電話がかかると、Twilio はこのビュー関数に関連付けられている URL(/lead)に POST リクエストを送信します。

                                      着信データを使って、LeadSource に新しい Lead を作成した後、LeadSourceforwarding_number と発信者を接続するTwiML を返します。

                                            
                                            
                                            
                                            
                                            controllers/leads.js

                                            電話の転送

                                            controllers/leads.js

                                            通話を転送してリードを作成したら、見込み顧客を生み出す着信通話が大量にやってくるでしょう。 そしてそれらは我々にとってのデータとなるのですが、これらデータから恩恵を得られるような情報に変えてやることが必要です。 そこで次のステップでは、これらのソースから統計を得る方法を見ていきます。

                                            リードソースから統計を取得する方法を確認する

                                            リードソースに関する統計を取得する

                                            データから引き出すことができる便利な統計情報は、各 LeadSource が受け取った通話の数です。また、リードの都市を知ることもできます。このために、フロントエンドが呼び出すことができる経路にマッピングされる 2 つの関数を定義します。

                                                  
                                                  
                                                  
                                                  
                                                  controllers/leads.js

                                                  この時点まで、アプリケーションのバックエンドのコードについて見てきました。 これで着信通話や見込み顧客の処理を開始する準備が整いました。 続いて、クライアント側に注目点を切り替えましょう。 今回の場合は、それはシンプルなJavaScriptアプリケーションで、またChart.jsを使用して適切な方法でこれら統計を描画します。

                                                  chart.jsで統計を描画する方法

                                                  Chart.js で統計を視覚化する

                                                  ホームページに戻り、jQuery を使い、サーバーから通話のトラッキングの統計を JSON に取り込みます。統計は、Chart.js で作成するカラフルな円グラフに表示します。また、Underscore.js のいくつかのユーティリティー関数を使って、バックエンドからそのデータをマンジングします。

                                                        
                                                        
                                                        
                                                        
                                                        public/js/pieCharts.js

                                                        統計からの円グラフ

                                                        public/js/pieCharts.js

                                                        That's it! Our Node.js application is now ready to purchase new phone numbers, forward incoming calls, and record some statistics for our business.

                                                        関連トピック

                                                        関連トピック

                                                        これで終わりです。これで、Express.js  アプリケーションは新しい電話番号を購入し、着信を転送し、ビジネス上の統計情報を記録できるようになりました。

                                                        Twilio を使う Node.js 開発者であれば、他のチュートリアルもお楽しみください。

                                                        クリック トゥ コール(Node.js)

                                                        ウェブページのボタンを押して、電話を介して訪問者をライブサポートまたはセールス担当者に接続します。

                                                        Authy (Node.js)による二要素認証

                                                        Authyを使ってウェブアプリに アカウント認証を実装する方法を学びます。

                                                        これは役に立ちましたか?

                                                        このチュートリアルをお読みいただき、ありがとうございます。 弊社に知らせたいフィードバックがある場合は、Twitter経由で英語でご連絡ください。 喜んでお話を伺います。

                                                        Mario Celi Jose Oliveros Agustin Camino Andrew Baker David Prothero Kat King
                                                        Rate this page:

                                                        ヘルプが必要ですか?

                                                        誰しもが一度は考える「コーディングって難しい」。そんな時は、お問い合わせフォームから質問してください。 または、Stack Overflow でTwilioタグのついた情報から欲しいものを探してみましょう。