Challenge Engineer Life !

エンジニア人生を楽しみたい!仕事や趣味で学んだ技術的なことを書いていくブログです。

getsitecontrolを使ってSendGridのメール購読フォームを5分で設置する

珍しく釣りっぽいタイトルを付けてしまったのですが、実際にできたので嘘ではありません(^^;

よくWebサイト上でフワッと表示されるウィジェット(問合せフォームやメール購読、プロモーション、チャット…etc)をみかけますが、これを簡単に設置できるgetsitecontrolというサービスがあります。

getsitecontrol.com

f:id:kikutaro777:20190822223849p:plain

発行されたJavaScriptをWebサイトに埋め込んでおくだけで、色々な種類のウィジェットを設置できます。どのページで表示するか、表示する条件となるアクセス元の端末・ブラウザ・OSなども設定できる優れものです。

f:id:kikutaro777:20190822230532p:plain

getsitecontrolのinterationにSendGridがあり、メール購読フォームの設置+マーケティングキャンペーン機能の宛先リストへの登録が簡単にできたので紹介します。

getsitecontrolにサインアップして初期設定する

「Try for free」のボタンでサインアップします。
f:id:kikutaro777:20190822230840p:plain

アカウント名とパスワードを決めて、ウィジェットを設置するWebサイトのURLを入れます。
f:id:kikutaro777:20190822230931p:plain

JavaScriptのコードが生成されるので、WebサイトのHTMLを開いてbodyタグの末端に入れます。
f:id:kikutaro777:20190822231052p:plain

私はこのはてなブログで試しました。bodyタグの末端に定義する方法がわからず、とりあえずデザインのフッタに入れました。
f:id:kikutaro777:20190822231414p:plain

問題なく設置できたのか「Check Code」ボタンで検証できます。
f:id:kikutaro777:20190822231515p:plain

コードの埋め込みに成功していると以下の画面となって準備完了となります。
f:id:kikutaro777:20190822231605p:plain

メール購読フォームを作成する

では早速メール購読フォームを作ってみます。「Create Widget」を押します。
f:id:kikutaro777:20190822231811p:plain

プルダウンメニューはこんな感じです。ここでは「Subscribe」を選択します。
f:id:kikutaro777:20190822231840p:plain

ウィジェットのデザイン画面が表示されます。かなり柔軟に変えられそうです。今回はデフォルトのまま、Webサイトの下端にフォームが表示されるもので進めました。
f:id:kikutaro777:20190822231914p:plain

ウィジェットのデザインを決めたら「Integrations」で連携先を設定します。SendGridを選びます。
f:id:kikutaro777:20190822232036p:plain

Connectionを押すと、SendGridのAPIキーを入力するダイアログが表示されるので、APIキーを入力します。
f:id:kikutaro777:20190822232154p:plain

すると、SendGridのマーケティングキャンペーン機能にある宛先リストが表示されるので、いずれか選択します。ちゃんとUIに組み込まれているのがいいですね。
f:id:kikutaro777:20190822232321p:plain

最後にウィジェットを「Activate」にして有効化します。
f:id:kikutaro777:20190822232411p:plain

動作確認

ブログを開くと、ウィジェットがヌルっと表示されました!
f:id:kikutaro777:20190822232557p:plain

メアドを入れます(このキャプチャのメアドは存在しません)
f:id:kikutaro777:20190822232814p:plain

SendGridの宛先リストを確認すると…入ってます!簡単すぎる…!
f:id:kikutaro777:20190822233816p:plain

ウィジェットのデザインはgetsitecontrol側でするだけで、Webサイト側には手を加える必要がありません。実用的ですね。

(補足)英語ですが、今回と同じような内容が以下でまとまっていました。
getsitecontrol.com

にほんブログ村 IT技術ブログへ
にほんブログ村 にほんブログ村 IT技術ブログ Javaへ
にほんブログ村