Add analytics to web push notifications

How can you collect analytics for web push notifications (e.g. clicks)?

If you have a website that sends web push notifications you probably want to collect some stats, including the number of notifications delivered and the number of people that open the notifications.

Analytics about the delivery to the push service

When you send a push message from your application server, using an HTTP POST request or a web push library, you should collect the status code returned by the browser push service.

In particular you should collect stats about the HTTP status returned:

• if the status is successful (2xx), then the push subscription is still valid and the push message was successfully delivered to the browser push service, which will then attempt to deliver the message to the browser
• if the status is not successful (web push errors like 4xx or 5xx), then the subscription is probably invalid or expired and the notification cannot be delivered (e.g. you should collect stats about the number of expired or revoked subscriptions)

Note that if you use Pushpad for sending the notifications from your website, these stats are already collected automatically by Pushpad for each notifications and also in aggregated form. You can see the analytics from the Pushpad dashboard (or get them using the API).

Analytics in the service worker

Ideally you can collect analytics about the delivery of a notification to the end user (and not only to the browser push service, as described in the previous section).

You can use a code like this:

self.addEventListener('push', function(event) {
  event.waitUntil(
    Promise.all([
      fetch('https://example.com/analytics', { method: 'POST', body: 'notification-delivered' }),
      self.registration.showNotification('Hello, world!')
    ])
  );
});

You can also track the click in a similar way:

self.addEventListener('notificationclick', function(event) {
  event.waitUntil(
    Promise.all([
      fetch('https://example.com/analytics', { method: 'POST', body: 'notification-click' }),
      clients.openWindow('https:/example.com/')
    ])
  );
});

Note however that this approach is not recommended and is unreliable. Although some online discussions suggest this approach, it doesn't work well in practice, because notifications can be delivered even with unreliable network conditions. This means the the push event is triggered, but the only reliable thing to do is to read the payload included in the notification... trying to use an internet connection with fetch is going to fail in some cases (see also this discussion).

Pushpad does not currently implement this strategy because it's not always reliable (however it collects analytics about deliveries and clicks using the other strategies described in this page).

Analytics about clicks using a redirect

A simple and reliable way to collect analytics about the number of notifications opened (i.e. the number of clicks), is to use a redirect page that collects the analytics.

This strategy is widely used by email providers and URL shorteners for example.

Here's how it works:

• The user clicks a notification
• The notificationclick event opens a redirect page (e.g. https://example.com/notification/12345/redirect) that collects the analytics
• The user is redirected to the actual URL of the notification.

If you implement this strategy pay attention to the implementation and avoid open redirects, otherwise you can cause security issues!

Pushpad collects the analytics about clicks on the notifications using this strategy: if you use Pushpad for sending the notifications, you don't need to do anything and all the analytics are collected automatically for you. You can see them in the dashboard (or using the API).

Analytics with UTM parameters

Another strategy for collecting analytics about web push notifications is to use the UTM parameters.

UTM parameters can be used to monitor the marketing campaigns through a variety of sources (including ads, social, email, push). UTM parameters are supported by Google Analytics and by most services used for analytics.

When you send a web push notification you can include some UTM parameters, that are then read by Google Analytics and other services.

For example, instead of sending a notification with this URL:

https://example.com/page

Send the notification with this URL (note that we have added some params at the end):

https://example.com/page?utm_source=pushpad&utm_medium=push&utm_campaign=summer-sale

In particular:

• the source is "pushpad" (if you use Pushpad for the notifications) or simply "website" or "notifications"
• the medium is "push" (or "web-push", "web-notifications" or similar)
• the campaign is the name of your project or the name of the specific marketing campaign (e.g. "summer-sale").

You can create the URLs with UTM params manually or you can generate the URLs using this tool. Then when you send a notification (e.g. from the Pushpad dashboard) you can use that URL as the destination URL of the notification. In this way you can collect advanced analytics, including the actions performed by the user after the click on the notification, number of conversions, etc.

Analytics using Pushpad

Pushpad supports most of the methods described above.

All the analytics are collected automatically and displayed in the dashboard - you don't need to implement anything. You can see the number of notifications successfully delivered, the number of clicks and much more.

We collect analytics about each notification and about the entire project. You can also collect aggregated stats (custom metrics) for groups of related notifications and see how the different groups of notifications are performing.

If you want more information see the documentation.