Overview

AMP (Accelerated Mobile Pages) requires a specialized integration approach due to its restricted JavaScript environment and unique component architecture. This guide provides step-by-step instructions for implementing Taboola Web Push on AMP pages.

Step 1: Include the AMP Web Push script

Add the amp-web-push component by including the following script in the <head> section of your AMP pages. Place it below the primary AMP runtime script.

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

Here is an example of how it should look on your web page:

<!doctype html>
<html ⚡>
  <head>
    <title>My AMP Page</title>
    <!-- The primary AMP runtime -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <!-- Load the AMP Web Push extension -->
    <script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>
  </head>
  <body>
    <h1>Hood engage amp poc</h1>
  </body>
</html>

Step 2: Configure the AMP Web Push extension

The amp-web-push component requires 3 files:

Helper Iframe (helper-iframe.html) - Manages communication between AMP and the Service Worker.
Permission Dialog (permission-dialog.html) - Prompts users to grant notification permissions.
Service Worker (sw.js) - Handles background push logic.

Obtain preconfigured files

Your Taboola account manager will provide you with publisher-specific versions of helper-iframe.html and permission-dialog.html (already configured with your Push Key and Tag Key).

Host these files at the root of your domain over HTTPS.

Example:

https://mydomain.com/helper-iframe.html
https://mydomain.com/permission-dialog.html

Add the service worker

Create a file called sw.js that contains a single line of code:

importScripts("https://cdn.taboola.com/webpush/tsw_amp.js");

Upload sw.js to the root of the domain.
Verify that sw.js was uploaded successfully:
1. Using a browser, enter your domain path, followed by "sw.js".
  
  E.g. https://mydomain.com/sw.js
2. Check that the contents of sw.js display in your browser. You should see a single line of code: importScripts("https://cdn.taboola.com/webpush/tsw_amp.js");

Add the AMP Web Push component

Within the <body> section of your AMP pages, insert the amp-web-push element code.

Make sure to replace https://mydomain.com/ with your actual domain.

<amp-web-push
  id="amp-web-push"
  layout="nodisplay"
  helper-iframe-url="https://mydomain.com/helper-iframe.html"
  permission-dialog-url="https://mydomain.com/permission-dialog.html"
  service-worker-url="https://mydomain.com/sw.js">
</amp-web-push>

Step 3: Implement subscription and unsubscription widgets

To allow users to manage their subscription status, incorporate subscription and unsubscription widgets into your AMP pages.

Define widget styles

Add the following CSS within the <style amp-custom> section to style the subscription buttons (you can customize it as needed):

<style amp-custom>
  .push-button {
    background:#007bff;color:#fff;
    padding:0.5rem 1rem;border:none;
    border-radius:4px;font-size:1rem;
    cursor:pointer;
  }
</style>

Add the subscription and unsubscription widgets

Place the following code within the <body> section where you want the subscription options to appear:

<!-- Widget shown to unsubscribed users -->
<amp-web-push-widget
  visibility="unsubscribed"
  layout="fixed"
  width="200"
  height="60">
  <button class="push-button" on="tap:amp-web-push.subscribe">Enable Notifications</button>
</amp-web-push-widget>

<!-- Widget shown to subscribed users -->
<amp-web-push-widget
  visibility="subscribed"
  layout="fixed"
  width="200"
  height="60">
  <button class="push-button" on="tap:amp-web-push.unsubscribe">Disable Notifications</button>
</amp-web-push-widget>

<!-- Widget shown to users who have blocked notifications -->
<amp-web-push-widget
  visibility="blocked"
  layout="fixed"
  width="250"
  height="80">
  Looks like you've blocked notifications!
</amp-web-push-widget>

These widgets will display the appropriate button based on the user's subscription status.

Full AMP page implementation example

index.html

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <title>My AMP Page</title>
    <link rel="canonical" href="https://mydomain.com/index.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>

    <style amp-custom>
      .push-button {
        background: #007bff;
        color: #fff;
        padding: 0.5rem 1rem;
        border: none;
        border-radius: 4px;
        font-size: 1rem;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <h1>Welcome to My AMP Page</h1>

    <!-- AMP Web Push Component -->
    <amp-web-push
      id="amp-web-push"
      layout="nodisplay"
      helper-iframe-url="https://mydomain.com/helper-iframe.html"
      permission-dialog-url="https://mydomain.com/permission-dialog.html"
      service-worker-url="https://mydomain.com/sw.js">
    </amp-web-push>

    <!-- Subscribe Widget -->
    <amp-web-push-widget
      visibility="unsubscribed"
      layout="fixed"
      width="200"
      height="60">
      <button class="push-button" on="tap:amp-web-push.subscribe">Enable Notifications</button>
    </amp-web-push-widget>

    <!-- Unsubscribe Widget -->
    <amp-web-push-widget
      visibility="subscribed"
      layout="fixed"
      width="200"
      height="60">
      <button class="push-button" on="tap:amp-web-push.unsubscribe">Disable Notifications</button>
    </amp-web-push-widget>

    <!-- Blocked Widget -->
    <amp-web-push-widget
      visibility="blocked"
      layout="fixed"
      width="250"
      height="80">
      Looks like you've blocked notifications!
    </amp-web-push-widget>
  </body>
</html>

sw.js

importScripts("https://cdn.taboola.com/webpush/tsw_amp.js");

helper-iframe.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Push Registration Helper</title>
  </head>
  <body>
    <!-- Facilitates subscription communication with AMP -->
    <script
      src="https://sdk.ocmcore.com/sdk/ht-latest.js"
      data-amp="1"
      data-disable-autoconf="1"
      data-push_key="BP5MgUSXuymPiKowSZbXTbzrX3_LAis6ZcpABbDPqJUnPSNIZ7khbIAyEexVkAa14FeFiicOGy7ZPkDMZ-gD4Nc"
      data-tag="NjY4PON0NBS_poQ2gmBxNDY4MjE0NjMh"
      crossorigin="anonymous">
    </script>
  </body>
</html>

permission-dialog.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Permission Dialog</title>
    <style>
      body {
        font-family: sans-serif;
        text-align: center;
        padding: 2rem;
      }
      button {
        margin: 0.5rem;
        padding: 0.5rem 1rem;
        font-size: 1rem;
      }
    </style>
    <script>
      window.HoodEngage = [];
      function Hood() { HoodEngage.push(arguments); }
      // Automatically request permission
      Hood('pushrequestpermission');
    </script>
    <script
      src="https://sdk.ocmcore.com/sdk/ht-latest.js"
      data-amp="1"
      data-disable-autoconf="1"
      data-tag="NjY4PON0NBS_poQ2gmBxNDY4MjE0NjMh"
      crossorigin="anonymous">
    </script>
  </head>
  <body>
  </body>
</html>

🚧
Publisher-specific configuration
The helper-iframe.html and permission-dialog.html files shown above contain sample keys. Your Taboola account manager will provide you with files configured with your actual Push Key and Tag Key.