Articles in this section

Web Push Overview

Web push is a channel you can use to send messages to users who have opted in to receive notifications from your website. These messages appear as notifications on the user's desktop or mobile device, even when the user isn't actively using your website.

# In this article

# Overview

With Iterable, you can send web push campaigns to users on Chrome, Firefox, Opera, and Safari web browsers. Google's Firebase Cloud Messaging (FCM) delivers these messages.

Iterable supports one web push integration per project.

# How it works

To send web push notifications to a user, you need to first get their permission. When the user visits your website or clicks a button, you can use JavaScript to prompt them to allow notifications. If they agree, you'll retrieve the user's browser token and save it on their Iterable user profile, so Iterable can use it for future sends.

Next, when you send a web push campaign from Iterable, the campaign is sent to Firebase Cloud Messaging, which then sends the notification to the user's browser. If the user has multiple browser tokens registered, the notification sends to all of them. When this happens, Iterable tracks a separate web push send event for each token.

A web push notification is delivered to the user's device as long as the user has an active internet connection and their browser application is running, even if they aren't currently browsing your website.

  • If they close the browser window, the notification will still be delivered.
  • If they close the browser completely and the browser isn't running as a process, the notification is queued until the next time the browser is opened. It stays in the queue for a limited time (4 weeks).

After the user receives the notification, they can click on it to open your website or perform another action. Iterable can track these clicks and save them to the user's event history.

# Web push system events

For web push campaigns, Iterable tracks the following system events:

  • Web Push Send (webPushSend) - Iterable sends the web push notification to Firebase Cloud Messaging. Firebase Cloud Messaging then sends the notification to the user's browser.

  • Web Push Click (webPushClick) - If you set up your website to capture web push click events, Iterable can track a click and add it to the user's profile history. To capture this event type, add an event listener and send the event to Iterable via API. (Note that click tracking is optional, and is not supported for iOS Safari - to learn why, read Supporting Web Push on Safari Browsers).

  • Web Push Send Skip (webPushSendSkip)- Iterable tracks when a web push notification is not sent because a web push integration is not configured or is misconfigured in Iterable, among other reasons. To learn more about send skips, read Reasons for Send Skip Events.

It's worth noting that Iterable does not track a bounce event for web push notifications. Web push notifications aren't sent directly to the user's device, but rather to the browser, which then delivers the notification to the user. Web push notifications do not have a feedback loop like email or SMS, so Iterable cannot track bounces for web push campaigns.

To see example web push event payloads for system webhooks, read System Webhooks.

# Web push setup

To get started sending web push notifications from Iterable, your web developer needs to make the following changes to your website or web app:

  • Create a Firebase account and project.
  • Configure Firebase in your website or web app.
  • Create a prompt for users to opt in to web push notifications.
  • Add an event listener for web push clicks that tracks them in Iterable.

For detailed instructions on setting up web push notifications, see Setting up Web Push Notifications.

# Frequently asked questions

# How do I create web push templates and campaigns?

# Where can I find more information on Firebase?

Check out https://firebase.google.com/.

# Which browsers does web push work on?

Chrome, Firefox, Opera, and Safari.

To learn more about supporting web push on Safari browsers, read Supporting Web Push on Safari Browsers.

# Does a user's browser token change from session to session?

A Firebase algorithm decides when to invalidate a token, in which case the client side JavaScript needs to register the new token for the user in Iterable. Generally this is about once per month.

# If a user's browser window is closed, will they still receive the notification?

Yes. Even if the user closes the browser window, the service worker running in the background will display the notification. However, if the user quits out of the browser completely (not just the window or tab), then the notification is queued until the next time the browser is opened. It stays in the queue for a limited time (4 weeks).

# Will messages be queued if they are unable to display initially?

Yes. If the user's browser is offline or the browser is closed, the message is queued until the browser is opened and the user is online. The message stays in the queue for a limited time (4 weeks).

# What metrics can I track with web push?

Iterable supports web push send and click events. In order to track web push click events, you must configure your website to capture click metrics. Please see above for more information on how to track web push click events.

# Want to learn more?

For more information about some of the topics in this article, check out this Iterable Academy course. Iterable Academy is open to everyone — you don't need to be an Iterable customer!

Related articles