Subscription Widgetを使ったメールアドレス登録フォームの作成方法

SendGridサポートチームの菊田（@kikutaro_）です。セミナーやハンズオンで「メールアドレスの登録フォームを簡単に作る方法を教えて欲しい」という質問を受けることがあるのですが、SendGridにはWebフォームを作る機能はないため、次のような対応が必要です。

• 自分で実装する
• CMSや営業/マーケティングのツールが持つWebフォーム作成機能で作る
• 「Form.io」、「WisePop」などの外部サービスを利用する
• 「Subscription Widget」を使う

4つ目の「Subscription Widget」はメールアドレス登録に必要なものを集めたアプリケーションで、SendGridユーザ向けのSubscription Widgetがオープンソースで公開されています。（ただし、SendGrid公式のアプリケーションではありません）

本日のブログでは、このSubscription Widgetの利用方法をご紹介します。ソースコードについては触れないため、詳しく知りたい方は、米国SendGrid社のブログをご確認ください。

Subscription Widgetの構成

Subscription Widgetは次の機能を備えています。

• メールアドレス登録用のWebフォームを表示する
• ダブルオプトインでメールアドレスを取得する
• マーケティングキャンペーン機能のContactsへメールアドレスを登録する

システムの構成と全体の流れは下図のとおりです。

Subscription Widgetは、node.jsで実装されていて、PaaS環境のHerokuで動作することを前提としています。SendGridを利用して「オプトインの確認メール送信」と「メールアドレス登録」を行います。

実行結果

設定方法を説明する前に、実行結果をご紹介します。Webページにアクセスすると次のようなメールアドレスの登録フォームが表示されます。

メールアドレスと姓名を入力して「SIGN UP」ボタンを押すと「確認メールを送信した」という内容のメッセージが表示されます。

入力したメールアドレス宛に「Please Confirm Your Email Address」というタイトルのメールが届いたら、メール本文にある「this link」リンクをクリックします。

Webページが表示されて「リストに登録した」というメッセージが表示されます。

SendGridのマーケティングキャンペーン機能でContactを確認すると、入力したメールアドレスが登録されているのが確認できます。

実行結果は以上です。画面やメールは英語となっていますが、ソースコードや設定ファイルで変更可能です。また、SendGridのメールテンプレートを利用したり、All Contactsではなく特定のContact Listへ追加したりすることも可能です。

それではSubscription Widgetの具体的な設定手順についてご紹介します。

Subscription Widgetの設定手順

まずはじめに、次のものを準備してください。

• Gitをインストールした環境
• GitHubのアカウント
• SendGridのアカウント
• Herokuのアカウント

設定手順は次のとおりです。

1. SendGridのAPIキーを取得する
2. GitHubでSubscription WidgetをForkする
3. Herokuにデプロイする
4. Herokuの環境変数にSendGridのAPIキーを設定する
5. SendGridのEvent WebhookにSubscription WidgetのURLを設定する
6. ForkしたリポジトリをCloneする
7. Branchを作成して設定の変更・コミット・プッシュをする
8. BranchをHerokuにデプロイする

7,8はBranchを作成せずにMasterのままでも構いません。今回はオリジナルのソースコードを取っておくためにBranchを作成しました。それでは各手順の詳細を説明します。

1. SendGridのAPIキーを取得する

SendGridにログインして、SETTINGS > API KeysからAPIキーを作成します。Subscription Widgetを使う上で必要な権限はMail SendとMarketing Campaignsなので、下図のようにRestricted Accessを選んで2つの権限だけFull Accessにしてください。

2. GitHubでSubscription WidgetをForkする

GitHubのSubscription Widgetページで「Fork」ボタンを押してForkします。

3. Herokuにデプロイする

Forkしたら「Deploy to Heroku」ボタンを押して、Herokuにデプロイします

アプリケーション名は何でも構いません。ここでは「sgsubscriptionwidget」と付けました。「Deploy App」ボタンでデプロイして、完了したら「View」ボタンでページを開きます。

下図のページが表示されたらOKです。この時点ではまだ設定が完了していないため、表示確認だけしてください。確認できたらアプリケーションのURLをコピーします。

4. Herokuの環境変数にSendGridのAPIキーを設定する

Herokuの環境変数へSendGridのAPIキーを設定します。「Settings」の「Config Vars」でキーの名前を「SG_API_KEY」、値をSendGridのAPIキー(SGではじまる文字列)に設定します。

5. SendGridのEvent WebhookにHerokuのURLを設定する

SendGridに戻って、Settings > Mail SettingsでEvent Notificationの設定を開きます。「HTTP POST URL」に「3でコピーしたHerokuのアプリケーションURL/signup」の値を入れ、イベントで「Clicked」のみにチェックを入れます。

6. ForkしたリポジトリをCloneする

アプリケーションの設定をローカル環境で変更するため、ForkしたリポジトリをGitでCloneします。

git clone https://github.com/[ForkしたGitHubのuser名]/sendgrid_subscription_widget.git

7. Branchを作成して設定の変更・コミット・プッシュをする

新しく「mysetting」というbranchを作成してチェックアウトします。

git checkout -b mysetting

チェックアウトした後、以下2箇所のURLをHerokuのアプリケーションURLに変更します。

【変更1】setting.js

変更前

exports.url = 'http://localhost:3090';

変更後

exports.url = '3でコピーしたHerokuのアプリケーションURL';

setting.jsでは他に、SendGridから送信されるオプトインメールに関する設定が可能です。これらの変更はオプションなので、デフォルト値のまま進めても問題ありません。

exports.senderEmail：オプトインメールのヘッダfrom
exports.senderName：オプトインメールの差出人
exports.listID：メールアドレスの登録先Contact ListのID（nullの場合はAll Contactsに登録)
exports.templateId：テンプレートID（nullの場合はテンプレートなし）

【変更2】/server/static/index.html

変更前

<form action="http://localhost:3090/confirmEmail" method="post">

変更後

<form action="3でコピーしたHerokuのアプリケーションURL/confirmEmail" method="post">

変更したらコミットしてプッシュします。

git add .\server\static\index.html
git add .\settings.js
git commit -m "デプロイしたHerokuの設定値を反映"
git push origin mysetting

8. BranchをHerokuにデプロイする

最後にプッシュしたBranchをHerokuにデプロイします。HerokのDeployメニューにあるDeployment methodでGitHubを選び、リポジトリを特定したら「Connect」ボタンを押します。

mysettingのブランチを選択してデプロイします。

以上で設定完了です。デプロイしたアプリケーションで前述の「実行結果」を確認してみてください。

メールアドレスの登録フォームを作成するのは手間と思う方も多いと思いますが、Subscription Widgetを利用すると今回のように簡単に作成できます。あとは自分のサイトにデザインを合わせたり、同じ仕組みを他の言語で実装するなど、色々な利用方法があると思うので、是非お試しください。