Webプッシュ通知との連携方法
本記事では、OneSignalというWebプッシュ通知のためのサービスとカミハヤMAをZapierを用いて連携する方法について説明します。
目次
１．はじめに
２．連携方法
３．最後に
１．はじめに
WebPush通知とは、通知を許可したユーザーにWebブラウザ経由でプッシュ通知をすることです。皆さんもYouTubeなどで例えばPCのブラウザでデスクトップ通知を受信する設定にしていれば、新しい動画が公開されると情報がブラウザ上に通知されてくるのを経験された方も多いのではないでしょうか。プッシュ通知の仕組みには、いろいろありますが今回はカミハヤMAで例えばフォームを公開して、そのフォームから登録したコンタクトに対してWebプッシュ通知を送りたい場合、その設定方法について説明します。
２．連携方法
今回、Webプッシュ通知の仕組みとしてOneSignalというクラウドサービスを利用します。
OneSignalは、今回ご紹介するWebPushのみならず、モバイルPushやSMS、Emailなど幅広くメッセージ配信できて配信結果や登録ユーザー状況もダッシュボード画面から簡単に確認することができます。
次にカミハヤMAとOneSignalを連携させる仕組みとして、今回はzapierというiPaaS（Integration Platform as a Service）を利用することにします。1,000以上のSaaS（Software as a Service）と連携しており、それらを組み合わせてワークフローを自動化させることが可能で、しかもノーコード・ローコードで自動化させることが可能なクラウドサービスです。
連携方法は、次のような流れとなります。。
【OneSignalで実施すること】
①OneSignalのページよりSignUpを行います。SignUpを行った後、取得した情報をもとにLogInします。
②画面右上のNew App/Websiteのボタンをクリックします。
③NewApp/Websiteのページに遷移したらName of your app or websiteにOneSignalのタグを設置するWebsite名を入力して、Set up web push or mobile push.の表示アイコンの中からWebをクリックします。その後、Next:Configure your Platformのボタンをクリックします。
④今回は、単純にレンタルサーバーにアップした検証用のページにアクセスしにきたユーザーが許可を許したらメッセージ配信することにします。その場合は、Choose IntegrationでTypical Siteのボタンをクリックします。Site SetupのSITE NAMEとSITE URLは、今回OneSignalのJavaScriptタグを設置するサイト名とサイトURLを入力します。もしそのサイトが、HTTPSサイトではない場合には、My site is not fully HTTPSのトグルスイッチをONにして、CHOOSE A LABELに任意のラベルを入力します。
Welcom Notificationの画面では、ユーザーが通知を許可した後のサンキューメッセージを独自に設定することが可能です。
今回は、以上の設定でSaveボタンをクリックすることとします。
⑤Add Code to Siteに<head>タグ内に設置するコードが発行されていますので、それをコピーしておきます。そして最後にFinishボタンをクリックします。
では、OneSignalの設定がうまくいったかどうかをテストしてみましょう。
設定したページへアクセスすると、下図のようなフローが進むことを確認することで、設定がうまくいったことがわかります。
【zapier側で実施すること（カミハヤMAの接続設定】
①zapierのページよりSignUpを行います。SignUpを行った後、取得した情報をもとにLogInします。
②ログインするとCreate your own workflowのConnect this app...のSearch for an appでMauticと検索します。
③with this one!のSearch for an appでOneSignalと検索します。
④When this happens...のSelect a Triggerのプルダウンの中から今回は、New Form Entryを選択します。
⑤then do this!のSelect an Actionのプルダウンから今回はSend Push Notificationを選択します。
⑥Try itのボタンをクリックします。
⑦Here's what's coming upの画面に遷移するので、Get startedボタンをクリックします。
⑧Connect your Mautic accountのページに遷移するので、今回接続するアカウントのラジオボタンをクリックした後、Nextボタンをクリックします。（あらかじめ＊＊＊しておく必要があります）
⑨Formの画面に遷移しますので、今回どのフォームを利用するのかラジオボタンをクリックした後、Nextボタンをクリックします。
【zapier側で実施すること（OneSignalの接続設定】
⑩Connect your OneSignal accountの画面に遷移するので、今回接続するアカウントのラジオボタンをクリックした後、Nextボタンをクリックします。（あらかじめ＊＊＊しておく必要があります）
⑪Map fields from Mautic into OneSignalの画面に遷移するので、Notification ContentやTitleなどを設定します。
⑫Let's test out this Zap画面に遷移するので、Send testボタンをクリックします。
上図のようなWebプッシュ通知が配信されたことを確認することで、設定がうまくいったことがわかります。そしてNextボタンをクリックします。
⑬Review and turn on your Zapの画面に遷移するので、Turn ON Zapボタンをクリックします。
⑭Your Zap is on!の画面に遷移したら設定は完了です。
では、最後に一通りのテストをしてみましょう。
うまくいきましたね。
３．最後に
いかがでしたでしょうか。zapierを利用するとコードレスで、カミハヤMAとOneSignalとの連携システムを簡単にリリースすることがご理解いただけたと思います。これからもzapierを用いたワークフロー事例をご紹介していければと思います。
