Table of contents
You have an AMP site and want to monetize it with Web Push Notification? Here, we will guide you through the process of integrating the Notifadz solution on an AMP site.
This integration will be done in 5 steps:
1. Add the amp_serviceworker.js file
Create a file at the root of your website that will contain the following lines:
var Version = '6.4.1';
importScripts('<https://notifpush.com/amp_serviceworker.js>');
importScripts('<https://notifpush.com/serviceworker.js>');
Your amp_serviceworker.js file should look like this (Version can be different):
You need to download the files below and add them to the root of your website. Clicking on the link should automatically download the file.
<aside> 💡 Good to know! Access the links and press CTRL+S on your keyboard to save the page as an HTML file.
</aside>
Once you've completed this step, they should be accessible from:
For all AMP pages on your site that you'd like to enable Web Push Notifications, include the following script within the <head> section of your AMP pages:
<script async custom-element="amp-web-push" src="<https://cdn.ampproject.org/v0/amp-web-push-0.1.js>"></script>');
<amp-web-push
id="amp-web-push"
layout="nodisplay"
helper-iframe-url="<https://PUBLISHERDOMAIN.COM/ampMyHelper.html?setIds=PUBLISHER-IDS>"
permission-dialog-url="<https://PUBLISHERDOMAIN.COM/ampDialog.html?setIds=PUBLISHER-IDS>"
service-worker-url="<https://PUBLISHERDOMAIN.COM/amp_serviceworker.js?setIds=PUBLISHER-IDS>"
>
</amp-web-push>
In the above code, you have to change PUBLISHERDOMAIN.COM with your domain and PUBLISHER-IDS with the IDS of your collect script that you can find on your Notifadz dashboard.
Click on the "Domains" tab, then on the "Manage my templates" submenu:
Then click on the pictogram “Scripts” located on the right of the table:
.png)
The following page appears. Copy the setIds and paste it in the place of the PUBLISHER-IDS of your AMP site.
On AMP, the opt-in box can only be triggered by a user action. Therefore, you need to provide them with a button to click on that will trigger the action.
Within the <head> tag, include the following CSS code:
<style amp-custom="">
amp-web-push-widget p {
text-align: center;
width: 100%;
}
amp-web-push-widget p.subscribe {
position: fixed;
bottom: 30px;
left: 0;
}
amp-web-push-widget button.subscribe {
display: inline-flex;
align-items: center;
border-radius: 15px;
border: 0;
box-sizing: border-box;
margin: 0;
padding: 12px 20px;
cursor: pointer;
outline: none;
font-size: 1em;
font-weight: normal;
background: #135de4;
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 .subscribe-icon {
margin-right: 10px;
width: 64px;
height: 64px;
}
amp-web-push-widget button.subscribe:active {
transform: scale(1.2);
}
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: 1em;
font-weight: normal;
background: transparent;
color: #c8c8c8;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>
Next, add the following code to your body/content where you want the UI buttons to appear.
<!-- Subscribe button start -->
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="80">
<p class="subscribe"><button on="tap:amp-web-push.subscribe" class="subscribe">
<amp-img class="subscribe-icon" width="22" height="24" layout="fixed"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAAAsSAAALEgHS3X78AAAAAXNSR0IArs4c6QAABKBJREFUWEdjZBhkgBGfe9TV1RXV1dXVN23atIMa7vbz8/O4CQH3cZmH1UFCQkJ83d3dnfHx8SnMzMwsRkZG2ufPn7+GwxAOT09PO0ZGRqazZ88efvny5Vds6gwNDbXOnTt39e/fv38WLlw4p7S0tPzdu3ef0NViOEhJSUlu165du5SVldU/f/78cdq0aZMrKioaGBgY/qJrlpaWFj506NBxJSUlVZDcs2fPHjs7O7vcuHHjFhZHMXd0dDRkZWXl8vLy8t++ffuGh4eH+7179x4hq0VxkKioKM/Ro0dPqaqqah44cGB3REREzMuXL19hMZzRycnJtrS0tMjDw8MfWf78+fOnKyoqKnbt2rWfgYHhP7pecXFxsRUrVixxcHBwvXXr1jUbGxvz169ff4GpQ3HQpEmTenNzc4sOHTq0197e3pOBgeE3uoHu7u6OPT09fTo6Ogb40tXly5fPFxcXF+7evfsgFnWsBw8e3G5nZ+c8efLkvry8vGIMB0lISIg+fPjw0d+/f/+qq6urPX78+BmaQYwdHR1NZWVl1YyMjHgzA0zf/////3d2drZUVlbWo4eWrKys1M2bN28xMzMzy8vLy7148eI1SB/c4MzMzJRp06bNnj9//sykpKQMdF9NnDgR5JNCcnLb5MmTJ2DTO2/evBmJiYnp2dnZILvnojhIR0dHs6WlpamioqIaPVEmJCREzZ8/fyk5joHpSUxMjF6wYMEyZDM0NDTUurq62qqqqmqvXLlyHcVBuCwTERHhvXHjxl1hYWFRShz09u3b1xoaGspv3rz5jM8cgmmhtLS0sKurq48Sx8D0VlZWFnV0dPRT5KBLly6d1dXVNaKGgy5fvnxOT0/PmGwHgcqlly9ffgSVwtRw0P////+JiYkJ4Is2vFGmr6+vfeHChSvUcAzMDH19fd1Lly7hNBOvg6ytrU2OHDlympoOsrGxMT169OgZXGbidZCVlRVI8ylqOsja2trs2LFjOD056iArKyvz48eP4wx1QmnI4siRI8epGWX29vbWhw4dOkZWGvL39/fasGHDVmo6KDg42H/dunWbyHJQcXFxfk9PzwRqOqiysrKko6OjlywHbdq0aa2vr28QNR20efPmdX5+fsEkOwjWPmJjY+OgpoN+/vz5HdRMfvbs2Rts5uJM1DNmzJiUnp6eS03HwMyaMmVKP6hlSrSDQIl5/fr1m6lVh6Fb/O/fv78BAQG+mzdv3o4uhxFCgYGBPkuXLl3JycnJRYvQgZn5/fv3b9HR0eHr16/fgmwPioNA7d/S0tJKWoUMugdBtX9vb297aWlpDUwO7iBxcXHu+/fvv+Dk5OShZcigm/3t27cvSkpKErAOJka/jIeHh5ueDvry5ctXnP0yejqE5HIIn+NSU1MTuru78ZbgFRUVRTNmzJhHqicJNvKxGWhra2t26NChk/gss7OzMz98+DDJbSmyHARyyLp165YHBgZGYHPUhg0bVuKSIxRiZDuIgYGBY+HChZNjY2OTYMUEKBsvXrx4Xnx8PKiE/0HIcqJLalIMUlZWljUzMzMD6Tl58uRp9OEVUswCqaUkhEi1iyj1AD5LzTShDnHtAAAAAElFTkSuQmCC">
</amp-img>
Subscribe to notifications
</button></p>
</amp-web-push-widget>
<!-- Subscribe button end -->
<!-- Unsubscribe button start -->
<amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="80">
<p><button on="tap:amp-web-push.unsubscribe" class="unsubscribe">Unsubscribe from notifications</button></p>
</amp-web-push-widget>
<!-- Unsubscribe button end -->
Here is a preview of what the button looks like on the AMP page:
.png)
<aside> 💡 Some notes regarding the button placement :
Congratulations 🥳
Your integration is complete: you can start collecting subscribers on your AMP site and monetizing them!
<aside> ➡️ Next step: Monetization Health Center
</aside>
Do you have any questions?
We are here to help!