Как добавить аналитику для Push-уведомлений

Я написал небольшой фрагмент кода для использования аналитики Google для аналитики, и он работает довольно хорошо.

Сброшенные заметки здесь: https://gauntface.com/blog/2016/05/01/push-debugging-analytics

То, как я это сделал, - это сообщение, упомянутое выше:

В сервис-воркере я импортирую файл javascript, который выполняет отслеживание за меня, устанавливаю идентификатор аналитики, а затем в соответствующих событиях вызываю отслеживание. Ищите 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, отфильтровывая пустые / нулевые значения:

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

Вариант, который я использую в моем плагине веб-push WordPress, заключается в добавлении аргумент запроса для URL-адресов, открытых с помощью уведомлений (см. этот код). Таким образом, вы можете узнать, сколько раз люди нажимают на уведомления.

О количестве людей, закрывающих уведомления, узнать, к сожалению, невозможно. Есть notificationclose событие, но оно запускается только для постоянных уведомлений.

На Pushpad URL-адрес уведомления представляет собой страницу перенаправления, которая отслеживает открытие, а затем перенаправляет на целевой URL-адрес. .

Например, если целевой URL-адрес http://example.com/target, ваш URL-адрес уведомления, который открывается при нажатии, должен быть http://example.com/redirect?url=/target.

На данный момент нет возможности отследить, когда уведомление закрыто.

Обновление (июнь 2016 г.): другие отмечали, что в спецификациях есть _ 3_ событие. Однако я не тестировал поддержку браузера (например, в настоящее время этого события нет в списке MDN). Кроме того, я опасаюсь, что это событие также может быть вызвано, когда пользователь щелкает уведомление (поскольку уведомление закрывается) - в спецификации об этом не говорится.