Configure and Integrate AMP Web Push
 

AMP Web Push Integration Prerequisites

    • Ensure to integrate AMP analytics before integrating AMP Web Push.
    • Ensure to integrate AMP analytics before integrating AMP Web Push.

    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 the News Publishers, Bloggers or anyone who uses AMP, to deliver their webpages quickly by encouraging users to subscribe using Push Notification.

 

NOTE

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.

HTML
<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 following files and ensure the files are available in the root directory of your website. Right-click and click Save Link as... to save the files:

  1. amp-helper-frame.html
  2. amp-permission-dialog.html
  3. serviceworker_amp.js

Add Code

Add the following code inside <body> tag:

HTML
<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=APP_ID"
></amp-web-push>

Replace the following:

  • DOMAIN.COM with your actual domain.
  • APP_ID with your App ID available at MoEngage Dashboard > Settings > General.
 

NOTE

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:

HTML
<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:

HTML
<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>

 

Was this article helpful?
0 out of 0 found this helpful