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 must sign up for browser web notifications at OneSignal.com and use the relevant credentials with your Cloud App template within Blueshift.

Before you begin

Before you can set up integration with Blueshift, you must have your OneSignal account set up.

Complete the following settings in OneSignal before you set up integration with Blueshift:

Setup a web push app in OneSignal

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>

Collect engagement data back from OneSignal

After the integration of OneSignal with Blueshift, you can send a notification from the Blueshift platform to the customers of your site through OneSignal.

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 you receive the callback, use the relevant URL in the "data" section to call Blueshift for the engagement tracking. 

Use the webhook URL provided by Blueshift to track a customer 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. 
  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 integration

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.

Quick start templates

When you create an adapter in the App Hub, the following quick start template is added to the Cloud App templates.

  • Create notification

Consider the following points about quick start templates:

  • Quick start templates are identified by the label "QUICK START".
  • A quick start template is added only when you create the first adapter for the app in App Hub. If you have multiple adapters for an app, you can edit the Adapter details on the template Properties tab to select the required adapter.
  • You can use this template as-is in your campaigns. You cannot make any changes to the schema for a quick start template.
  • You can clone the template and then edit the schema as required.

Next steps

  1. Configure the OneSignal quick start template to send a payload from a campaign.
  2. You can clone the quick start template and edit the schema if required. You can also create a new template.
  3. Verify integration
  4. In your campaign journey, add a OneSignal trigger. Select the template that you created.

Configure or create a OneSignal cloud app template

A Cloud App template is required to send a payload to OneSignal from a campaign. You can include personalizations and recommendations in the template content. For more information, see Cloud Apps templates.

To use a quick start template or to add a OneSignal Cloud App template, complete the following steps:

  1. Go to Creatives > Cloud App.
  2. Complete one of the following actions:
    • Select the Create notification quick start template for OneSignal from the list of templates.
    • To create a clone of the quick start template, go to the action menu for the template and click Clone.
    • To create a new template, click +TEMPLATES on the Cloud App Templates page. 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.

  3. Go to the Properties tab and configure the template name, add tags and other relevant information.cloudapps_onesignal_properties.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.
  4. Go to the Content tab.

    cloudapps_onesignal_content.png

  5. Go to the Content Form tab and fill the form to specify the data to send to OneSignal.
  6. If you are using a cloned quick start template or a new template, go to the Schema tab and configure the schema for the form.
  7. Provide the APP ID as the value of the app_id key in the source JSON.
  8. For the include_player_ids key, ensure that the value matches the custom user attribute that you add for the customer in the customer profile. For example, if you are using the attribute onesignal_webpush_id ({{user.extended_attributes.onesignal_webpush_id}}), ensure that the custom attribute that you add to the customer profile is also onesignal_webpush_id. If these two attributes do not match, Blueshift cannot update a customer's webpush ID on the platform.

    onesignal_userprofile_attribute.png

  9. In the preview tab, you can also switch to JSON and view the content in JSON format.

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. Go to the customer profile in Blueshift. You should see the onesignal_webpush_id in the Custom attributes section. 
  3. Send a Test message.
    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.