WisePopsを利用したメールアドレス登録フォームの作成

メーリングリストやキャンペーンメールの配信にあたってメールアドレスの登録フォームが必要なとき、皆さんはどのように作成していますか？Wordpressのようなシステムを利用している場合はフォーム作成用のプラグインを使ったり、マーケティングツールを導入している場合は標準のフォーム作成機能を利用したりすることが多いかと思います。一方で、Webサイトによっては開発チームが専用フォームを構築しているケースも多いように感じます。

次に、登録フォームが準備できたとして、入力されたメールアドレスとメール配信サービスの連携はどのように行っているでしょうか？登録情報はメールアドレスのみだけど、一度自社のデータベースに格納して、メール配信するときに毎回CSVでエクスポート・インポートするなど、人手をかけて作業しているケースもあるのではないでしょうか。

SendGridの旧マーケティングメール機能(Legacy Newsletter)では、こうした手間を省くことができるSendGrid Subscription Widgetという便利なツールがありました。このツールを使ってフォームを作成すると、登録されたメールアドレスをSendGridの宛先リストへシームレスに連携することが可能でした。残念ながら、このWidgetは新しいマーケティングキャンペーン機能に対応しておらず、利用することができません。代わりに、マーケティングキャンペーン機能では、SendGrid Subscription Widgetと同等のことができ、かつ、さらに便利な機能を持ったサービスと連携できるようになっています。具体的にはPrivy, JustUno, WisePopsなどのサービスです。

今回は、この中からWisePopsを紹介します。WisePopsはWebサイトのポップアップ部品を簡単に作成できるサービスです。HTMLやJavaScriptの知識がなくても自由に部品を作成することが可能で、綺麗なデザインのテンプレートも揃っています。テンプレートの種類(カテゴリ)に「Email Signup」もあるため、メールアドレスの登録フォームも簡単に作れます。さらに、ポップアップ表示の挙動を変えたり、ボタンを押したユーザ数の分析や異なるデザインを比較するA/Bテストなど、様々な便利機能が揃っています。

それでは実際にメールアドレス登録のポップアップ部品を作成してみましょう。

WisePopsのユーザアカウントを作成したら「Create a New Campaign」ボタンを押してキャンペーンを作成します。ブラウザ内のビルダーを使って、ゼロベースに構築することもできますが、今回はWisePopsが用意しているテンプレートを利用します。

テンプレートは、「メールのサインアップ用(Email Signup)」の他「Sales & Marketing」「Social and Video」「Feedback Request」「User Experience」「Seasonal」と用途に合わせて様々なタイプのポップアップを選択できるようになっています。

今回は「Email Signup」の中からシンプルなデザインの「Subtle Sign Me Up」を選択しました。マウスオーバーするとボタンが表示されるので「Use this template」をクリックします。

すると、下図のようにポップアップの編集画面が表示されます。

編集は非常に簡単で、画面のサイズや色などについては、左のパネルに表示されている属性情報を変更するだけです。表示されている文字や挙動を変更する場合は、その部品を選択します。すると「Edit」リンクが下図のように表示されるのでクリックしてください。

編集用画面が表示されたら、あとはエディタ感覚で修正できます。下図はメッセージ部分のラベルを編集する画面です。

ここでは単純に、テンプレートの文字を全て日本語にしてみました。

「登録する」ボタンのあるエリアを選択して「Edit」リンクをクリックします。

すると、下図のような編集画面が表示されます。タブに「Fields」「Button」「SYNC」などが並んでいます。

SendGridとの連携は「Sync」タブで設定します。SendGridのアイコンをクリックし、入力ダイアログが表示されたらAPI Keyを入力します。

API Keyのパーミッション種類で「Restricted Access」を選択した場合、アクセス制限したAPI Keyを発行することができます。WisePopsで設定するAPI Keyは最低限「Marketing Campaigns」のパーミッションが必要となります。

認証がうまくいくと「Choose your list」の部分にSendGridのマーケティングキャンペーン機能で作成された宛先リスト(Contacts)がプルダウンで表示されます。うまく表示されない場合は「refresh」ボタンを押してみてください。（宛先リストが未作成の場合は作成してください）

フォームで登録されたメールアドレスは、このプルダウンで選択した宛先リストに追加されていきます。データの同期は即時ではなく、一定の時間ごとなので注意してください。

作成したフォームの表示を確認するには「Save」ボタンの左にある「QUICK PREVIEW」または「WEBSITE VIEW」をクリックします。「QUICK PREVIEW」は同じ画面内に表示し、「WEBSITE VIEW」は別ページを開いてプレビューします。下図は「QUICK PREVIEW」で同じ画面に表示した結果です。

ポップアップの表示タイミングは、「DISPLAY SCENARIOS」で他のパターンに変更することもできます。デフォルトは「On landing」となっていて、Webページの表示時となります。

各種設定が完了したら、「Save」ボタンの横にあるON/OFFのトグルボタンでアクティブ(ON)にして保存します。保存後、画面上段に表示されている「Tracking Code」をクリックして、表示されたスクリプトをコピーします。

コピーしたスクリプトをWebサイトのHTMLに埋め込んだら設定完了です。実際にWebサイトにアクセスすると、下図のようにポップアップが表示されました。

メールアドレスを登録すると、WisePopsのDashboardに表示数(Displays)やクリック数(Clicks)、登録メール数(Emails)が表示されます。

そして、SendGridのマーケティングキャンペーン機能で宛先リスト(Contacts)を確認すると、WisePopsと同じ数のメールアドレスが保存されています。

いかがでしょうか？WisePopsを利用することで、簡単にメールアドレスのフォーム登録からSendGridの宛先リストへの追加まで、シームレスに自動連携できました。登録フォームの作成と宛先リストへの追加を効率的に行いたい場合など、是非こうしたサービスも検討してみてください。