What is a Web Browser Push notification?

A type of notification that can be sent to a user's desktop or mobile device anytime they have their browser open - regardless of whether or not the user is on your website.

These are alert style messages slide in at the top or bottom right hand corner of a desktop screen, depending on the operating system, or appear on a mobile device in a manner nearly identical to push notifications delivered from apps.

All that’s required to send web push notifications is a website that has web push code installed in it. This means if you don’t have an app you can leverage many of the benefits of push notifications (real-time, personalized, in-the-moment communications).

What is the benefit of using Web Browser Push notifications?

Push notifications are more efficient and faster at reaching customers since this occurs in real-time! There is minimal lag in engagement because the notification appears on their screen, which is unlike email or SMS where the user needs to open the email or text notification.

This is vital since the average percentage of people abandoning their carts is over 75% across all industries. Research has also shown that this channel offers a reach 5X greater when compared to email!

How does a Web Browser Push subscription work in Listrak?

When visiting a website using a chrome desktop or mobile browser, customers are prompted to allow Browser Push Notifications

When user allows notifications, Listrak receives and stores the information necessary to send the browser push notifications.

⚠️ Currently the Web Push notification feature is only available in Advanced Page, Advanced Product and Advanced Cart Abandonment Journeys.


Setup and Configuration

The steps below will guide through the installation process and creating the automated messages your contacts will receive once the signup to receive Web Push notifications.

Step 1: Web Push File Setup (website)

The first step to setting up your Web Push begins by installing the Web Push files on your website:

  1. Setup your Service Worker File

    1. If you already have a Service Worker defined for your site, you’ll need to do the following:

      1. Change its name to root-service-worker.js

      2. Remove any existing Service Worker registration code from your site.

        For example:

        navigator.serviceWorker.register('existing-service-worker.js');

      3. Add _ltk-sw.js into your existing list of importScripts

        For example:

        importScripts('_ltk-sw.js', 'existing-1.js', 'existing-2.js', ... );

    2. If you don’t already have a Service Worker defined for your site, you’ll need to do the following:

      1. Create an empty file at the root of your site, named root-service-worker.js

      2. Add the following snippet of code to your newly created root-service-worker.js file:

        if ('function' === typeof importScripts) {
        importScripts('_ltk-sw.js');
        }

  2. Download the following files from our Web Push SDK and place them in the root of your site (do not change the file names):

    1. _ltk-push.js - https://faui.dev.listrak.com/FA.Testing.Website/_ltk-push.js

    2. _ltk-sw.js - https://faui.dev.listrak.com/FA.Testing.Website/_ltk-sw.js

  3. To test if the service is running, open the website in a browser that supports Web Push and follow the instructions below.

    • In Chrome: open the developers console. Select Application, then select Service Workers. You should see your website listed with a Service Worker named root-service-worker.js.

    • In Firefox: type about:debugging#workers into the address bar. You should see your website listed with a Service Worker named root-service-worker.js.

    • In Edge: open the developers console. Select Application, then select Service Workers. You should see your website listed with a Service Worker named root-service-worker.js.

Step 2: Subscription Capture Setup (website)

Configure an element on the website to display the Web Push subscription prompt:

  1. Configure an action on your site that you want to trigger the subscription prompt. This could be a button, popup, or any linked element.

  2. In your site's javascript code, add the function call that will launch the subscription prompt:

    _ltk.WebPush.RequestWebPushPermission()

    Example of a button that loads the subscription prompt:

    <button name="SubmitWebPush" onclick="RequestPermission();">Allow Web Push Notification</button>

    <script type="text/javascript">
    function RequestPermission() {
    _ltk.WebPush.RequestWebPushPermission();
    }
    </script>

  3. Prevent the “element that will trigger the sub prompt” from displaying on unsupported browsers/devices using the following javascript checks. This will be implemented depending on your website UI framework.

    if (!('serviceWorker' in navigator)) {
    // Service Worker isn't supported on this browser, disable or hide UI.
    return;
    }

    if (!('PushManager' in window)) {
    // Push isn't supported on this browser, disable or hide UI.
    return;
    }

  4. Prevent the “element that will trigger the sub prompt” from displaying for existing subscribers.

    navigator.serviceWorker.ready.then(function(reg) {
    reg.pushManager.getSubscription().then(function(subscription) {
    if(subscription) {
    console.log("User is subscribed")
    } else {
    console.log("User is not subscribed")
    }
    })
    });

Step 3: Setup the Journey

  1. Navigate to the channel picker by clicking on the Listrak logo.

  2. Select Journey Hub.

  3. Choose one of the Advanced Abandonment Entry Events.

  4. Give your journey a name.

Configure the Entry Criteria

  1. Click on the entry event in the builder and select the merchant.

    1. Only show merchants that have Web Push enabled in the account.

Configure the Exit Events

An exit event determines what must happen in order for a customer to exit a journey. If no exit events are configured or customers do not take the specified action they will naturally exit the journey at the end of their path.

  1. Select the exit at the bottom of the journey.

  2. If desired, select an event and then the merchant from the entry event.

  3. Or, select Journey to exit a customer out of this journey if they enter another journey.

Configure the Flow

Now that you have determined how a customer becomes eligible to enter or exit the journey, you can determine the experience they will have by customizing paths based on the keyword they entered, message engagement, and more.

Below are a few of the strategic considerations you may make when configuring your SMS Info Campaign journey.

Actions

Learn more about using different actions when creating a journey with multiple channels.

Wait Step

Use wait steps to pause a contact before they receive additional messages.

Web Push Messages

To author a message, follow these steps:

  • Select Web Push and drag the element onto the canvas > name the message.

  • Select the merchant - use the same merchant applied to the entry event step.

  • Click Create Message to configure.

    • Title: Is the headline of the push message.

    • Message: The content of the message. The character count varies from Browser to Browser.

    • Personalization (optional): Select the type of personalization you want to feature from the dropdown.

      • For example - If the tag is referencing the carted item [[Journey.Cart.Item.ImageURL]], move the tag from the from the message body and place it in the Banner Image URL input field.

    • Destination URL: Add the destination URL, when the message body is clicked the user will be directed to that landing page.

    • Icon URL: Add the URL of the Icon that will display within the message body,

    • Banner Image URL: Add the URL of the image that will display above the message body.

    • Add additional actions (optional): Select the box to add up to 2 more actions to this notification, these appear as clickable buttons in the message body.

      • Action Text: Add the button name

      • Action Destination URL: Add the destination URL, when the individual button is clicked the user will be directed to that landing page.

    • Google Analytics: The UTM source, medium, and the link terms are automatically set (see below for details), however you can customize the campaign and content names:

      • utm_source=Listrak

      • utm_medium=WebPush

      • utm_term(s)

        • Primary Link utm_term=[LinkURL]

        • Button 1 utm_term=[Button 1 Text]

        • Button 2 utm_term=[Button 2 Text]

      • utm_campaign=[UserCustomized]

      • utm_content=[UserCustomized]

Message Delivery Settings

Enabling this setting allows you to limit the time range for when a message is sent.

Decision Splits

Most decision splits can be placed anywhere in the journey to customize a customer's experience as they progress through the journey. Once you have determined the strategy you would like to customize, learn more about configuring your decision splits.

  • ✉️ Channel Affinity: This split allows you to prioritize different channels of your multichannel marketing campaign for contacts who are subscribed across more than one channel.

Activate the Journey

When all the elements have been configured and messages have been created, the last step is to activate the journey.

To activate, select the Activate button in the top right corner.


💡 Helpful Tips

  1. Currently the Web Push notification feature is only available in Advanced Page Abandonment, Advanced Product Abandonment and Advanced Cart Abandonment Journeys; and within Channel Affinity Decision Splits.

  2. You will not be able to access a list of contacts who have signed up to receive Web Push notifications.

  3. Glossary of Web Push terms:

    1. Web Push Send occurs when Listrak "sends" a message to the browser's push service.

    2. Web Push delivery occurs when the browser's push service successfully "delivers" the message to the contact's device. The push service will only deliver messages when the contact’s device is online and available. The push service will attempt to send for 72 hours before timing out if the device is unreachable.

    3. Web Push impression is based on a successful delivery. We can’t be certain that a contact has actually looked at a message, similar to an email open. If the message is received, it will count as an impression.

    4. Web Push Click-Through occurs when a link in the message is clicked.

    5. Web Push Click-Through Rate is calculated as the number of click-throughs divided by the number of impressions.

  4. Supported Browsers/Devices:

Browser

Windows PC

macOS

Android

iOS (iPhone, iPad)

Chrome (50+)

✅ ⚠️

Firefox (47+)

✅ ⚠️

Microsoft Edge

✅ ⚠️

Safari

Opera

Did this answer your question?