Native Opt-in Integration for Accelerated Mobile Pages (AMP)
- 21 Mar 2024
- 3 Minutes to read
Native Opt-in Integration for Accelerated Mobile Pages (AMP)
- Updated on 21 Mar 2024
- 3 Minutes to read
Article Summary
Share feedback
Thanks for sharing your feedback!
AMP is an open source HTML framework created by Google to make pages load faster on mobile devices. Due to special JavaScript restrictions on AMP pages, additional steps are required to integrate Insider Service Worker for native opt-in.
your title goes here
Note: Only Android devices support web push for AMP. iOS devices support AMP but do not support web push.
You can start integrating your native opt-in on your accelerated mobile pages by completing the following steps:
1. Obtain a Valid SSL Certificate
Because all pages using native opt-in must have HTTPS support, you must have a valid SSL certificate.
2. Complete Insider Tag Integration
Before proceeding with native opt-in integration, make sure Insider Tag is properly integrated. For assistance, visit Insider Tag Integration.
3. Install Insider Service Worker
You can download the Insider Service Worker file from the Insider website.
Follow this link. Right-click and Save As to download the Insider Service Worker file (insider-sw-sdk.js). Upload the Insider Service Worker file to your domain subpath. Do not modify the name of the file or the content.
Your title goes here
Once you add the file on your end, you should not change its location.
your title goes here
Confirm Insider Service Worker is accessible: www.mywebsite.com/insider/insider-sw-sdk.js.
4. Configure Integration Settings
To complete the configuration, go to Web Push > Settings > Integration to add your service worker path.
5. Add AMP Web Push Script
Add the following script to all of your webpages.
<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>
6. Set up AMP Web Push files on your website
- Copy the code in helper-iframe.html. Save it in an .html file named helper-iframe.html.
- Copy the code in permission-dialog. Save it in an .html file named permission-dialog.html.
your title goes here
Note: You must use the exact file names provided above. Otherwise, they will not match.
your title goes here
The content in the permission-dialg.html is an example, so the basic HTML can be edited, but the scripts must not be removed or updated.
- Add these files, to the root of your website.
- Add the following code in your AMP site’s <body></body> tag. (This code will not function on non-AMP pages.)
<amp-web-push
id="amp-web-push"
layout="nodisplay" helper-iframe-url="https://YOURDOMAIN.COM/helper-iframe.html?partnerName=PARTNER_NAME"
permission-dialog-url="https://YOURDOMAIN.COM/permission-dialog.html?partnerName=PARTNER-NAME&lang=en_US&isMobile=true&=true&VAPIDPublicKey=PARTNER_VAPID_PUBLIC_KEY"
service-worker-url="https://YOURDOMAIN.COM/insider-sw-sdk.js"
></amp-web-push>- Make sure to replace YOURDOMAIN.COM with your current domain.
- For PARTNER_NAME and PARTNER_VAPID_PUBLIC_KEY, contact Insider team.
- The language parameter on permission-dialog.html is important for the tokens you’ll collect. It must match the language parameter set up for your push notifications. For example, if you collect tokens in language en_US and you try to send your push notification in language de_DE, no user will receive any push notification.
- If you have added the Insider Service Worker file into any folder other than the root folder, make sure to write the complete path on the service-worker-url parameter.
7. Set up your widget
Once you implement native opt-in for AMP on your website, you need to configure AMP web push widget. This widget allows your users to opt in for web push notifications on AMP.
Add the following style tag in the <head></head> tag on your website. (You can manipulate the CSS as per your design.)
<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 .subscribe-icon {
margin-right: 10px;
}
amp-web-push-widget button.subscribe:active {
transform: scale(0.99);
}
</style>
8. Set up your widget buttons
Your widget comes standard with two buttons. The first button represents users who are not subscribed. The second button represents users who are subscribed. You can customize your buttons but the default attributes below should not be removed.
<!-- 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/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Vic2NyaWJlLWljb24iIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMS44NCAxOS44ODdIMS4yMnMtLjk0Ny0uMDk0LS45NDctLjk5NWMwLS45LjgwNi0uOTQ4LjgwNi0uOTQ4czMuMTctMS41MTcgMy4xNy0yLjYwOGMwLTEuMDktLjUyLTEuODUtLjUyLTYuMzA1czIuODUtNy44NyA2LjI2LTcuODdjMCAwIC40NzMtMS4xMzQgMS44NS0xLjEzNCAxLjMyNSAwIDEuOCAxLjEzNyAxLjggMS4xMzcgMy40MTMgMCA2LjI2IDMuNDE4IDYuMjYgNy44NyAwIDQuNDYtLjQ3NyA1LjIyLS40NzcgNi4zMSAwIDEuMDkgMy4xNzYgMi42MDcgMy4xNzYgMi42MDdzLjgxLjA0Ni44MS45NDdjMCAuODUzLS45OTYuOTk1LS45OTYuOTk1SDExLjg0ek04IDIwLjk3N2g3LjExcy0uNDkgMi45ODctMy41MyAyLjk4N1M4IDIwLjk3OCA4IDIwLjk3OHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=">
</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">
You are already subscribed to notifications.
</amp-web-push-widget>- on="..." attribute should not be removed. If it is removed, the button will have no function.
- If you do not want to use a button, you can also use the <a></a> tag inside amp-web-push-widget tag by adding on="..." attribute.
Was this article helpful?