Skip to main content
AMP Web Push Integration Prerequisites
  1. Ensure that AMP analytics is integrated before integrating AMP Web Push.
  2. Ensure that AMP analytics is integrated before integrating AMP Web Push.
  3. MoEngage AMP Web Push Integration does not, by default, track the MoEngage default user attributes and events.

​
AMP Web Push

Web Push Notification does not work by using the MoEngage Web SDK and serviceworker.js.
Google has recently published a separate plugin to support the integration that enables News Publishers, Bloggers, or anyone who uses AMP to deliver their webpages quickly by encouraging users to subscribe using Push Notification.
Only Android devices are supported.
Follow these steps to integrate AMP Web Push:

​
Add AMP Web Push script

Add this line in the <head> section of your .amp file where you want to use Web Push. 
<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>

​
Add Helper files

Download the files corresponding to the dashboard you are using and ensure the files are available in the root directory of your website. Right-click and click Save Link as… to save the files:
Dashboard hostFiles
dashboard-01.moengage.com1. amp-helper-frame.html
2. amp-permission-dialog.html
3. serviceworker_amp.js
dashboard-02.moengage.com1. amp-helper-frame.html
2. amp-permission-dialog.html
3. serviceworker_amp.js
dashboard-03.moengage.com1. amp-helper-frame.html
2. amp-permission-dialog.html
3. serviceworker_amp.js
dashboard-04.moengage.com1. amp-helper-frame.html
2. amp-permission-dialog.html
3. serviceworker_amp.js

​
Add Code

Add the following code inside <body> tag: 
<amp-web-push
id="amp-web-push"
layout="nodisplay"
helper-iframe-url="https://DOMAIN.COM/amp-helper-frame.html"
permission-dialog-url="https://DOMAIN.COM/amp-permission-dialog.html"
service-worker-url="https://DOMAIN.COM/serviceworker_amp.js?app_id=WORKSPACE_ID"
></amp-web-push>
Replace the following:
  • DOMAIN.COM with your actual domain.
  • WORKSPACE_ID with your Workspace ID available at MoEngage Dashboard > Settings > General.
Ensure all files are available at the same source path and suffixed with HTTPS.

​
Add the Subscribe or Unsubscribe Buttons

Subscribe / Unsubscribe buttons or Amp Web Push Widgets are needed to subscribe or unsubscribe the user from AMP Web Push Notifications. The following code adds the subscribe or unsubscribe buttons: 
<div class="web-push">
{/*  A subscription widget  */}
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="45">
<button class="subscribe" on="tap:amp-web-push.subscribe">Subscribe to Notifications</button>
</amp-web-push-widget>
{/*  An unsubscription widget  */}
<amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="45">
<button class="unsubscribe" on="tap:amp-web-push.unsubscribe">Unsubscribe from Notifications</button>
</amp-web-push-widget>
</div>
Use <button> or <a> with on="tap:amp-web-push.subscribe" for the button to work. You can:
  • Modify the exact call to action of the button.
  • Use your own text or leave it as it is.

​
Style the Widgets using the code in CSS

Subscribe or Unsubscribe widget layout is fixed. However, you can design the button and layout by modifying the CSS. The default CSS is: 
<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: 10px 15px;
cursor: pointer;
outline: none;
font-size: 15px;
font-weight: 400;
background: #4A90E2;
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:active {
transform: scale(0.9);
}
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);
background-color: #eee;
border-radius: 2px;
}
amp-web-push-widget button.unsubscribe:active {
transform: scale(0.9);
}
</style>