OneSignal の
この
[TOC]
参考 OneSingal の ドキュメント
システム連携パートの、
* Google Analytics
* Mixpanel
前提
バックエンド、
バックエンド
Django 、
- Django (1.11.11)
- wagtail (1.13.1)
- puput (0.9.2.1)
フロントエンド
react と、
- react@16.2.0
- rmwc@1.1.2
- react-helmet@5.2.0
実装に あたり 意識する こと
GTM から
- Google Tag Manger から
Google Analytics に カスタムイベントを 送る 方法 - Qiita - GA/GTMを
使った 際に 見えなくなる トラッカーを 呼び出して 処理を 実行する – marketechlabo
実装
Google Analytics を
UTM パラメータで、 通知の クリックを 取得する
UTM パラメータを
指定する
UTM パラメータ
utm_source
Notificationutm_medium
WebPushutm_campaign
EntryUpdate-yyyyMMddHHmmss
記事の"url"
で
- send_notifications.py
# -*- coding: utf-8 -*- from __future__ import print_function from django.core.management.base import BaseCommand from requests.exceptions import HTTPError from puput.models import EntryPage from django.conf import settings import datetime import requests import json import urllib.parse class Command(BaseCommand): def handle(self, **options): now = datetime.datetime.now() entries = EntryPage.objects.filter(date__gte=now - datetime.timedelta(hours=1000)) if entries: entry = entries.first() content = entry.title header = {"Content-Type": "application/json; charset=utf-8", "Authorization": "Basic " + settings.ONESIGNAL_REST_API_KEY} # 記事URLを生成 date_YYYYmmddHHMMSS = now.strftime("%Y%m%d%H%M%S") url_params = {"utm_source": "Notification", "utm_medium": "WebPush", "utm_campaign": "EntryUpdate-" + date_YYYYmmddHHMMSS } url = entry.full_url + "?" + urllib.parse.urlencode(url_params) payload = {"app_id": settings.ONESIGNAL_APP_ID, "included_segments": ["All"], "contents": {"en": content}, "headings": {"en": "New article"}, "url" : url } req = requests.post("https://onesignal.com/api/v1/notifications", headers=header, data=json.dumps(payload))
addListenerForNotificationOpened で、 通知IDと OneSignal プレーヤー ID を 記録する
addListenerForNotificationOpened
を
サンプルコードは、
React コンポーネントの
componentDidMount function
addListenerForNotificationOpened
を追加します。 OneSignal.on("addListenerForNotificationOpened", function(data) { OneSignal.getUserId(function(userId) { window.dataLayer = window.dataLayer || []; window.dataLayer.push({ event: "sendEvent", eventName: "NotificationOpened", eventData:{ category : "Notification", action : "Opened", label : userId, value : data.id, nonInteraction : true }, eventCustomData : { userId: userId, notificationId: data.id } }); }); });
GTMの
設定
トリガー、カスタムHTMLタグ、 JavaScript変数を 作成しました。 以下説明します。 トリガー
イベント名は、JavaScript から 送付している event 属性の 値 sendEvent
を設定しています。 - 名称
event.sendEvent - トリガーの
種類
カスタムイベント - イベント名
sendEvent - このトリガーの
発生場所
すべてのカスタムイベント
- 名称
ユーザー定義変数1
ユーザー定義変数は、dataLayter 変数に 設定している、 カスタム属性の 受け皿に なります。 - 名前
eventData.action - 変数の
種類
データレイヤーの変数 - 変数名
eventData.action
- 名前
ユーザー定義変数2
- 名前
eventData.category - 変数の
種類
データレイヤーの変数 - 変数名
eventData.category
- 名前
ユーザー定義変数3
- 名前
eventData.label - 変数の
種類
データレイヤーの変数 - 変数名
eventData.label
- 名前
ユーザー定義変数4
- 名前
eventData.nonInteraction - 変数の
種類
データレイヤーの変数 - 変数名
eventData.nonInteraction
- 名前
ユーザー定義変数5
- 名前
eventData.value - 変数の
種類
データレイヤーの変数 - 変数名
eventData.value
- 名前
ユーザー定義変数6
以下は、Mixpanel に 連携する データレイヤー変数に なります。
Mixpanel に送信する データの event 名 と して 使用します。 - 名前
eventName - 変数の
種類
データレイヤーの変数 - 変数名
eventName
- 名前
ユーザー定義変数7
以下は、Mixpanel に 連携する データレイヤー変数に なります。
Mixpanel に送信する データの カスタム属性と して 設定します。 - 名前
eventCustomData - 変数の
種類 データレイヤーの 変数 - 変数名 eventCustomData
- 名前
ユニバーサルアナリティクスタグ
Google Analytics へのイベント送付用に しようする タグです。 - タグタイプ
ユニバーサル アナリティクス - トラッキング タイプ
イベント - カテゴリ
{{eventData.category}} - アクション
{{eventData.action}} - ラベル
{{eventData.label}} - 値
{{eventData.value}} - 非インタラクション ヒット
{{eventData.noInteraction}} - Google アナリティクス設定
別途定義している、アナリティクス設定変数に なります。
{{GAID}} - 詳細設定-タグ呼び
出しオプション
1回のイベントに つき1度 - 配信トリガー
event.sendEvent
- タグタイプ
Mixpanel の
イベント送付 カスタムHTMLタグ
Mixpanel のイベント送付用の カスタムHTMLタグです。 - タグタイプ カスタムHTMLタグ
- HTML
<script> var customData = {{eventCustomData}}; var eventName = {{eventName}}; if (typeof customData === "undefined" || typeof eventName === "undefined") { // mixpanelは定義されている前提で処理する。 mixpanel.track(eventName, customData); } </script>
- 詳細設定-タグ呼び
出しオプション
1回のイベントに つき1度 - 詳細設定-タグの
順序付け
タグが発効する 前に タグを 配信 - 設定タグ
ここにはMixpanel の 初期化カスタムHTMLタグを 設定します。
GTM を使って、 Mixpanel の タグを 設定する | Monotalk に、 初期化タグの 設定方法は 記載しましたので、 そちらを ご確認ください。 - 配信トリガー
event.sendEvent
イベント送信タグの
使いまわし
GTM で設定した、 イベント送信用の タグは、 その 他の イベント送信時にも 使いまわします。
カスタムイベント、sendEvent を 設定した 際は、 Google Analytics 、 Mixpanel に イベントが 送信されます。
購読の トラッキング
notificationPermissionChange
notificationPermissionChange
でGTMに カスタムイベントを 送付する スクリプト notificationPermissionChange
は、event 記録用の 関数と、 状態変更用の 関数を 作成しています。
2つ登録しても 上書きされる ことなく、 eventの タイミングで、
OneSignal.on("notificationPermissionChange", function(permissionChange) { var currentPermission = permissionChange.to; window.dataLayer = window.dataLayer || []; window.dataLayer.push({ event: "sendEvent", eventName: "NotificationOpened", eventData:{ category : "Notification", action : "PermissionChange", label : currentPermission, value : 0, nonInteraction : true }, eventCustomData : { currentPermission : currentPermission } }); });
通知パーミション表示を トリガーに event を 送信する
permissionPromptDisplay
を
正直、
permissionPromptDisplay
でGTMに カスタムイベントを 送付する スクリプト OneSignal.on("permissionPromptDisplay", function(permissionChange) { window.dataLayer = window.dataLayer || []; window.dataLayer.push({ event: "sendEvent", eventName: "NotificationDisplayed", eventData:{ category : "Notification", action : "Displayed", label : "", value : "", nonInteraction : true }, eventCustomData : { permissionChange : permissionChange } }); });
設定後の 感想
以下、
ドキュメントに
記載されている イベントリスナー で イベント送信を 実行するようにしたが、 正直全部に 設定する 必要は ない。
Webhooks の送信タイミングと、 addListenerForNotificationOpened
は重複していそうです。
個人的には、Measurement Protocol だと、 ブラウザを 開いていない 状態でも 送信が できる ため、 この タイミングでのみ 送付すればよいかと 思います。 permissionPromptDisplay で
送信する 意義
通知パーミッションイベントダイアログが開かれた タイミングで、 イベント送付するのは、 ユーザ自身に 選択させない ケースで、 有用に 思います。
ダイアログ開いたが、 許可する 割合が 少ない 等の 場合は、 表示タイミングの チューニングの 余地が あるかどうかが わかると 思われます。 できる
ことなら、 GTM経由で eventは 記録したい
event 送付のための スクリプトで、 それなりの 実装量に なりました。 クリックイベント等は、 GTMからの event 送付 で 記録して、 userId を 記録する 等、 OneSignal の リスナーを 使わないと、 取得しにくい 情報に 絞って event送付するのかよいかと 思います。
OneSignal には、
後日この
以上です。
コメント