Blueshift

OneSignal integration with Blueshift for Web Push.

❗️

This Integration is not yet supported by User Model

OneSignal is migrating from a device-centric model (player ID) to a new user-centric data model. Our partner Integrations are in the process of being updated to the new user-centric APIs. To learn more about this migration, check out the User Model Migration Guide.

You may encounter discrepancies in your Audiences if you migrate your OneSignal applications to the new user-centric APIs and SDKs. Please wait complete your migration to the new user-centric APIs and SDKs until the Integrations you use are supported.

The documentation for this integration will be updated once our new user-centric APIs support it. Please reach out to [email protected] with any questions.

OneSignal has partnered with Blueshift to help make Customer Engagement even easier!

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 have a website setup following the OneSignal Web Push Quickstart and use the relevant credentials with your Cloud App template within Blueshift. Follow the steps below to setup your OneSignal web push template with Cloud App.

Add the OneSignal and Blueshift code to your website

<head>
  <!--Blueshift code -->
  <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>
    
    <!-- OneSignal Init code -->
    <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>

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 Blueshift CloudApp Template

1 - Select the OneSignal web push template from the Cloud App template creation screen.

2 - Configure the template including the name, tags and other relevant information

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

4 - You should see a personalized web push delivered via OneSignal

Collect Engagement data back from OneSignal

OneSignal can issue Web Push Webhooks 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.

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.