Comprehensive Guide on Testing Web Push Notifications

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.

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 Check Whether Web Push Notifications Are Working On Your Site Or Not?

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.

Solution: To solve this issue of simulating multiple new user visits to your website, you can create new profiles in your 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.
• On the top right, select your profile image or initial.

• On the menu, choose Add account.

• On the menu, 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.

Note – Further, Browser Push Notifications subscription is not allowed on certain visitors – a browser that opens in the Facebook app, Edge/Internet Explorer, google website slow connections as javascript is not loaded in that. 

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.

Test 1 – Using Different Profiles in Chrome

1. Create different profiles in chrome with help of steps mentioned above and then visit your website. You will then get and opt-in for a subscription. The opt-in could be any one of the following –
2. Once you click Allow you should be redirected to an intermediate page which confirms the subscription.
3. You need to click Allow on the second opt-in as well in order to confirm the subscription.
4. Once it's done you should receive a welcome message.

Test 2 – Using Segmentation

1. From your PushEngage dashboard navigate to Segmentation > Manage segments > Create Segment
2. Now, Navigate to Segmentation > Automatic Segmentation > Create Url Pattern > Include URL Pattern. Add the URL and click on Save.
3. Create a test Page with the same URL that you've added in the URL pattern and place the code in the head section.
4. You can tag your subscribers with custom segment information at the time of subscription by passing the segment name in the second line of the javascript we request you to add. The example code is below –_pe.subscribe('test1');
5. You can share the link with a group of people and ask to subscribe for 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 –

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. In this way every time a visitor subscribes to the notification he receives a welcome message.

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 3 – There are two installation codes present in the dashboard, async version, and the legacy version. Please make sure you use only one of them. If you choose Async Version then you can add it anywhere in the HTML of your website. If you choose the legacy version then you can add the code only in the head section of your website. We have mentioned the same in thedashboard as well.

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 two files that is manifest.json and service-worker.js are present and are accessible or not.

1. https://www.your-site-name.com/manifest.json
2. https://www.your-site-name.com/service-worker.js

If the links are accessible then you would get results like this –

Note – These files are available in PushEngage Dashboard in step 2 of installation settings.

Step 4 – If you are an HTTPS website and don't have an access to the root folder and you have not added the two files check whether you have enabled 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 dialog box setting and then select Safari Style Box > Edit > Options

Quick Install – Yes

Test 3 – Using Console –  

1. Visit your website using a new profile and then press Ctrl + Shift + l (inspect element).
2. Go to Console and add subscribe();  
3. You will get the opt-in for the subscription once you press enter and you can check the functioning by allowing the notifications.

Note –

• 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 at the first time.

• To enable it to navigate to Settings > Subscription DialogBox Settings. Scroll down to 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 opt-in). It doesn't allow media rich content.

The post Comprehensive Guide on Testing Web Push Notifications appeared first on Web Push Notifications Blog - PushEngage.