Overview

This page explains how to integrate Taboola recommendations within AMP web pages, using the param values provided by Taboola.

🚧

Prefilled tags

If you received prefilled 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.
  2. For standard web pages (that are not using AMP), see the standard integration (aka JS Tag integration).
  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 ES5 (ECMAScript 5) 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 section of your page, add the following :

<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):
<!-- 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 tag, the` tag is preferred.

Param/default valueInstructionsNotes
data-block-on-consentWhen implementing , this param must be present and set to '_till_responded'.Ensures that Taboola can still display contextual content, even after a user declines consent.

See: amp-consent

----
Failure to apply this setting can result in a significant loss of revenue.
typeShould always be set to 'taboola'.No editing required.
layoutShould always be set to 'responsive'.No editing required.
data-publisherFill in your alphabetic Publisher ID, as provided by Taboola
- E.g. '<<publisherID>>'
Your Publisher ID is a unique, alphabetic String. It might contain dashes - but not spaces.
data-modeFill in the UI Mode ID for this placement, as provided by Taboola:
- E.g. '<<mode>>'.
data-placementFill in the placement name, as provided by Taboola:
- E.g. '<<placementName>>'.
data-target_typeFill in the target type, as provided by Taboola:
- E.g. '<<targetType>>'.
{page-type}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'
Possible values:
data-video, data-article, data-photo, data-search, data-category, data-home.
'auto'To obtain an automated ID, pass auto:
data-article='auto'
Specifies the ID of this page, for the given page type.
data-urlPass an empty string.Required for legacy reasons. Unless instructed otherwise, pass an empty string.

🚧

Guidelines

  1. Each placement must have its own <amp-embed> tag.
  2. On a given page, each <amp-embed> tag must have unique value fordata-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 - 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:

<!-- 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='<<publisherID>>'
  data-mode='<<mode>>'
  data-placement='<<placementName>>'
  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 amp-consent in all your AMP pages.
  2. Consider implementing a Read More flow. 'Read More' buttons can boost audience engagement significantly.
  3. If you have not already done so, configure 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 (below) for steps to verify your flow.