You can now deliver browser web push notifications in supported browsers (such as Chrome) using Blueshift's Cloud App capability along with a web push SDK provider such as OneSignal. Web push notifications can be orchestrated in campaign journeys and can leverage predictive content recommendations as well as other personalizations. Web push engagement data such as impressions and clicks can be captured via callback urls in Blueshift journeys.

In order to use this capability, you must sign up for browser web notifications at OneSignal.com and use the relevant credentials with your Cloud App template within Blueshift.

Set up integration

Integrating your OneSignal account with Blueshift includes the following steps:

  • Set up your OneSignal account.
  • Add the OneSignal Javascript code to your website
  • Add an adapter for the OneSignal app.
  • Add a Cloud App template.
  • Collect Engagement data back from OneSignal.
  • Connect the webhook trigger to OneSignal.
  • Verify the integration.

Set up your OneSignal account

Before you can integrate with Blueshift, you must have your OneSignal account set up. Follow the steps outlined in this OneSignal document to setup a Web Push app in OneSignal.

To integrate with Blueshift, you need the API Key and the APP ID.

  1. To find the Rest API key, sign in to your OneSignal account and click on your site or app under All Applications on the home page.

    all_application_onesignal.png

  2. After you enter your application/site's page, click on your profile picture in the upper right corner > Account & API keys

    api_keys_settings.png

  3. Copy the API key from the REST API Keys section of the Account Management page that appears.

    onesignal_rest_api_key.png

You must also specify the APP ID in the message template that you use to send the messages to OneSIgnal.

  1. To get the app ID, sign in to your OneSignal account, click on the app or site that you have added to your OneSignal account.

    all_application_onesignal.png

  2. The application/site's dashboard opens. Copy the application ID from the URL bar of the dashboard page.

    onesignal_app_id.png

Add the OneSignal Javascript code to your website

Save the user’s OneSignal user ID (also called player id) on a Blueshift user profile with an identify event.

This would fire an identify event with onesignal_webpush_id set to the OneSignal user identifier that would be needed for sending out the Web Push message via OneSignal.

<html>

<body>
<!-- Web Push notification test with Blueshift + OneSignal. This records the OneSignal user ID (or player ID) and sends it to us. -->
<script>
OneSignal.push(function() {
  OneSignal.getUserId(function(userId) {
   console.log("OneSignal User ID:", userId);
   blueshift.identify({
     email: "<<User Email>>",
     onesignal_webpush_id: userId
 });
 });
});
</script>
</body>
</html>

Add an adapter for the OneSignal app

To add a OneSignal adapter in Blueshift, complete the following steps:

  1. Sign in to the Blueshift app, and click Apps in the left navigation menu.
  2. Go to All Apps, search for, and select OneSignal.
  3. You can also go to Web Push Apps and select OneSignal.
  4. Click Configure to view all the configured adapters.
  5. Click +ADAPTER to add an adapter.

    webpush_onesignal.png

  6. Add a Name for the adapter. If you have multiple adapters, the adapter name helps you to identify the integration.
  7. Provide the API Key.
  8. Add information for any Additional Headers.
  9. Click Save to add the adapter.

    The adapter is now added and you can use it in your Cloud App template.

Create a OneSignal cloud app template

A Cloud App template is required to send a payload to OneSignal from a campaign.

To add a OneSignal Cloud App template, complete the following steps:

  1. Go to Creatives > Cloud App.
  2. Click +TEMPLATES on the Cloud App Templates page.
  3. Select the OneSignal app.

    Note: Only apps that support Cloud Apps templates and have atleast one adapter configured are displayed on the Cloud App Templates page.

  4. Configure the template including the name, tags and other relevant information. For more information, see Cloud Apps templates.

    onesignal_template.png

    Field Description
    Template Name Specify a name for the template to identify it on the index screen. 
    API Endpoint Specify the API endpoint that receives the request that we make. 
    Adapter Select the adapter to use to send the payload.
    Tags

    Specify tags to organize this template.

    Since this template is a Blueshift resource that you use in campaigns, you can use tagging to organize it under folders.

    For more information on this, see Tagging.

  5. On the Content tab, fill the form to specify the data and the format in which to send the data to OneSignal. 

    You can also switch to JSON and specify the content in JSON format. However, once you switch to JSON, you cannot use the form layout again.

     

    onesignal_template_content.png
  6. Provide the APP ID as the value of the app_id key in the source JSON.
  7. For the include_player_ids key, if you are setting the value of the user attribute as onesignal_webpush_id ({{user.extended_attributes.onesignal_webpush_id}} value in the example JSON), ensure that the custom attribute that you add to your users is also onesignal_webpush_id. If these two attributes do not match, Blueshift cannot update a user's webpush ID on the platform.

    user_oneshift_profile.png

Collect Engagement data back from OneSignal

Now that you have integrated OneSignal with Blueshift, you can send a notification from the Blueshift platform to the users of your site through OneSignal. However, one part of the integration is incomplete. And that is, how will we, Blueshift, get to know whether there was an impression or a click on a notification sent from our platform.

OneSignal can issue webhook callbacks to a server on message engagement such as impressions or clicks. You can collect these webhook callbacks and send these back to Blueshift as events for segmentation. For more information, see Web Push Webhooks on OneSignal documentation.

In order to use this, you must setup webhook callback urls to your server/app, and once your receive the callback, use the relevant URL in the "data" section to call Blueshift for the engagement tracking. If you look at the example JSON above, you can see that there are two keys in the data attribute: impression and click

To do this part, we need you to provide a webhook URL. We provide our own webhook, and you can use its URL to track a user impression or click.

Connect the webhook trigger to OneSignal

  1. Sign in to the OneSignal account and click on the app/site that you integrate with Blueshift.
  2. On the dashboard of the application, click Settings
    settings_onesignal.png
  3. Choose All Browsers (except Safari) under Web Push Platforms.
  4. Enable Webhooks in the Webhooks section under Advanced, and provide the webhook URL in the following fields:
  5. Click Save.

Verify integration

  1. Load your website that integrates with OneSignal’s SDK and requests for the notification permission. You would need to click on the notification icon and grant permissions.

  2. On the user profile in Blueshift, you should see a onesignal_webpush_id. For example:

    user_oneshift_profile.png

  3. Issue a Test Push via Cloud App


    You should see a personalized web push delivered via OneSignal such as:

 

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.