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 on 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 are the benefits 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.
With increased support by browsers such as Safari companies can see increase their push notification subscriber base by 50-100% on average as almost 20% of overall web traffic comes from iOS on a global level and opt-in rate on mobile devices is 4 times higher than desktop
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.
For Apple devices that support web push (see chart below) a user must add your web app to the home screen in order to receive notifications. Users are able to add an app to the home screen by clicking on the option in the share menu. Consider adding a banner or other notification to your mobile website version to notify users of this option.
After the user allows push notifications, Listrak receives and stores the information necessary to send the browser push notifications.
How can I setup Web Push Notifications on my website?
The steps below will walk you through the setup and installation process to get you started.
Step 1a: Web Push File Setup (website)
The first step to setting up your Web Push begins by installing the Web Push files on your website:
⚠️ If using the Listrak Shopify Public App, skip to step #2. The service worker file is automatically installed as part of the Shopify integration.
Download the Listrak Web Push SDK
Unzip the download and drag the LtkWebPush folder that includes the ServiceWorker.js file into your site’s file system. Ensure the ServiceWorker.js file is hosted at the LtkWebPush path, i.e. https://www.yoursite.com/LtkWebPush/ServiceWorker.js.
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 ServiceWorker.js.
In Firefox: type about:debugging#workers into the address bar. You should see your website listed with a Service Worker named ServiceWorker.js.
In Edge: open the developers console. Select Application, then select Service Workers. You should see your website listed with a Service Worker named ServiceWorker.js.
Step 1b: Web Push for Apple Mobile Devices
Apple devices running version 16 or greater are able to receive app push notifications in the Safari browser. For the desktop Safari browser no additional setup is needed, however additional work is required to enable Web Push for mobile devices.
These functions are only available on devices with version 16 or greater
Banner images are not supported in Safari at this time
To enable this functionality, a manifest json file must be added to the website by the site admin
The site visitor must “Add to Home Screen” the web page that will be receiving notifications on their iPhone or iPad.
Adding a Manifest JSON file
Follow the directions outlined here: Web app manifests | MDN.
⚠️ Ensure that the display member is set to standalone or fullscreen during the JSON creation process.
Directions to Add to Home Screen
The following directions should be provided to your Apple mobile device users to provide additional guidance on how to use the Add to Home Screen function.
Visit your website on your Safari, Chrome, or Edge browser on a mobile Apple device on iOS/iPadOS 16.4+
Click on the Share button of the browser of the mobile device.
Click on the Add to home screen option.
Save the app on their device.
Open it the app from the home screen.
Subscribe to notifications (this must be clicked before a native permission prompt can be displayed by the device).
Creating Popups to Collect Opt-Ins
In addition to any built-in popups in a browser, you can collect opt-ins as part of a popup created within Listrak. There are multiple collection options allowing you to collect opt-ins to multiple channels within the same popup.
Collect Web Browser Push opt-in only
Collect Email and Web Browser Push opt-in
Hide Web Browser or Email sign-up for recent subscribers to that channel
💡 Popups are created by the Listrak Implementation team.
What type of Web Browser Push Journeys can I build?
Welcome Series
Use the Web Browser Push Entry Event to send a series of welcome notifications after a user allows notifications to be sent from your website. Available in both our prebuilt templates or built from scratch journeys.
Abandonment Messages
Add Web Push channel messages to a new or any existing Advanced Abandonment Entry Events to notify subscribers when they have abandoned a page, a product or left something behind in their cart. Available in both our prebuilt templates or built from scratch journeys.
Click here to learn how to build a journey.
Can I build Web Browser Push Broadcast Messages?
Yes! In addition to creating automated journeys, sending web browser push broadcast messages is another way to target shoppers.
Click here to learn how to create a message.
💡 Helpful Tips
You will not be able to access a list of contacts who have signed up to receive Web Push notifications.
Glossary of Web Push terms:
Web Push Send occurs when Listrak "sends" a message to the browser's push service.
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.
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.
Web Push Click-Through occurs when a link in the message is clicked.
Web Push Click-Through Rate is calculated as the number of click-throughs divided by the number of impressions.
The chart below outlines support for browser and device combinations. There are additional functionality differences for browsers listed below.
Firefox does not support action buttons.
Firefox users must click on the close button to dismiss a notification.
Safari does not support banners.
Screen sharing and focus mode may change push notification behaviors.
Browser | Windows PC | macOS | Android | iOS (iPhone, iPad) |
Chrome (50+) | ✅ | ❌ | ✅ | ❌ |
Firefox (47+) | ✅ | ❌ | ✅ | ❌ |
Microsoft Edge | ✅ | ❌ | ✅ | ❌ |
Safari | ❌ | ✅ ⚠️ 16+ | ❌ | ✅ ⚠️ 16+ |
Opera | ❌ | ❌ | ❌ | ❌ |