Get More Leads and Sales: Download Our Essential Email Marketing Ebook Now!

Unlocking the Secrets to High Conversions" - Take your email marketing to the next level with this ebook, which covers advanced tactics such as segmenting your email list, optimizing your email design, and personalizing your messaging.

Download E-book
Integration

How To Integrate Web Push Notification on AMP

AMP – or Accelerated Mobile Pages – is a project backed by Google that aims to make the loading of mobile web pages much faster.

According to Google, 40% of people abandon a website that takes more than 3 seconds to load. This demonstrates that users expect websites to load almost instantaneously.

Essentially, AMP pages work by using a lighter version of HTML that allows websites to load much faster than regular HTML.

As google give AMP pages more importance in search engines, you will get hell out of traffic. So it will be better idea to implement web push notifications on AMP pages and increase your subscribers.

How to implement Web Push Notification on AMP pages

There are 3 simple steps to implement Web Push Notifications:

1. Start with an empty html page with basic html structure. Add the script tag given below in your head section. This will load amp-web-push library provided by amp project.

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

2. Now create a widget to give user to subscribe to push notification. Make two buttons , one for subscribe and one for unsubscribe. You can remove unsubscribe button but it will recommended by google for better user experiences. Add this code in body part.

<!– A subscription widget – subscribe button –>
<amp-web-push-widgetvisibility=unsubscribed layout=fixed width=250 height=80>

<buttonon=“tap:amp-web-push.subscribe”>Subscribe to push Notifications</button>
</amp-web-push-widget>

<!– An unsubscription widget – unsubscribe button –>

<amp-web-push-widget visibility=subscribed layout=fixed width=250 height=80>
 <button on=tap:amp-web-push.unsubscribe>Unsubscribe from push Notifications</button>
</amp-web-push-widget>

Note : Visibility tag is required here. Visibility will take three value namely subscribe , unsubscribe or blocked . Widget will show and hide on the basis of user’s subscription state .For ex. first time user will see widget with visibility unsubscribe and if user subscribe the push, he will see widget with visibility subscribe .

3 . Now it’s time to install service worker and other configuration. For this you have to integrate three files in your root folder of our web site and your site must be on https. This three files are as following:

  1. helper-iframe-url
  2. permission-dialog-url
  3. service-worker-url

You can download these files by clicking on them.

Add this amp-web-push tag in html page which loads the all three files.

<amp-web-push
 helper-iframe-url=https://example.com/helper-iframe.html
 permission-dialog-url=https://example.com/permission-dialog.html
 service-worker-url=https://example.com/service-worker.js
></amp-web-push>

Now question is for what purpose we are adding these three files

helper-iframe-url : This page works as a mediator between amp and service worker, to enable communication which subscribes and unsubscribes the user. Notification permission status is also determined by this page.

Permission-dialog-url : This page is for user interaction which open a page as a pop up and prompts for notification permissions.

Service-worker-url : As you know it will run in background which subscribe, unsubscribe the users or display notifications to them.

If you don’t know about Service Workers, you can use third party sites which provide complete solution for Web Push Notifications like NotifyVisitors

Important Points to note to activate Web Push Notification on your AMP pages.

  1. Your AMP page must pass in validation.
  2. Your site must be on https.
  3. All three files mentioned above must be placed in root folder
Rizwan Ali Khan

Rizwan Ali Khan, the Product Manager at Notifyvisitors is a tech Geek, UI / UX Designer & Creative Writer who likes to learn about new technologies in his free time.

View Comments

Share
Published by
Rizwan Ali Khan

Recent Posts

7 Best Lemnisk Alternatives and Competitors in 2024

Building a strong connection with customers is vital for any business to thrive in a…

1 week ago

What is An AMP Email? How You can use it, Examples, Benefits, Results

Email marketing has always been an effective way for businesses to connect with their audience,…

2 weeks ago

In-App Nudges: A Key to Enhance Mobile User Engagement

Mobile applications are an essential tool for our day-to-day activities. Every user wants mobile applications…

4 weeks ago

7 Best Blueshift Alternatives & Competitors in 2024

Blueshift is a well-regarded customer data platform (CDP) known for its sophisticated AI-driven marketing solutions…

2 months ago

The Impact of Edge Computing on Android App Development

The digital landscape is evolving at lightning speed, and with it comes a new buzzword…

2 months ago

7 Best mParticle Alternatives and Competitors in 2024

Identifying the right customer data platform (CDP) can open new doors for your brand, allowing…

2 months ago