---
updatedAt: 2025-09-26T12:23:26.000Z
---

# AMP

## Overview

This page explains how to integrate Taboola recommendations within [**AMP**](https://amp.dev/) web pages, using the param values **provided by Taboola**.

> 🚧 Prefilled tags
>
> If you received **prefilled** \<amp-embed> tags from **Taboola**, you can copy and paste them 'as is', instead of editing param values.

> 🚧 Non-AMP pages
>
> If your website includes both **AMP** *and* **non-AMP** pages, you will need to integrate Taboola recommendations for each page type:
>
> 1. For **SPA** pages (that are **not** using AMP), see the [**SPA** integration](https://developers.taboola.com/web-integrations/docs/spa).
> 2. For **standard** web pages (that are **not** using AMP), see the [**standard** integration (*aka* **JS Tag** integration)](https://developers.taboola.com/web-integrations/docs/js-tag).
> 3. For **AMP** pages, see below (this page).

> 🚧 New integration?
>
> If this is a new integration, please provide **Taboola** with a timeframe for launch, so we can plan post-launch QA.

## Supported browsers

> 🚧
>
> Taboola's **AMP** integration is supported for any browser that is **fully** compatible with <a target="_blank" href="https://kangax.github.io/compat-table/es5/">**ES5** (ECMAScript 5)</a>  or higher. This includes all modern web browsers.
>
> **Older** browsers (such as **IE 11**) may encounter problems with **video ads**.

## Import amp-ad

In the \<head> section of your page, add the following \<script> to import `amp-ad`:

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

## Add placement tags

For **each placement** on a given page:

1. Add an `<amp-embed>` tag, in the location that the placement should display.
2. Fill in param values, **as provided by Taboola** (or use the prefilled tag that was sent to you):

```html Placement tag
<!-- Fill in your own param values, as provided by Taboola -->
<!-- When implementing <amp-consent>, include the `data-block-on-consent` param, as shown below. -->
<amp-embed width=100 height=100
  data-block-on-consent='_till_responded'
  type='taboola'
  layout='responsive'
  data-publisher='publisher-id'
  data-mode='mode'
  data-placement='placement'
  data-target_type='mix'
  {page-type}='auto'
  data-url=''>
</amp-embed>
```

### Edit the params

> 🚧
>
> Make sure to fill in **your own** param values, **as provided by Taboola**.

> 📘
>
> Although you can use the \<amp-ad> tag, the \<amp-embed>\ tag is preferred.

<Table align={["left","left","left"]}>
  <thead>
    <tr>
      <th>
        Param/default value
      </th>

      <th>
        Instructions
      </th>

      <th>
        Notes
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        `data-block-on-consent`
      </td>

      <td>
        When implementing \<amp-consent>, this param must be present and set to `'_till_responded'`.
      </td>

      <td>
        Ensures that **Taboola** can still display *contextual* content, even after a user *declines* consent.  

        See: <a href="https://amp.dev/documentation/components/amp-consent/#advanced-predefined-consent-blocking-behaviors" target="_blank">amp-consent</a>  

        ***

        Failure to apply this setting can result in a **significant loss  of revenue**.
      </td>
    </tr>

    <tr>
      <td>
        `type`
      </td>

      <td>
        Should always be set to `'taboola'`.
      </td>

      <td>
        No editing required.
      </td>
    </tr>

    <tr>
      <td>
        `layout`
      </td>

      <td>
        Should always be set to `'responsive'`.
      </td>

      <td>
        No editing required.
      </td>
    </tr>

    <tr>
      <td>
        `data-publisher`
      </td>

      <td>
        Fill in your *alphabetic* Publisher ID, **as provided by Taboola**\
            \- E.g. `'acme-news'`
      </td>

      <td>
        Your Publisher ID is a *unique, alphabetic String*. It *might* contain dashes - but *not* spaces.
      </td>
    </tr>

    <tr>
      <td>
        `data-mode`
      </td>

      <td>
        Fill in the <Glossary>UI Mode ID</Glossary> for this placement, **as provided by Taboola**:\
            \- E.g. `'thumbnails-a'`.
      </td>

      <td>

      </td>
    </tr>

    <tr>
      <td>
        `data-placement`
      </td>

      <td>
        Fill in the <Glossary>placement name</Glossary>, **as provided by Taboola**:\
            \- E.g. `'Below Article Thumbnails'`.
      </td>

      <td>

      </td>
    </tr>

    <tr>
      <td>
        `data-target_type`
      </td>

      <td>
        Fill in the target type, **as provided by Taboola**:\
            \- E.g. `'mix'`.
      </td>

      <td>

      </td>
    </tr>

    <tr>
      <td>
        `{page-type}`
      </td>

      <td>
        **Replace** the **default text** with the relevant page type, **as provided by Taboola**\
            \- E.g. for `data-article`, this line should read: `data-article='auto'`
      </td>

      <td>
        Possible values:\
        `data-video`, `data-article`, `data-photo`, `data-search`, `data-category`, `data-home`.
      </td>
    </tr>

    <tr>
      <td>
        `'auto'`
      </td>

      <td>
        To obtain an automated ID, pass `auto`:\
        `data-article='auto'`
      </td>

      <td>
        Specifies the ID of this page, for the given page type.
      </td>
    </tr>

    <tr>
      <td>
        `data-url`
      </td>

      <td>
        Pass an empty string.
      </td>

      <td>
        Required for legacy reasons. Unless instructed otherwise, pass an empty string.
      </td>
    </tr>
  </tbody>
</Table>

> 🚧 Guidelines
>
> 1. Each placement must have its own `<amp-embed>` tag.
> 2. On a given page, each `<amp-embed>` tag must have **unique** value for`data-placement`. Do **not** duplicate a tag on the same page.

> 📘 Custom Segments
>
> To **target** a custom segment - or simply **track its performance** - you can **optionally** pass a `cseg` param.
>
> For more information, see [Custom Segments](https://developers.taboola.com/web-integrations/docs/custom-segments) - or reach out to your **Taboola Account Manager**.
>
> ***
>
> This flow typically requires **custom development**.

### A sample tag

Using the above, **sample** values, the `<amp-embed>` tag would look like this:

```html Sample only
<!-- Fill in your own param values, as provided by Taboola -->
<!-- When implementing <amp-consent>, include the `data-block-on-consent` param, as shown below. -->
<amp-embed width=100 height=100
  data-block-on-consent='_till_responded'
  type='taboola'
  layout='responsive'
  data-publisher='acme-news'
  data-mode='thumbnails-a'
  data-placement='Below Article Thumbnails'
  data-target_type='mix'
  data-article='auto'
  data-url=''>
</amp-embed>
```

> 🚧
>
> The above code snippet uses **sample values**. Make sure to fill in **your own** values, **as provided by Taboola**.

## What's Next?

1. In order to provide *personalized* recommendations for impressions in the *EU* and *California*, make sure to implement <a href="https://amp.dev/documentation/components/amp-consent/" target="_blank">amp-consent</a> in all your **AMP** pages.
2. Consider implementing a [Read More](https://developers.taboola.com/web-integrations/docs/amp-read-more) flow. 'Read More' buttons can boost audience engagement *significantly*.
3. If you have not already done so, configure [ads.txt](https://developers.taboola.com/web-integrations/docs/ads-txt).
4. Contact **Taboola** so that we can verify your Taboola integration.

> 🚧 IMPORTANT
>
> **Failure** to implement **AMP consent** correctly can result in a **significant loss of revenue**.
>
> See [AMP Consent](https://developers.taboola.com/web-integrations/docs/verify-amp-consent) (below) for steps to verify your flow.