如何为推送通知添加分析 [英] How to add analytics for Push notifications

问题描述

我正在开发渐进式网络应用，我想实现推送通知的分析.

I'm working on progressive web app, and I want to implement analytics for Push notifications.

如何为推送通知添加分析，以便我能够跟踪和记录有多少人点击了通知，以及有多少人没有点击通知就关闭了该通知.

How can I add analytics for push notifications so that I'll be able to track and record how many people clicked on notification and how many people close that notification without clicking on it.

推荐答案

我编写了一小段代码来使用 Google Analytics 进行分析，并且运行良好.

I've written a small chunk of code to use Google analytics for analytics and it works fairly well.

此处转储注释:https://gauntface.com/blog/2016/05/01/push-debugging-analytics

我这样做的方式是上面提到的帖子:

The way I've done this is the post mentioned above:

在 Service Worker 中，我导入了一个为我进行跟踪的 javascript 文件，设置分析 ID，然后在适当的事件中调用跟踪.寻找 self.analytics.trackEvent:

In the service worker I import a javascript file that does the tracking for me, set the analytics ID and then in the appropriate events call the tracking. Look for 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 测量协议进行实际跟踪调用的代码如下所示.API 非常简单，因此 payloadData 是分析期望的属性，我以 API 期望的格式生成这些参数的字符串，过滤掉空/空值:

The code to do the actual tracking calls to Google Analytics Measurements Protocol is shown below. The API is painfully simplistic, so the payloadData are the attributes analytics expects and I generate a string of these parameters in the format the API expects, filtering out empty / null values:

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-推送演示

You can find all of this on: https://github.com/gauntface/simple-push-demo

这篇关于如何为推送通知添加分析的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！