Do you know how to test web push notifications? In this comprehensive guide, we will explain in detail on testing web push notifications. This guide is the only thing you will need to test whether the push notification set up on your website is working fine or not.
We have earlier discussed What is Browser Push Notification and how it works. Push notifications come on the browser of your device even when the concerned web page is not open on your browser. Browser notification is one of the efficient marketing channels for customer re-engagement, as it has better ROI as compared to email or retargeting ads. How do you test browser notifications?
Web Push Notifications are a browser standard implemented by a set of web browsers. As you integrate a product like PushEngage and test web push notifications, ensure the browsers that you are testing on supports Web Push Notification.
How To Test Web Push Notifications On A Site?
The Issue: Once a user subscribes to web push notifications, they don’t get the subscription pop-up again, and hence it can be tricky to test the web push notifications. You need to test chrome notifications.
Solution: To solve this issue of simulating multiple new user visits to your website, you can create new profiles in your chrome browser. Then when you visit the site, with a different profile, it will simulate a new user visit. In this way, you can check how subscription works if the subscription is getting completed, what happens if the user denies receiving the notifications.
Here is how to create different profiles on chrome.
- On your computer, sign in to Google.
- Go to the top right, select your profile image or initial.
- On the menu, choose Add account.
- Select the account you’d like to use.
Which Browsers Does PushEngage Support For Web Push?
PushEngage supports the below list of browsers based on the platform. Wherever we are not able to add another browser type, it is due to the constraint of the browser/OS.
[table id=7 /]
Does it support both HTTP and HTTPS websites?
PushEngage enables Push without requiring your website to implement HTTPS. If you have an HTTP website, you can add the 2 line code from our dashboard. If you have an HTTPS website, then, you can add the 2 line code, and add 2 files at the /root of your domain. You can add the code through a tool like Google Tag Manager as well.
Enable Welcome Notification – Once you’ve added the JS code and completed the basic settings, enable or allow Welcome Notifications from your PushEngage Dashboard. In this way, every time a visitor subscribes for the notification he receives a welcome message.
This is a useful step, as it helps us validate if a subscription has been completed.
Basic Testing Of Push Notification
Test 1 – Using Different Profiles in Chrome
- Create different profiles in chrome with the help of steps mentioned above and then visit your website. You will then get an opt-in for a subscription. The opt-in could be any one of the following –
- Once you click Allow you should be redirected to an intermediate page which confirms the subscription.
- You need to click Allow on the second opt-in as well in order to confirm the subscription.
- Once it’s done you should receive a welcome message.
Test 2 – Using Segmentation
- From your PushEngage dashboard navigate to Segmentation. Create Segment
- Now, add Segment Criteria. Edit the Include URL Pattern. Add the URL and click on Save.
- Create a test page with the same URL that you’ve added in the URL pattern and place the code in the head section.
- You can share the link with a group of people and ask to subscribe to notifications.
Once they are subscribed, you can send the notifications to users of that particular segment. If they receive the notification then it means subscription is complete and services are working fine.
Advance Testing Of Push Notification
There are advanced ways to test web push notifications. If you are a developer then you can try any of the 3 methods mentioned below to check the functioning.
Test 1 – For HTTP Websites
Step 1 – Once you’ve added the JS code and completed the basic settings, enable or allow Welcome Notifications. To set a welcome notification, go to Settings > Site Settings > Installation Settings. Scroll down and you will see Welcome Notification. In this way, every time a visitor subscribes to the notification he receives a welcome message. See the push notification basic settings video below:
Then visit your website using the new chrome profile that you’ve created.
Step 2 – You will get an opt-in for the subscription like this, and when the subscription is complete you should get a welcome message as well.
Step 3 – If you don’t receive an opt-in for subscription press Ctrl + U (view source code) and look for the PushEngage JS code (one available in your dashboard) for the subscription. The code should be added correctly.
Make sure you are not using any defer tag.
Note – The code should be added in the head section of the website as it might not work if added in <footer>or <body>. (Code is available in the Installation Settings in PushEngage Dashboard).
Step 4 – Add the code anywhere in the HTML of your website.
Test 2 – For HTTPS Website
Step 1 – If you don’t receive the opt-in on visiting your website follow the steps mentioned in the Test for HTTP Websites. The code to integrate PushEngage should be present in the head section of the website.
Step 2 – Check whether the service-worker.js is present and is accessible or not.
If the links are accessible then you would get results like this –
Note – The file is available in PushEngage Dashboard in step 2 of installation settings.
Step 3 – If you are an HTTPS website and don’t have access to the root folder and you have not added the two files check whether you have enabled a quick install process or not.
Quick Install Method for an HTTPS website is to log in to your PushEngage account and navigate to Settings > Subscription Settings > Subscription dialogue box and then select Safari Style Box > Edit > Options
Quick Install – Yes
Test 3 – Using Console
- Visit your website using a new profile and then press Ctrl + Shift + l (inspect element).
- Go to Console and add subscribe();
- You will get the opt-in for the subscription once you press enter and you can check the functioning by allowing the notifications.
Note On Enabling Opt-In
- If a user subscribes for notification he will not receive the opt-in again or every time he visits the website.
- There are three ways a user can respond to the opt-in –
- Default– When the user ignores by pressing ‘escape’ or by canceling the notification
- Granted – When the user clicks on ‘Allow’
- Denied – When the user clicks on ‘Block’
If a user denies subscribing for the notifications or blocks the notification he will not get the opt-in for the subscription again. To enable the notifications one has to clear the cookies, local storage and Click on Notifications > Use Global Default (Ask)
- You can also enable get notification widget from your dashboard. So even if a user blocks the notifications and wished to enable it he can do it by clicking on it. It appears on the right corner of the page. It is a simple method as it is entirely driven by the user’s actions. However, the subscription is obviously going to be low because the nudge is subtle and not direct, like the previous case or how opt-in appears for the first time.
- To enable it to navigate to Settings > Subscription Setting > Opt-in Management. You will see the Notification Widget Settings, enable it, and save the changes.
- The maximum you can do is play with the logo and text in the opt-in (if it is not native or single-step opt-in). It doesn’t allow media-rich content.
This concludes the comprehensive guide on testing web push notifications. Any time you face issue with your push notification set up, the 1st thing to dos is refer this guide. This will help you do initial debugging of your set up. And, if you do not find solution over here, you can always reach out email@example.com. The team at PushEngage will be happy to serve you.