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.

<script async custom-element=”amp-web-push” src=”https://cdn.ampproject.org/v0/amp-web-push-0.1.js”></script>

Here’s a screenshot for your reference –

Pushengage Installation Code

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

2.amp-permission-dialog.html –

       Download it from  https://your_subdomain.pushengage.com/amp-permission-dialog.html

3.service-worker.js –

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.

<script src=”https://clientcdn.pushengage.com/core/your-app-id.js” async></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 –

<amp-web-push
id=”amp-web-push”
layout=”nodisplay”
helper-iframe-url=”https://YOURDOMAIN.COM/amp-helper-frame.html?appId=your-app-id”
permission-dialog-url=”https://YOURDOMAIN.COM/amp-permission-dialog.html?appId=your-app-id”
service-worker-url=”https://YOURDOMAIN.COM/service-worker.js?appId=your-app-id”
></amp-web-push>

 

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.

<style amp-custom>
amp-web-push-widget button.subscribe {
display: inline-flex;
align-items: center;
border-radius: 2px;
border: 0;
box-sizing: border-box;
margin: 0;
padding: 8px 15px;
cursor: pointer;
outline: none;
font-size: 15px;
font-weight: 400;
background: #399bff;
color: white;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
amp-web-push-widget button.subscribe .subscribe-icon {
margin-right: 10px;
}
amp-web-push-widget button.subscribe:active {
transform: scale(0.99);
}
amp-web-push-widget button.unsubscribe {
display: inline-flex;
align-items: center;
justify-content: center;
height: 45px;
border: 0;
margin: 0;
cursor: pointer;
outline: none;
font-size: 15px;
font-weight: 400;
background: transparent;
color: #B1B1B1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>

Add the code mentioned below to your AMP site’s <body> section.

<!– A subscription widget –>
<amp-web-push-widget visibility=”unsubscribed” layout=”fixed” width=”245″ height=”45″>
<button class=”subscribe” on=”tap:amp-web-push.subscribe”>
<amp-img
class=”subscribe-icon”
width=”24″
height=”24″
layout=”fixed”
src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABg
AAAAYBAMAAAASWSDLAAAAJF
BMVEUAAAD
///////////////////////////////////////////+0CY3pAAAAC3RSTlMA4/OGV0m
AGdHkGIAFtiwAAABdSURBVBjTYyAAIkWRONIbEezi3bvNY
WwW7d27NzlAOd67gWALhM0OlABKLQBzmHeDQQKYwwHh
NIA5TBCOApjDDeFsoA4nG8LZDGKz7YYCA6gqhDoEwPQpQ6
AopgIAIdhOgWU6qvUAAAAASUVORK5CYII=”>

</amp-img>
Subscribe to updates
</button>
</amp-web-push-widget>
<!– An unsubscription widget –>
<amp-web-push-widget visibility=”subscribed” layout=”fixed” width=”230″ height=”45″>
<button class=”unsubscribe” on=”tap:amp-web-push.unsubscribe”>Unsubscribe from updates</button>
</amp-web-push-widget>

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 care@pushengage.com.

Register for Web Push Notifications