PushEngage Web Push Notifications For AMP Pages
What is AMP Pages?
AMP stands for Accelerated Mobile Page. It is 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?
Below mentioned are key parameters needed in AMP integration. We request you to request the same by your Account Managers or drop a mail at email@example.com.
- PushEngage subdomain (your_subdomain)
- App ID
The values to be replaced are highlighted in yellow in below documentation.
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.
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.
Upload all the downloaded files from above in your root folder.
This will be used in Step 3.
Please note – Replace YOURDOMAIN.COM with the domain where you are actually collecting subscribers. For example if you have site at PushEngage registered as https://www.pushengage.com so instead of YOURDOMAIN it will be pushengage. Also make sure to replace App ID.
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.
Now your integration for web push on AMP Pages with PushEngage will be complete. If you have any issues with integration or want it verified, please email us at firstname.lastname@example.org.