OneSignal - Web Push

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 would need to sign up for browser web notifications at OneSignal.com and use the relevant credentials with your Cloud App template within Blueshift. Follow the steps here to setup your OneSignal web push template with Cloud App.

Setup OneSignal

Follow the steps outlined in this OneSignal document to setup a Web Push app in OneSignal.

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. 

<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>

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.

Create the CloudApp template

  1. On the left navigation panel of the Blueshift app, click Creatives > Cloud App.
  2. Click + TEMPLATES on the Cloud App Templates page.
  3. Select OneSignal on the Select A Cloud App page that appears.
    cloud_apps.png
  4. Configure the template including the name, tags and other relevant information:
    onesignal.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. In this case, we automatically fill it. So verify if the endpoint that is entered is correct with the endpoint that they have mentioned in this document. If it does, leave it as is. 
    Auth Header Key Specify the word: Authorization.
    Auth Header Value

    Specify: Basic RestAPIKeyOfYourSiteOrApp. You can find the rest API key your site or app in your OneSignal account. For example, sign in to your OneSignal account and click on your site or app under All Applications on the home page.

    all_application_onesignal.png

    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

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

    onesignal_rest_api_key.png

    Specify this value along with the word Basic added before it in the Auth Header Value field. For example, see: 

    onesignal_key.png

    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. Edit the template JSON body to customize the urls, personalizations, and rendering.
    content.png

    Here is sample JSON template you may use with OneSignal. This templates includes a push notification text, two callout buttons and tracking callback urls that you can use to save engagement data back to Blueshift.

    {
     "app_id": "<< YOUR ONE SIGNAL APP ID >>",
     "contents": {
       "en": "Here are your recommendations: {{products[0].title}}"
     },
     "chrome_web_image": "{{products[0].image}}",
     "include_player_ids": ["{{user.extended_attributes.onesignal_webpush_id}}"],
     "web_buttons": [
       {"id": "buy-button", "text": "Explore", "icon": "https://i.imgur.com/N8SN8ZS.png", "url": "{{products[0].web_link}}"},
       {"id": "read-more-button", "text": "Checkout", "icon": "http://i.imgur.com/MIxJp1L.png", "url": "{{products[0].web_link}}"}
     ],
     "data": {
       "impression": "{{tracking.impression_url}}",
       "click": "{{tracking.click_url}}"
     }
    }



    You can get the app ID from your OneSignal account. After you sign in to your OneSignal account, click on the app or site that you have added to your OneSignal account. 


    all_application_onesignal.png

    The application/site's dashboard appears. You can copy the application ID from the URL bar of the dashboard page. 


    onesignal_app_id.png


    Paste this app ID as the value of the app_id key in the source JSON.

    In 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. 

    user_oneshift_profile.png

    If these two attributes do not match, we cannot update a user's webpush ID on our platform. 

Collect Engagement data back from OneSignal

Now that you have integrated OneSignal with Blueshift, you can send a notification from our 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 would 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.

 

-----------

Set up a custom webhook trigger (outdated -- to be deprecated)

Note: This part was created before we had our own webhook trigger and we will soon stop supporting this. This section will be deprecated and removed as soon as we move all the customers using this to our own webhook. If you want to complete OneSignal integration with Blueshift, follow the steps of the procedure above. 

You can set up a custom webhook trigger that takes an incoming request, and performs an action that you specify. For example, if you use Tray.io, you can create a workflow that takes a webhook trigger input and calls the appropriate Blueshift API. 

This part is optional and you can skip this part if you are okay with using our webhook. 

So, on a user impression or a click, a webhook triggers the Tray.io workflow that calls the appropriate Blueshift API with the information that we need. Now that you have created a workflow, you have to get the workflow's URL and keep it handy. You'll need it in the next step. For more information on how to use Tray.io to create workflow using a webhook trigger, see Webhook Trigger on their documentation. Remember, Tray.io is used as an example here. You can use any service that can perform an action like this and keep that service's URL handy. 

webhook_trigger_tray_io_copy.png

After you set up the trigger and have its URL handy, you can specify it in OneSignal as described in the procedure above.  

-----------

 

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, exampleuser_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