メニュー

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?

C#およびASP.NET MVCを使用した通話の追跡

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

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

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

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

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

はじめましょう!

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

通話のトラッキングでは、電話番号をオンデマンドで検索および購入し、特定の電話番号をリードソースに関連付ける必要があります。このクラスは、Twilio C# ヘルパーライブラリーを使って、エリアコード別に電話番号を検索し、購入可能な番号のリストを返します。

        
        
        
        
        CallTracking.Web/Domain/Twilio/RestClient.cs

        電話番号を検索する

        CallTracking.Web/Domain/Twilio/RestClient.cs

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

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

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

        ユーザーに対して、エリアコード別に新しい電話番号を検索するためのフォームを、アプリのホームページに表示します。コントローラーレベルでは、以前に作成した Twilio.RestClient を使って、実際に番号を検索します。番号のリストを示すビューがレンダリングされ、その中から購入したい番号を選択できます。

              
              
              
              
              CallTracking.Web/Controllers/AvailablePhoneNumbersController.cs

              利用可能な番号ルート

              CallTracking.Web/Controllers/AvailablePhoneNumbersController.cs

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

              電話番号の購入方法

              電話番号を購入

              Our PurchasePhoneNumber method takes two parameters, the first one is a phone number and the second one is the application SID. Now our Twilio API client can purchase the available phone number our user chooses.

                    
                    
                    
                    
                    CallTracking.Web/Domain/Twilio/RestClient.cs

                    電話番号を購入する

                    CallTracking.Web/Domain/Twilio/RestClient.cs

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

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

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

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

                    TwiMLAppを作成する

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

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

                    Twilio 番号を検索し購入したら、データベースのリードソースと関連付ける必要があります。これは、通話のトラッキングアプリケーションのコアです。新しい Twilio 番号にかかってきた通話はこのソースに起因するものとみなされます。

                          
                          
                          
                          
                          CallTracking.Web/Controllers/LeadSourcesController.cs

                          リードソースのアクションメソッドを作成する

                          CallTracking.Web/Controllers/LeadSourcesController.cs

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

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

                          リードソースのモデルを定義する

                          LeadSource モデルは、Twilio 番号を指定したリードソース(「Wall Street Journal Ad」や「Dancing guy with sign」など)に関連付けます。また、セールスやサポートヘルプ回線など、すべての通話のリダイレクト先の電話番号も追跡します。

                                
                                
                                
                                
                                CallTracking.Web/Models/LeadSource.cs

                                リードソースのモデル

                                CallTracking.Web/Models/LeadSource.cs

                                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 が提供するデータの一部を記録します。

                                      
                                      
                                      
                                      
                                      CallTracking.Web/Models/Lead.cs

                                      リードモデル

                                      CallTracking.Web/Models/Lead.cs

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

                                      通話の転送方法を学ぶ

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

                                      いずれかの Twilio 番号にお客様から電話がかかると、Twilio はこのアクションに関連付けられている URL(/CallTracking/ForwardCall)に POST リクエストを送信します。

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

                                            
                                            
                                            
                                            
                                            CallTracking.Web/Controllers/CallTrackingController.cs

                                            電話の転送

                                            CallTracking.Web/Controllers/CallTrackingController.cs

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

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

                                            リードソースについての統計の取得

                                            データから引き出すことができる便利な統計情報は、各 LeadSource が受け取った通話の数です。LINQ を使って、各 LeadSource およびその Lead モデルのカウントを示すリストを作成します。

                                                  
                                                  
                                                  
                                                  
                                                  CallTracking.Web/Controllers/StatisticsController.cs

                                                  ソースの統計によるリード

                                                  CallTracking.Web/Controllers/StatisticsController.cs

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

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

                                                  Chart.jsを使用した統計の視覚化

                                                  クライアント側ではjQueryを使用して、サーバーからJSON形式で通話トラッキングの統計を取得します。 統計は、Chart.jsで作成するカラフルな円グラフに表示します。

                                                        
                                                        
                                                        
                                                        
                                                        CallTracking.Web/Scripts/call-tracking.js

                                                        統計からの円グラフ

                                                        CallTracking.Web/Scripts/call-tracking.js

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

                                                        関連トピック

                                                        関連トピック

                                                        Twilio を使う C# 開発者であれば、以下のチュートリアルもお楽しみください。

                                                        自動調査(C#)

                                                        音声通話または SMS テキストメッセージを介して調査を実施し、ユーザーから構造化データを迅速に収集します。

                                                        アポイント リマインダー(C#)

                                                        Twilioを使ってウェブアプリケーションにアポイントリマインダーを実装する方法を学びます。アポイントリマインダーはアポイント前にお客様に自動的に通知を送ります。

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

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

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

                                                        ヘルプが必要ですか?

                                                        We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.