インソースマーケティングデザイン
2019.06.13 システム
OneSignal×WordPressで特定のユーザーにWebプッシュ通知を送信！
マリンロードスタッフブログをご覧いただいている皆様、こんにちは。
フロントエンドエンジニアの虎澤です。
OneSignalをWordPressサイトで実装しようとしたことがある方ならご存知だと思いますが、
OneSignalには、WordPress用のプラグインが用意されています。
■OneSignal – Web Push Notifications
このプラグインを導入すれば、WordPressで構築されたサイトからのWebプッシュ通知機能がカンタンに実装できちゃいます。
…が、特定のユーザーにのみ絞って配信するセグメント配信機能を使いたい場合、
どうしてもこのプラグインだけではうまく実装できませんでした。
最終的には、プラグインは一切使わず、コードなどカスタマイズして実装したのですが、今回はその方法を簡潔にご紹介致します。
STEP1： アカウント登録
以下などを参考に、OneSignalの新規アカウントを作成します。
https://www.blogging-life.com/onesignal-web-push-notification-for-wordpress-site/
STEP2： アプリケーション作成
基本的な流れは上記の他の参考サイトと同じですが、WebPush設定画面（Configure Web Push）で、
「Wordpress Plugin or Website Builder」ではなく、「Typical Site」を選択します。
「Typical Site」での設定方法は、公式のドキュメントを参考に設定してください。
https://documentation.onesignal.com/docs/web-push-typical-setup
STEP3： WordPressに初期設定を組み込む
一通り設定が完了すると、OneSignal導入のためのコードが発行されますので、header.phpに追記します。
<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(function() {
OneSignal.init({
appId: “発行されたアプリID”,
});
});
</script>
また、購読ボタンを置きたいところに、以下を追記します。
STEP4： WordPressにプッシュ通知機能を組み込む
プッシュ通知を配信する場合、APIを叩いて行うわけなのですが、WordPressでは、
その処理をwp_remote_post()というテンプレートタグを使って行います。
以下サンプルコード
$apiurl = “https://onesignal.com/api/v1/notifications”;
$app_id = ‘発行されたアプリID’;
$apikey = ‘発行されたAPIkey’;
$title = ‘タイトル’;
$mess = ‘メッセージ’;
$link_url = ‘通知に貼るリンク先’;
$icon_url = ‘アイコン画像のURL’;
$headings = array(“en” => $title);
$content = array(“en” => $mess);
$fields = array(
’app_id’ => $app_id,
’filters’ => array(array(“field” => “tag”, “key” => “タグ名”, “relation” => “=”, “value” => “value値”)),
’url’ => $link_url,
’chrome_web_icon’ => $icon_url,
’headings’ => $headings,
’contents’ => $content
);
$fields = json_encode($fields);
$headers = array(
’Content-Type’ => ‘application/json’,
’Authorization’ => “Basic {$apikey}”,
);
//プッシュ
$responce = wp_remote_post(
$apiurl,
array(
’method’ => ‘POST’,
’headers’ => $headers,
’body’ => $fields,
)
);
$message = json_decode($responce[‘body’]);
if (is_wp_error($responce)) {
$msg = ‘API POST Error’.$responce->get_error_message();
}elseif (isset($message->errors)) {
$msg = ‘Onesignal – Error’.$message->errors[0];
}else{
$msg = ‘Onesignal – Success’;
}
return $msg;
}
あとはこの関数を、好みのタイミングで実行すれば、プッシュ通知を送信できるようになります。
例えば、特定のカテゴリの記事が公開された時、更新したときなど、自由にカスタマイズすることが可能です。
また、ユーザーに特定のタグ付けをして、特定のタグに絞って通知を送ることもできます。
var OneSignal = window.OneSignal || [];
OneSignal.push(function() {
OneSignal.init({
appId: “発行されたアプリID”,
});
});
//購読ボタンが押されたら、タグを付与する
OneSignal.on(‘subscriptionChange’, function (isSubscribed) {
if(isSubscribed == true){
OneSignal.sendTag(“タグ名”, “value値”);
}
console.log(“The user’s subscription state is now:”, isSubscribed);
});
});
</script>
例えば、各カテゴリやタームの情報をもとにPHPでvalue値を動的に付与すれば、
購読ボタンが置かれているページによってタグが個別に付与され、通知を送るユーザーを絞りやすくなるわけです。
実際に特定のユーザーに通知を送る処理は、送信処理サンプルコードのうちの以下になります。
‘filters’ => array(array(“field” => “tag”, “key” => “タグ名”, “relation” => “=”, “value” => “value値”)),
プラグインで簡単に実装！もよいのですが、より質の高いサービスを、と考えると、カスタマイズは必須のような気もします。
OneSignalのプラグインがもっと高機能になれば、簡単にセグメント配信できるようになるかもしれませんね。
以上、虎澤でした。
