How To Setup Web Push Notifications for Drupal or Any Site using PushEngage

| Drupal Development | 11 seen

Push Notifications seems are hot and worth to invest trend nowadays. I have seen them around for about last 6 months in blogs, portals and other websites.  

In fact I have always chose to block them, when popped in my Chrome Browser, as I think they might be annoying. On the other hand as a blogger with pretty solid audience (more than 55,000 unique monthly users) I have wandered maybe it's worth to explore them more and implement on my blog?! As I see it now - web push notifications could help me to increase repeat visitors and page views, that's the reason I finally opted in and implemented web push notifications.

In todays Drupal development series - How To Setup Push Notifications for Drupal or Any Site using PushEngage.

PushEngage

PushEngage (Image courtesy: PushEngage.com)

Here is the fun fact - my smartphone have been broken for about 2 weeks (glass is broken), and I haven't repaired it or bought a new one - I didn't had a smartphone to perform my tests on. But I had a great partner and bug fixer in the other part of the world - my dad. I would like to express many thanks to my dad for a sleepless night, helping me out to implement and bug fix web push notifications on Android phone. Thanks dad, you are the best!

N.B. This article contains affiliate link to PushEngage.com, if you will decide to register a free account there, and latter will upgrade to paid account I might earn an affiliate income from that at no cost to you!

About Web Push Notifications

If you ask a room of developers what mobile device features are missing from the web, push notifications are always high on the list.

Push notifications allow your users to opt-in to timely updates from sites they love and allow you to effectively re-engage them with customized, engaging content. See more: Push Notifications on the Open Web

As a Drupaler I just logically went for a search for Drupal modules promising to enable push notifications for my blog, here are two I found:

From the two above listed, first (Push Notifications) seems to offer a lot, but involves great learning curve (You won't be able to set it up and run in 5 minutes), I was not in the mood to spend countless hours on developing a totally free feature. I opted for the second (Roost Web Push).

Although Roost Web Push promises to tackle all the hard work in place of you - I encountered few issues with it, and generally was left with a feeling that GoRoost.com is somehow dead and not supported from the side of developers (as of September 2016). After all I wasn't able to setup a correct installation with GoRoost.

Update: I got a reply from GoRoost.com support after 2 days and seems issues were corrected, thus I was already using PushEngage platform.

I didn't stopped my search and found few more services helping to setup web push notifications (Not related to Drupal). Here are few: Finebird.com, PushScrew.com and finally after reading article on shoutMEloud: How To Make Your Blog Push Notification Ready In The Next 5 Minutes I decided to give a try to PushEngage.com

All of the above listed offers more or less the same functionality - in short enable a JavaScript code in your website template and start gathering data. 

Here are things I didn't find cool at Finebird - at time of writing this article it was missing Auto Push feature (I would love to sync all blog content with service).

Pushcrew on the other hand handles RSS - Auto Push feature, but I had problems to enable single-opt in notification block for my HTTPS site. I had a chance to send a request to support desk and ask them to enable it for me. I actually did send that request and after few hours got a response with instructions, but by that time I was already using PushEngage - which worked smoothly out of box. (I had few problems with it, but generally speaking - PushEngage did what it promised - Target Desktop and Mobile users on Chrome and Firefox through Push Notifications. Implement in 5 mins. Exactly 5 minute implementation was what I was looking for, and more or less I did everything running in 5 minutes.

How To Setup Web Push Notifications for Drupal or Any Site using PushEngage

Start simple - visit PushEngage a register a free account. After successful registration follow installation instructions:

1. Include The Core JS Code

Copy and paste code from box to your website template (Speaking of Drupal, paste it into .html.tpl file - I prefer to include external scripts at the bottom of html, so I copied mine at the end of html.tpl file

<script src="https://clientcdn.pushengage.com/core/YOUR-NUMBER.js"></script> 
<script> _pe.subscribe(); </script>

Make sure you change YOUR-NUMBER

For Drupal -  clear the cache and / or inspect the source - does new JS file is actually loading.

2. Download Package Files(Only for HTTPS Implementation)

Learn more how to enable HTTPS for your Drupal site: Linode: How To Secure Nginx with Let's Encrypt on Ubuntu 12.04

Download the Package of files which include Manifest file,Service Worker file by clicking the link on from your PushEngage account and store them in your websites root folder

3. Give it a try

If done right - everything should work out of the box now. Start collecting subscribers and prepare for the first camping.

Possible problems, issues

Just shortly I registered for a PushEngage account I got a message from developer and founder of PushEngage Ravi Trivedi, with congrats and further steps.

By this time I already figured out - Web Push notifications are not working on iOS, and I did send a reply:

Reinis here, I did setup my push notifications already and I'm planing to see it on action by using RSS feed from blog. 

Here is my site: https://www.reinisfischer.com

Is there any planned upgrade for IOS anytime soon?

 
And got reply:

Unfortunately iOS does not support Browser Push Notifications , so we cant implement Browser Push on Chrome, Firefox, or Safari on iPhones/iPads.   

In terms of Safari support for Mac computers, we will be launching that shortly.

 

Next I figured out that RSS-Auto Push is not actually sending out my notifications and I couldn't figure out how Geo - locations works, so another question(s)


1. If sending notifications under Advanced Options for Geo Location I don't see country, state or city, just "No Result found"  - why it is so, and could it be there are some bots enabling notifications?
2. I enabled RSS-Push notifications, but haven't seen them sending out, I added my RSS in XML format - like this 
https://www.reinisfischer.com/rss.xml
Is that a right format? Or should I use some other format for RSS?
 

And a quick reply:


1.  We use a third party vendor for identifying the geo location of a push subscriber (IP to Geo mapping), and that vendor has some outage, and hence we are seeing this issue where new subscribers are coming in without  a geo location.  We are looking at addressing this urgently, and once this is taken care your subscribers will have geo location. Apologies for the issue.

2. When did you enable RSS Auto Push?  The configuration seems fine.  The way it works is that every 30 minutes, it checks for new posts in last 30 minutes and sends them out as Push Notifications.   I noticed you have set your time zone as GMT, and the RSS feed also is in GMT. Last post was updated at 04:15 GMT, so if you set this after 5:00 AM GMT, it had no posts to send.
 

The Bottom Line

By now (September 2016) web push notifications seems still new and unusual marketing channel for web apps (blogs, portals and so on), but I believe we will heard of them more and more, and yes, most probably the CTR will decrease, but as of now - what are you waiting for? Start implementing web push notifications now.

PushEngage Dashboard

PushEngage Dashboard

In less than 24 hours I was able to gather 74 subscribers. Amazing. I still wonder how many actually have pressed block instead of allow from notification bar?!

It seems I will be able to gather a 2500 subscribers in less than 3 months, in that way I will need to upgrade to a paid account.

About PushEngage

Implement Push Notifications in 5 Minutes

PushEngage enables Push without requiring your website to implement HTTPS. Add the javascript code to your site and go live in 5 minutes.

High Click Through Rates than Email

Because of higher views for notifications, and urgency of the message, with browser push notifications, you will notice 5 to 10x higher click rate over email.

Engage Mobile Audience without Mobile App

Mobile Browsers support push notifications, so now you can re-engage with your audience and increase your repeat visitors to the mobile website. Now you dont need an mobile app to engage users in browser.

Personalized Messaging

Target notifications based on preferences, categories, or custom segments, and get higher click rates and higher conversion.

Re-Engage With Users Anywhere

Reach your when users when they are not on your website. Increase repeat users to your site using browser push notifications. These are delivered to user real-time, in the browser.

Schedule Notifications

Reach your users when they are likely to open your message. Schedule notifications to save you time.

Learn more at PushEngage.com

Add new comment