Google Firebase - Web Push

Google’s Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably send messages at no cost. Using FCM, you can send push messages to your web applications. FCM supports web push messages on Chrome, Firefox, Microsoft Edge and many other browsers. FCM does not support web push messages on the Safari browser at this time.

For this integration of Firebase with Blueshift, we will be using the Firebase Cloud Messaging (Legacy) API.

Prerequisites

You must complete the following prerequisites before you can set up integration with Blueshift and send push notifications.

• Obtain the Server Key for the Cloud Messaging API (Legacy)
• Obtain Firebase registration token for each customer

Obtain the Server key for the Cloud Messaging API (Legacy)

Complete the following steps to obtain the Server key for the Cloud Messaging API (Legacy):

1. Go to your Firebase project at https://console.firebase.google.com/
2. Go to Project Settings > Cloud Messaging tab.
3. If the Cloud Messaging API (Legacy) is not enabled, complete the following steps to enable the API:
   1. Go to https://console.cloud.google.com. 
   2. Go to APIs and Services > Library.
   3. Search for Cloud messaging API and enable the API.
   
    
4. From the Project Settings > Cloud Messaging tab, copy the Server key for the Cloud Messaging API (Legacy).
    

Obtain Firebase registration token for each customer

A Firebase registration token is required before you can send a push notification to the customer. 

Complete the following steps to obtain the Firebase registration token:

1. Add the Firebase Javascript SDK to your web app. For more information, see the documentation for adding the Firebase JavaScript SDK in your web app.
2. Obtain the Firebase registration token. For more information, see the documentation for obtaining the Firebase registration token.
   1. Get permission from customers to send push notifications.
   2. After the customer grants permission for push notifications, fetch the Firebase registration token for the customer.
   3. Send the token to Blueshift as a custom attribute (for example, last_fcm_webpush_token).
      You can use the identify event to add the attribute or update the customer using any of the import methods.

Set up integration

To set up web push using FCM, complete the following steps:

1. Complete the prerequisites.
2. In the App Hub in Blueshift, add a custom app for FCM.
3. Add an adapter for the custom app.
4. Set up a cloud app template that will send the message data via the custom app to FCM.
5. Add a trigger in the campaign journey for the custom app and select the cloud app template.

Add a custom app in Blueshift

To add a custom app for FCM, complete the following steps.

1. Go to App Hub > My Apps and click +ADD CUSTOM APP.
2. Provide a Name for the app and add a Description. In this example, we have used the name Firebase cloud messaging.
3. Specify the Type of Authentication as None.
4. Upload a logo for the app.
5. Click Save.
   The custom app is created.

For more information, see Custom apps.

Add an adapter for the custom app

To set up the adapter, you need the Authorization key.

1. Open the custom app and click +ADAPTER.
2. Add a name for the adapter. In this example, we have used the name Browser Push using FCM.
3. In the Additional Headers section, add the Header name as Authorization and add the token for the Cloud Messaging API (Legacy) as the value.
    

   

4. Click Save. The adapter setup is complete.

Create a cloud app template

To send a push message from within a campaign, you must create a cloud app messaging template for the custom app that you created for FCM. 

To create a cloud app template, complete the following steps:

1. Open the custom app and click +CREATE A TEMPLATE.
   OR
   Go to Templates > Cloud App and click +TEMPLATE. Select the FCM custom app that you added previously.
2. Add a name for the cloud app template.
3. Go to the Properties tab > Settings section.
4. Select the Adapter that you want to use to send the message.
   In this example, we are using the Browser Push using FCM adapter that we added previously.
5. Add the API endpoint as https://fcm.googleapis.com/fcm/send
6. Go to the Advanced Settings section.
7. Select the HTTP Method as POST.
8. Select the Send payload as a URL encoded form option.
    

   

9. Go to the Content tab > Schema section.
10. Add the schema for sending a push notification. Include the following fields with the specified data type:
    • data (object)
      • notification (object)
        • title (string) - The title for the push notification.
        • body (string) - The contents/message that you are sending in the push notification.
    • to (string) - The Firebase registration token for the customer.

    

11. Go to the Content Form section and add the values for the fields. You can use Liquid for personalization.
    • For the “to” field, include the value of the Firebase registration token that you have saved in a custom attribute using personalization. For example, {{user.extended_attributes.last_fcm_webpush_token}}

    

12. Save the template.
    You can now use this template in a campaign journey to send a web push notification to customers.