我正在开发渐进式网络应用程序,我想为推送通知实施分析。
如何为推送通知添加分析,以便我能够跟踪和记录有多少人点击了通知,以及有多少人在没有点击的情况下关闭了该通知。
我正在开发渐进式网络应用程序,我想为推送通知实施分析。
如何为推送通知添加分析,以便我能够跟踪和记录有多少人点击了通知,以及有多少人在没有点击的情况下关闭了该通知。
我编写了一小段代码来使用谷歌分析进行分析,它运行得相当好。
在这里转储笔记:https ://gauntface.com/blog/2016/05/01/push-debugging-analytics
我这样做的方式是上面提到的帖子:
在服务人员中,我导入了一个为我进行跟踪的 javascript 文件,设置分析 ID,然后在适当的事件中调用跟踪。寻找self.analytics.trackEvent
:
importScripts('./scripts/analytics.js');
self.analytics.trackingId = 'UA-77119321-2';
self.addEventListener('push', function(event) {
let notificationTitle = 'Hello';
const notificationOptions = {
body: 'Thanks for sending this push msg.',
icon: './images/icon-192x192.png',
tag: 'simple-push-demo-notification'
};
// Important to trigger analytics asynchronously with logic
// to show notification
event.waitUntil(
Promise.all([
self.analytics.trackEvent('push-received'),
self.registration.showNotification('Hello', notificationOptions)
])
);
});
self.addEventListener('notificationclick', function(event) {
event.notification.close();
// Important to trigger analytics asynchronously with logic
// to do other work (i.e. open window)
event.waitUntil(
Promise.all([
self.analytics.trackEvent('notification-click'),
clients.openWindow('https://gauntface.github.io/simple-push-demo/')
])
);
});
对 Google Analytics Measurements Protocol 进行实际跟踪调用的代码如下所示。API 非常简单,因此 payloadData 是分析所期望的属性,我以 API 期望的格式生成这些参数的字符串,过滤掉空/空值:
class Analytics {
trackEvent(eventAction, eventValue) {
if (!this.trackingId) {
console.error('You need to set a trackingId, for example:');
console.error('self.analytics.trackingId = \'UA-XXXXXXXX-X\';');
// We want this to be a safe method, so avoid throwing Unless
// It's absolutely necessary.
return Promise.resolve();
}
if (!eventAction && !eventValue) {
console.warn('sendAnalyticsEvent() called with no eventAction or ' +
'eventValue.');
return Promise.resolve();
}
return self.registration.pushManager.getSubscription()
.then(subscription => {
if (subscription === null) {
// The user has not subscribed yet.
throw new Error('No subscription currently available.');
}
const payloadData = {
// GA Version Number
v: 1,
// Client ID
cid: subscription.endpoint,
// Tracking ID
tid: this.trackingId,
// Hit Type
t: 'event',
// Data Source
ds: 'serviceworker',
// Event Category
ec: 'serviceworker',
// Event Action
ea: eventAction,
// Event Value
ev: eventValue
};
const payloadString = Object.keys(payloadData)
.filter(analyticsKey => {
return payloadData[analyticsKey];
})
.map(analyticsKey => {
return `${analyticsKey}=` +
encodeURIComponent(payloadData[analyticsKey]);
})
.join('&');
return fetch('https://www.google-analytics.com/collect', {
method: 'post',
body: payloadString
});
})
.then(response => {
if (!response.ok) {
return response.text()
.then(responseText => {
throw new Error(
`Bad response from Google Analytics ` +
`[${response.status}] ${responseText}`);
});
}
})
.catch(err => {
console.warn('Unable to send the analytics event', err);
});
}
}
if (typeof self !== 'undefined') {
self.analytics = new Analytics();
}
您可以在以下位置找到所有这些:https ://github.com/gauntface/simple-push-demo
我在WordPress web-push 插件中使用的一个选项是向通过通知打开的 URL 添加查询参数(请参阅此代码)。这样,您就可以知道人们点击通知的次数。
关于关闭通知的人数,遗憾的是无法知道。有一个notificationclose
事件,但它只为持久通知触发。
在Pushpad中,通知 url 是一个重定向页面,它跟踪打开然后重定向到目标 url。
例如,如果目标 url 是http://example.com/target
您在点击时打开的通知 url 应该是http://example.com/redirect?url=/target
.
目前无法跟踪通知何时被解除。
更新(2016 年 6 月):其他人指出,在规范中有一个notificationclose
事件。但是我还没有测试浏览器支持(例如,目前这个事件没有在 MDN 上列出)。除此之外,我担心当用户单击通知时也会触发此事件(因为通知已关闭)-规范对此尚不清楚。