AMP support

This reference article describes AMP support for web and how to integrate Braze on an AMP page. Accelerated Mobile Pages (AMP) is a Google-backed project designed to improve page load time on mobile devices by enforcing certain standards, including restricting the usage of JavaScript.

As a result, the Braze SDK cannot be loaded onto an AMP page. However, the AMP project does provide a component that supports Web push. The following instructions detail how to set up that component and reference the following documentation on the amp-web-push component.

Step 1: Include AMP web push script

Add the following async script tag to your head:

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

Step 2: Add a subscription and unsubscription widget

You’ll need to add a widget that allows users to subscribe and unsubscribe from push. This should live inside the body of your HTML and can be styled however you see fit.

1
2
3
4
5
6
7
8
9
<!-- A subscription widget -->
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="80">
  <button 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="80">
  <button on="tap:amp-web-push.unsubscribe">Unsubscribe from Notifications</button>
</amp-web-push-widget>

Step 3: Download helper iFrame and permission dialog

The AMP Web Push component works by creating a popup that handles the push subscription. As a result, you’ll need to include a couple of helper files in your project. Download the helper-iframe.html file and permission-dialog.html file and store them on your site.

Step 4: Create a service worker file

Create a service-worker.js file with the following content, and place it in the root directory of your website:

Step 5: Configure the AMP web push HTML element

You’ll now need to add the amp-web-push HTML element to your page. Drop the following HTML code into the body of your document:

1
2
3
4
5
6
7
<amp-web-push
layout="nodisplay"
id="amp-web-push"
helper-iframe-url="FILE_PATH_TO_YOUR_HELPER_IFRAME"
permission-dialog-url="FILE_PATH_TO_YOUR_PERMISSION_DIALOG"
service-worker-url="FILE_PATH_TO_YOUR_SERVICE_WORKER?apiKey={YOUR_API_KEY}&baseUrl={YOUR_BASE_URL}"
>

In particular, the service-worker-URL requires appending your apiKey and baseUrl (https://dev.appboy.com/api/v3) as query parameters.

You should now be configured for push subscription and unsubscription on your AMP page.