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」リンクをクリックします。

「Please Confirm Your Email Address」のメール

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

「リストに登録した」というメッセージ

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

マーケティングキャンペーン機能のContact

マーケティングキャンペーン機能の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にしてください。

SendGridのAPIキーを取得

2. GitHubでSubscription WidgetをForkする

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

GitHubでSubscription WidgetをFork

3. Herokuにデプロイする

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

Herokuにデプロイする0

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

「View」ボタンでページを開く

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

アプリケーションのURLをコピー

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

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

Herokuの環境変数にSendGridのAPIキーを設定

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

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

SendGridのEvent WebhookにHerokuのURLを設定

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」ボタンを押します。

BranchをHerokuにデプロイする

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

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

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

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

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