メニュー

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?

SMS and MMS Marketing Notifications with Node.js and Express

Ready to implement SMS and MMS marketing notifications? Today we'll look at adding them to your Node.js and Express application.

Here's how it will work at a high level:

  1. A possible customer sends an SMS to a Twilio phone number you advertise somewhere.
  2. Your application confirms that the user wants to opt into SMS and MMS notifications from your company.
  3. An administrator or marketing campaign manager crafts a message that will go out to all subscribers via SMS or MMS message.

Walmartが「Value of the day」販促キャンペーンの一環として顧客に特売情報を毎日送信した方法をご覧ください。

ビルディングブロック

これを行うには、以下のツールを操作します。

  • TwiML and the <Message> Verb: We'll use TwiML to manage interactions initiated by the user via SMS.
  • Messages Resource: We will use the REST API to broadcast messages out to all subscribers.

さぁ、はじめましょう! 下のボタンをクリックして、チュートリアルの次の手順に移動してください。

Onwards!

購読者モデル

In order to track our subscribers, we need to start at the beginning and provide the right model.

To facilitate, we will need to implement a couple of things:

まず始めに、Subscriber のモデルを見てみましょう。

The Subscriber Model Lies This Way

購読者の作成

We begin by adding a Mongoose model that will store information about a subscriber in a MongoDB database.

このチュートリアルでは、購読者に関する大量の情報を保存する必要はありません。購読者の電話番号(アップデートの送信先)と購読者がアップデートの受信にオプトインされるかどうかを示す boolean フラグのみ保存します。

        
        
        
        
        models/Subscriber.js

        The Subscriber Model

        models/Subscriber.js

        Now that we have a model object to save a subscriber, let's move up to the controller level.

        Control the Next Step

        Creating a Route for a Twilio Webhook

        In an Express web application, we can configure JavaScript functions to handle incoming HTTP requests. When Twilio receives an incoming message, it will send an HTTP POST request to one of the routes we set up.

        In this code, we configure all the routes our application will handle, and map those routes to controller functions.

              
              
              
              
              controllers/router.js

              ウェブホックルートの作成

              controllers/router.js

              And how do we tell Twilio to call a route on an incoming event? We'll look at that logic, next.

              Give It the Webhook

              ウェブホックをルートにマップする

              Click on one of your Twilio numbers on the Manage Phone Numbers screen in the account portal. For this number, you will need to configure a public server address for your application, as well as a route which Twilio will POST to when your number gets any incoming messages:

              Twilio Console with message webhook

              The route has to be publicly exposed. In the above screenshot you can see a route exposed by ngrok. Our colleague Kevin has written about testing with ngrok in the past.

                    
                    
                    
                    
                    controllers/router.js

                    ウェブホックルートの作成

                    controllers/router.js

                    Let's dive into the controller function that will handle incoming message logic next.

                    着信メッセージの処理

                    Since the webhook function will be called every time our application receives a message, it will eventually need quite a bit of business logic. We'll look at how this function works piece by piece as the tutorial continues, but let's focus on the first message the user sends for now.

                    Show Me How to Create a New Subscriber

                    新しい購読者の作成

                    We begin by getting the user's phone number from the incoming Twilio request. Now, we need to find a Subscriber with a matching phone number (a phone number is a unique property on the Subscriber).

                    If there's no subscriber with this phone number, we create one, save it, and respond with a friendly message asking them to text "subscribe". We are very careful to have potential customers confirm that they would like to receive marketing messages from us.

                          
                          
                          
                          
                          controllers/message.js

                          And that's all we want at this step! We've created a Subscriber model to keep track of the people that want our messages, and shown how to add people to the database when they text us for the first time.

                          次に、購読ステータスを管理できるようにするために導入する必要があるロジックを見てみましょう。

                          The Opt-Ins and the Opt-Outs

                          Managing User Subscriptions

                          ユーザーの購読状態の管理に、subscribeunsubscribe という2つのSMSコマンドを提供することにします。 

                          These commands will toggle a boolean on a Subscriber record in the database, and only opted-in customers will receive our marketing messages. Because we want to respect our users' preferences, we don't opt them in automatically - rather, we have them confirm that they want to receive messages from us first.

                          これを実現するためには、着信テキストメッセージを処理するコントローラーロジックを更新して、以下の操作を実行する必要があります。

                          • If the user is already in the database, parse the message they sent to see if it's a command we recognize
                          • それが subscribe または unsubscribe コマンドの場合は、データベースで購読ステータスを更新します。
                          • それが認識できないコマンドの場合は、使用可能なコマンドについて説明するメッセージを送信します。

                          コントローラー関数に戻って、これがどのように機能するのかを見てみましょう。

                          Back to the Controller

                          Process an Incoming Message

                          この内部関数は、ユーザーからの着信メッセージの解析と、認識可能なコマンドをユーザーが発行したかどうかを確認するための条件付きロジックの実行を処理します。この内部関数は、データベースを 1 回ヒットして現在の Subscriber モデルを取得した後に実行されます。

                                
                                
                                
                                
                                controllers/message.js

                                Next: how to handle user commands.

                                購読コマンドの処理

                                ユーザーが subscribe または unsubscribe を書いてメールを送信した場合は、データベースで購読ステータスを更新します。その後、アップデートにオプトインするかアップデートからオプトアウトするための反対のコマンドで SMS を介してユーザーに応答します。

                                      
                                      
                                      
                                      
                                      controllers/message.js

                                      Update Subscriber status

                                      controllers/message.js

                                      List Available Commands

                                      If a user texted in something we don't recognize, we helpfully respond with a listing of all known commands.

                                      You could take this further and implement "help" text for each command you offer in your application, but in this simple use case the commands should be self-explanatory.

                                            
                                            
                                            
                                            
                                            controllers/message.js

                                            Return a message listing all commands

                                            controllers/message.js

                                            Now we'll show how to return a response to Twilio in a form it expects.

                                            Return TwiML to Twilio

                                            TwiML での応答

                                            This respond helper function handles generating a TwiML (XML) response using a Jade template.

                                                  
                                                  
                                                  
                                                  
                                                  controllers/message.js

                                                  Wrap a message in a TwiML response

                                                  controllers/message.js

                                                  The TwiML response is reasonably simple, but for the sake of completeness let's peek in to see what it does.

                                                  Zoom in on the TwiML

                                                  TwiML での応答:Jade テンプレート

                                                  Jade は、ウェブアプリケーションで HTML または XML マークアップを生成するために使用できる Node.js 用の一般的なテンプレートエンジンです。ここでは、Jade を使用して、コントローラーで定義したテキスト付きの Message タグを含む TwiML Response を生成します。

                                                  This will command Twilio to respond with a text message to the incoming message we just parsed.

                                                        
                                                        
                                                        
                                                        
                                                        views/twiml.jade

                                                        ユーザーが直面するコマンドについては、これで終わりです。ここで、すべての購読者にメッセージを送信するためのインターフェイスをマーケティングチームに提供する必要があります。次は、これを見てみましょう。

                                                        SMSおよびMMS(日本未対応)通知の送信

                                                        素晴らしい SMS および MMS コンテンツに対する購読者のリストを入手したので、メッセージを送信するためのある種のインターフェイスをマーケティングチームに提供する必要があります。

                                                        これを実現させるには、以下の操作を行うようにアプリケーションを更新する必要があります。

                                                        • Create a route to render a web form that an administrator canuse to craft the campaign
                                                        • Create a controller function to handle the form's submissions
                                                        • Twilio API を使用して現在のすべての購読者にメッセージを送信する
                                                              
                                                              
                                                              
                                                              
                                                              controllers/router.js

                                                              フロントエンドで、管理者が対話するウェブフォームから始めましょう。

                                                              ウェブフォームの作成

                                                              ここでは、Jade を使って、マーケティングキャンペーンの管理者が使用するウェブフォームが含まれる HTML ドキュメントをレンダリングします。

                                                              このウェブフォームには、2 つのフィールドしかありません。1 つはテキストメッセージを指定するためのもので、もう 1 つは、MMS 経由で送信できるパブリックインターネット上のイメージへのオプション URL を指定するためのものです。

                                                                    
                                                                    
                                                                    
                                                                    
                                                                    views/index.jade

                                                                    次に、コントローラーに進んで、フォームの送信時に何が起こるのかを見てみましょう。

                                                                    フォームの投稿の処理

                                                                    サーバー上で、メッセージテキストとイメージ URL を POST 本文から取得し、Subscriber モデル上の関数を使用してテキストメッセージを現在のすべての購読者に送信します。

                                                                    メッセージの送信中に、メッセージング試行に関するフィードバックを含んだ flash メッセージで同じウェブフォームにリダイレクトします。

                                                                          
                                                                          
                                                                          
                                                                          
                                                                          controllers/message.js

                                                                          次に、モデルに進んで、これらのメッセージがどのように送信されるのかを見てみましょう。

                                                                          Twilio REST クライアントの設定

                                                                          When the model object is loaded, it creates a Twilio REST API client that can be used to send SMS and MMS messages. The client requires your Twilio account credentials (an account SID and auth token), which can be found in the Twilio Console:

                                                                          コンソールの認証情報

                                                                                
                                                                                
                                                                                
                                                                                
                                                                                models/Subscriber.js

                                                                                Setup Twilio Node.js client

                                                                                models/Subscriber.js

                                                                                メッセージテキストを送信する静的関数を見てみましょう。

                                                                                Sending Messages from Node.js

                                                                                Here we define a static function on the model which will query that database for all Subscribers that have opted in to receive notifications.

                                                                                アクティブな購読者が見つかったら、各購読者をループスルーし、コントローラーから送られたパラメーターに基づいてメッセージを送信します。メッセージに関連付けられたイメージ URL がない場合は、そのフィールドを Twilio API リクエストから省きます。

                                                                                      
                                                                                      
                                                                                      
                                                                                      
                                                                                      models/Subscriber.js

                                                                                      And with that, you've seen all the wiring necessary to add marketing notifications for your own use case! Next we'll look at some other features you might enjoy.

                                                                                      次はどこでしょうか?

                                                                                      That's it! We've just implemented a an opt-in process and an administrative interface to run an SMS and MMS marketing campaign. Now all you need is killer content to share with your users via text or MMS (you'll have to craft that on your own...).

                                                                                      Here's a couple of our favorite Node posts on adding features:

                                                                                      アポイントメント リマインダー

                                                                                      近く予定されているアポイントメントに先立ち、お客様へ接触するプロセスを自動化します。

                                                                                      クリック トゥー コール

                                                                                      会社のウェブトラフィックをボタンのクリック 1 つで、電話コールに変換します。

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

                                                                                      Thanks for checking this tutorial out! Whatever you're building and whatever you've built - we'd love to hear about it. Drop us a line on Twitter.

                                                                                      Jarod Reyes Jose Oliveros Agustin Camino Andrew Baker Paul Kamp Kat King
                                                                                      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.