Looking for a way to add push notifications to the AMP version of your site? Adding AMP push notifications can be a little technical. But we’re going to help you do it the easy way.
AMP or Accelerated Mobile Pages are essentially a mobile version of your site. So, if you’re not setting up push notifications on your AMP site, then you’re going to lose a bunch of subscribers because a huge part of your audience will use mobile devices to visit your site.
In this article, we’re going to use PushEngage to install push notifications because it’s way easier than doing things manually.
Let’s dive in.
How to Install AMP Push Notifications
Installing AMP push notifications is a really quick and easy process. Just follow these steps and by the end of this article, you should be able to send push notifications from your site like this one:
Looks good, doesn’t it?
Let’s dive in.
Step #1: Set Up Your PushEngage Account
Head over to the PushEngage home page and click the Get Started button:
You can select the free plan to try out PushEngage, or choose a paid plan if you’re serious about growing your business. The paid plans come with more campaign options and the ability to build even bigger subscriber lists.
Once you’ve signed up for an account, head over to the PushEngage dashboard and go to Settings » Site Settings » Installation Settings:
This is where you configure your site details and branding. Go ahead and set a logo and site URL for your push notifications. You should do this right now so that you can test your push notifications properly.
Step #2: Get the AMP Push Notifications Installation Code
Next, you’ll need to head over to the PushEngage dashboard and get the installation code. Go to Settings » Site Settings » Installation Settings:
Head over to the AMP tab to get installation settings.
Copy this code. You’ll need to paste this code in the HTML <head> of your site. If you’re running a WordPress site with an AMP version, the simplest way to do this is to use the Insert Headers and Footers plugin. It’s a free plugin where you can paste in the AMP web push code without having to go into the actual HTML of your site:
Once that’s done, download the package file in the same dashboard:
This includes:
- service-worker.js
- amp-helper-frame.html
- amp-permission-dialog.html
Unzip the package and place these files in the root folder of your server. This part is super important. If you skip this step, your site won’t be able to collect subscribers for push notifications.
Pro Tip: If you’re not sure what the root folder is and how you can upload files there, you should check out this article on the WordPress File and Directory Structure. It’s a really simple guide for beginners and you get a lot of insight into how WordPress works.
Step #3: Add the AMP Push Notifications HTML
Next, add the HTML code to enable a subscribe on click button and a button to unsubscribe from push notifications:
This code enables the service worker file you uploaded and allows your site to display subscribe and unsubscribe buttons. To collect subscribers, you need to give your visitors a simple way to subscribe to your push notifications. The unsubscribe button will give your active subscribers a way to opt out if they’re not interested in your content. Both are pretty important.
Add the `Subscribe to updates’ button where you want it to show up on your site:
And add an ‘Unsubscribe from updates’ button:
The Unsubscribe button is going to be a simple ‘tap to unsubscribe’ button. You get a lot more customization options for the non-AMP version of your site on both mobile and desktop devices. So, we recommend that you add AMP CSS to your <body> section.
This code snippet is meant to customize the look and feel of both Subscribe and Unsubscribe buttons. If you’d like to play around with these styles, go for it. Just make sure that you don’t change the AMP HTML tags that the code is styling.
And that’s it. You’re done.
Step #4: Configuring the PushEngage Opt-In
Finally, in your PushEngage dashboard, go to Settings » Subscription Settings » Subscription Dialogbox » Edit:
From here, you can customize your push notification opt-in. If you need help with that, you should check out this article on how to create a custom push notification opt-in.
If you need some inspiration, you can check out this article on high-converting push notification opt-ins.
Step #5: Create a Welcome Notification
Once you’re done setting up the opt-in, your site can collect subscribers.
But how do you know if your push notifications are working properly?
We recommend that you create a welcome push notification to test if your setup went smoothly. A welcome notification is a push notification you send a new subscriber to confirm their subscription and welcome them on board.
Head over to Settings » Site Settings » Installation Settings and configure your welcome message:
Finally, head back to your site and opt for your own push notifications to test whether it’s all working smoothly.
And that’s all there is to it!
You have successfully set up push notifications on your Blogger blog. It’s time to head back to your PushEngage dashboard and start creating your push notification campaigns.
Wrapping Up
That’s all for this one, folks!
If you’re new to push notifications, you should follow a full-blown push notification testing process before you go live. It’ll help you troubleshoot common issues before your visitors see them and start complaining about a broken user experience.
And if you haven’t already, go ahead and give PushEngage a try. PushEngage is the #1 push notification service in the world. So, if you’re serious about growing your business, you should invest in PushEngage.
Thanks for this tips & information. Its very easy to understand.
good explanation