Loading...
Area: Episerver Campaign
Applies to versions: Not applicable

Web Push

Recommendations [hide]

This topic describes how to set up Web Push for Episerver Campaign. A Web Push message appears in the recipient's web browser without a specific request.

For example, use Web Push together with Triggered Messages to send your online shop customers a reminder when items are in the shopping cart but the order has not been completed. Or send personalized product recommendations created with Email Product Recommendations.

Episerver Campaign uses Firebase Cloud Messaging (FCM), a free cross-platform solution for sending push messages. For information on the supported web browsers, see Supported environments for the Firebase JavaScript SDK in the Firebase documentation.

In this topic

Prerequisites

  • Website (web app) to implement push notifications.
  • User account for Firebase Cloud Messaging.
  • Episerver Campaign recipient list of type "Push" that customer support sets up for you. The push recipient list stores the user registration token generated during the opt-in process.

Creating a Firebase web app project

To set up Web Push in your client, you first have to create a Firebase web app project and register your web app with FCM. Do the following:

  1. Open the Firebase Console and log in using your Google account.
  2. Click Add project and create a new project for your web app. See Create a Firebase project in the Firebase documentation.
  3. Register your web app with FCM. See Register your app with Firebase in the Firebase documentation.
  4. Open your project and go to Project settings > Cloud Messaging.
    Tip: Note the server key and sender ID for passing to Episerver.

Push assignment

Provide Episerver customer support with the following information that is required for the client setup and push assignment in Episerver Campaign:

  • Episerver Campaign client. Name or ID of your Episerver Campaign client.
  • Recipient list ID. The ID of the push recipient list that you use to store the user registration tokens. To see the recipient list ID, open the Episerver Campaign start menu and select Administration > API overview > Recipient lists.
  • Server key. Your FCM account's API key. To see the server key,  open the Firebase Console and select Project settings > Cloud Messaging.
  • Sender ID. The ID with which the web app registers at FCM. To see the sender ID, open the Firebase Console and select Project settings > Cloud Messaging.
  • Optional: App nickname. The name of your web app that is used for FCM. To see the app nickname, open the Firebase Console and select Project settings > General.

    Note: If you change the app nickname in Firebase, contact customer support and provide the new name.

  • Optional: Push app package name.
    Tip: Use your website/domain name, such as com.example or example.com.

Integrating the Firebase SDK

To integrate your web app with Firebase, see Set up a JavaScript Firebase Cloud Messaging client app in the Firebase documentation.

Enabling tracking

To track opens, do the following:

  1. Open your website project.
  2. Open the service worker (firebase-messaging-sw.js) and add the following code snippet:
    self.addEventListener('push', function(event) {
         console.log("Event Push  : ${event.data}");
         var notification = {};
         if (event.data) {
             notification = event.data.json();
             fetch(notification.data.bm_tracking_url, {mode: 'no-cors'});
         }
         console.log('Event Push: ' + notification.data.bm_tracking_url);
      });
  3. Save the service worker file.

Opt-in

When a user opens your website, a dialog box appears and asks for permission to send push messages. By accepting, the user registration token is generated. Save the generated token, for example in a CSV file.

To send push messages to the registered user, add a new recipient with the corresponding token to the push recipient list. You can create new recipients manually and enter the token into the list, or import a CSV file. You can also use the Episerver REST API to add new recipients to a recipient list. See the Swagger REST API documentation.

Opt-out

If mailing recipients disable push notifications in their web browser, they will no longer receive Web Push messages. After the opt-out, the recipient and corresponding token are deleted from the recipient list.

Related topics

Do you find this information helpful? Please log in to provide feedback.

Last updated: Oct 13, 2020

Recommendations [hide]