Web Push (via OneSignal)

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 at https://documentation.onesignal.com/docs/web-push-quickstart 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. https://documentation.onesignal.com/docs/web-push-sdk#section--getuserid-

<html>
<head>
<script type="text/javascript">
window._blueshiftid='<<BLUESHIFT EVENT API KEY>>';window.blueshift=window.blueshift||[];if(blueshift.constructor===Array){blueshift.load=function(){var d=function(a){return function(){blueshift.push([a].concat(Array.prototype.slice.call(arguments,0)))}},e=["config","identify","track","click","pageload","capture","retarget","live"];for(var f=0;f<e.length;f++)blueshift[e[f]]=d(e[f])};}
blueshift.load();
blueshift.pageload();
if(blueshift.constructor===Array){(function(){var b=document.createElement("script");b.type="text/javascript",b.async=!0,b.src=("https:"===document.location.protocol?"https:":"http:")+"//cdn.getblueshift.com/blueshift.js";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c);})()}
</script>

<link rel="manifest" href="/manifest.json" />
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
 var OneSignal = window.OneSignal || [];
 OneSignal.push(function() {
   OneSignal.init({
     appId: "<<OneSignal APP ID>>", // Replace with your OneSignal app id
   });
 });
</script>
</head>

<body>
Web Push notification test with Blueshift + OneSignal
<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. Select the OneSignal web push template from the Cloud App template creation screen.


  1. Configure the template including the name, tags and other relevant information:
  2. Edit the template JSON body to customize the urls, personalizations and rendering, example:

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

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

3. Issue a Test Push via Cloud App

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

Collect Engagement data back from OneSignal

OneSignal can issue webhook callbacks to your 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. Read more here: https://documentation.onesignal.com/docs/webhooks. In order to use this, you would setup web hook 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.

Check out a sample implementation

You can checkout a sample implementation at blueshiftreads.com for Web Push messages delivered via OneSignal. Click on the “bell” icon on the lower right after signing up and browsing a few pages.

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