[Now Live] PushEngage Web Push Notifications For AMP Pages
What is AMP Pages?
AMP stands for Accelerated Mobile Page. It an open source Framework from Google and Twitter that helps to load content on the mobile pages quickly. It displays the content which is important and removes the one that takes time to load on your site and affects the site performance.
Google now supports web push AMP extensions that allow subscription on AMP Pages.
Hence it is a great opportunity for the sites to increase their subscriber base as the reach will be better now and the subscription to the push notifications is also possible at the same time.
PushEngage now supports web push subscription on AMP Pages and here’s how you can integrate it.
How To Integrate PushEngage Web Push Notification for AMP Pages?
You can enable PushEngage web push notifications for AMP Pages in 3 steps.
Step 1 – Add the AMP Web Push script
Add the script mentioned below to the AMP pages where you would like to enable web push notifications. The script should be added to the <head> section.
Here’s a screenshot for your reference –
Step 2 – Configure the AMP Web Push extension
(For HTTPS Site)
Download these files from your subdomain on PushEngage and add them to the root directory of your site –
1. amp-helper-frame.html –
Download it from https://your_subdomain.pushengage.com/amp-helper-frame.html
Download it from https://your_subdomain.pushengage.com/amp-permission-dialog.html
Settings -> Installation Settings -> HTTPS section
If the service-worker.js file is already present in the root directory you can ignore the adding it again. This is also a mandatory step during PushEngage Installation.
Please note – 1. Replace YOURDOMAIN.COM with the domain your users are using to subscribe.
2. Replace your-app-id to PushEngage app id find in your ppushEngage installation script.
The installation script is present under Settings > Installation Settings > HTTPS Tab. Copy the second line of the Async version of the code.
Add the code mentioned below to your AMP site’s <body> section –
Step 3 – Set up your widget
You can add the code mentioned below within your AMP pages if you customize the subscription widget. You can do it by changing the CSS.
Add the code mentioned below to your AMP site’s <body> section.
Once this is done you integration for web push on AMP Pages with PushEngage will be complete. If you have any issues with integration, please email us at firstname.lastname@example.org.
- How to Unsubscribe from Push Notifications in Chrome and Firefox
- How to Configure a Firebase Cloud Messaging Key & Why You Should Use FCM API Key
- Guide to Implementing Web Push Notifications, Without a Vendor Lock-in
- 7 Ways To Increase Your Web Push Subscription Rate
- Drip Campaigns and Autoresponders For Web Push Notifications
- How to Go Live With Web Push Notification Using PushEngage in 3 Easy Steps