Français Italiano Português do Brasil

Reconnect Web Push Integration

Follow

Reconnect Web Push works with Firebase Cloud Messaging to deliver push notifications to the user's browser. This article provides general instructions on how to work with Firebase on your website and enable Reconnect to reach out to your users’ browsers with personalized notifications. 

Step 1: Set up your Firebase account

To use the Reconnect Web Push channel, you must have a Firebase account, do the following:

  1. In the Firebase Console, create a project.
  2. Go to Project Overview › Project Settings.
  3. In either the Cloud Messaging or Service accounts tab, select Manage Service Accounts. This takes you to the Google Cloud console (console.cloud.google.com).
  4. Click + Create Service Account.
  5. Fill in the required details, and then click Create and Continue.
  6. In the actions menu (3 vertical dots next to the service account), select Manage keys.
  7. Click + ADD KEY and then select JSON.
  8. A JSON key is generated and downloaded. Provide this key to Dynamic Yield in the integration as described in Step 6: Integrate your Firebase project with Reconnect section.

Step 2: Implement a service worker on your site

A service worker is JavaScript code that you must implement on your site to enable sending notifications to the user’s browser. It can execute in the background even if the user’s browser is closed. Service workers are supported on all leading browsers.

Example:

Image

Service worker FAQ

What should I name the service worker file?

The firebase-messaging-sw.js is a commonly used default name for the service worker file that handles Firebase push notifications. The getToken() method from Firebase’s SDK looks for this name unless another name is explicitly provided.

While this is a convention, there is no problem choosing a different name for the service worker file.

However, avoid changing the name of the service worker script after it’s already running. Instead, update the script with its current name.

Can I run multiple service workers (for the same scope)?

No. Although a website can register multiple service workers, only one can be active for a defined scope at any given time. 

The most recently installed service worker becomes active and takes control of the specified scope, replacing any previously active service worker.

When is a service worker script updated?

By default, modern browsers automatically check for updates to a service worker script on every in-scope page load. Additionally, a functional event, such as push, can trigger an update check (limited to once every 24 hours).

Step 3: Get user permission to send push notifications

You must get the user's permission to send them push notifications. Otherwise, Reconnect can't subscribe the user as eligible for Web Push messages.

Trigger an opt-in event

An opt-in event is triggered by the requestPermission JavaScript method of the browser’s Notifications API, initiated when a user interacts with the site (clicks a button or loads a page).

The user must explicitly grant permission for the site to send notifications.

You should verify that the browser is compatible with the Notifications API. Verifying support for the Notifications API is straightforward:

if ('Notification' in window) {
const permission = await Notification.requestPermission();
if (permission
}
'denied') {
console.error('The user explicitly denied the permission request.');
return;
if (permission
}
'granted') {
console.info('The user accepted the permission request.');
}

After you confirm that the browser supports the Notifications API, you can use Notification.requestPermission to request user permission. Upon execution of the code, a prompt appears in the browser, resembling the following image. The appearance can differ depending on the operating system or browser being used:

Notification.requestPermission returns a promise object. If the promise is rejected, it indicates that the user has denied the permission request. Conversely, if the promise is resolved, it signifies that the user has accepted the permission request.

Step 4: Get a user token from Firebase

After the user grants permission to send them notifications on your site, you must fetch the Firebase registration token to be able to send push messages to this user.

To do this, using the Firebase SDK, employ the getToken method to get the registration token from Firebase.

Example:

import {getMessaging, getToken} from
 "https://www.gstatic.com/firebasejs/PUT_LATEST_VERSION/firebase-messaging.js";


getToken(getMessaging(), {vapidKey: firebaseConfig.vapidKey}).then((token) = {
    if (currentToken) {
      // Send token to DY servers
      sendTokenToDY(currentToken);
    } else {
      // No registration token available. Request permission to generate one.
      // logic to ask for permission to show notifications
    }
  }).catch((err) = {
    console.log('An error occurred while retrieving token. ', err);
  });

Step 5: Send an opt-in event to Dynamic Yield

Now that you have the user’s consent and a user token, share the token with Dynamic Yield using the message opt-in event, so we can subscribe the user as eligible to receive push notifications from Reconnect. 

{
"user": {
"dyid": "-4350463893986789401",
"dyid_server": "-4350463893986789401"
},
"session": {
  "dy": "ohyr6v42l9zd4bpinnvp7urjjx9lrssw"
},
  "events": [
    {
      "name": "Push Opt-In",
      "properties": {
        "dyType": "message-optin-v1",
        "pushID": "User's Token goes here"
      }
    }
  ]
}

Note that Firebase manages browser tokens and occasionally disables them using its proprietary algorithm. If Firebase identifies a token as outdated, you might need to prompt users again for web push permission. Users who haven't enabled browser tokens in their profiles will be excluded from web push send attempts.

Step 6: Integrate your Firebase project with Reconnect

To create a Firebase Web Push integration in Reconnect:

  1. In the Integrations tab, click Create Channel Integration, and then select Web Push.
  2. In the popup, click Upload to upload the service account key file you imported in Step 1: Set up your Firebase account.

    Note the following:
    • The file is available to download in your project in Firebase.
    • The file must be a JSON file.
  3. Click Verify and Save. The file contents are validated against Firebase services. If the validation fails, an error is displayed, and the file is removed. If the validation is successful, the integration is saved and is ready to use.

Step 7: Report back to Dynamic Yield when a user clicks a notification

When you create a web push notification JSON body in Reconnect campaigns, it must contain the ${Push tracking} Dynamic Yield variable under the data{} object.

When Reconnect triggers Firebase with the message payload, the ${Push tracking} variable is converted into an object that is unique per message.

FAQ

Can users receive notifications when their browser is closed? 

Certainly. 

If the user closes the browser window, the notification will still be displayed by the service worker running in the background. However, if the user completely quits the browser (not just closes the window or tab), all service workers are terminated, and the user won't receive any notifications.

Do all browsers support sending web push notifications?

Not all browsers support web push notifications, but the leading browsers do. You can find them here.

Can I get more information on how to use Firebase?

Here it is:  https://firebase.google.com/support/.

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

No, the Firebase-generated token is cross-session. 

If messages can't be displayed initially, are they queued?

No, if the browser processes are not running at the time of sending, messages are not delivered.