Taboola Web Push AMP Implementation Guide

1. Include the AMP Web Push Script

Incorporate the amp-web-push component by adding the following script within the <head> section of your AMP pages. It should be placed below the <script> tag of the primary AMP runtime script.

This is the script element to add:

<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>

2. Configure the AMP Web Push Extension

The amp-web-push component requires three 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.

Steps to Implement

a. 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). These files are typically linked to:

https://cdn.taboola.com/webpush/amp_publishers_components/<PUBLISHER_ID>/iframe-helper.html

https://cdn.taboola.com/webpush/amp_publishers_components/<PUBLISHER_ID>/permission-dialog.html

Download these files and host them at the root of your domain over HTTPS.

Example:

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

b. Add the Service Worker

Create a file called sw.js with the following content:
```
importScripts("https://cdn.taboola.com/webpush/tsw_amp.js");
```
Upload sw.js to the root of your domain.
Verify that sw.js was uploaded successfully:
- Using a browser, navigate to https://mydomain.com/sw.js
- Confirm that the file contents display in your browser

c. Add the AMP Web Push Component

Within the <body> section of your AMP pages, insert the amp-web-push element. 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>

3. Implement Subscription and Unsubscription Widgets

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

a. Define Widget Styles

Add the following CSS within the <style amp-custom> section:

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

b. 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.

4. 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>
  <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); }
    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>