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 <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.
  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 <head> section of your page, add the following <script> to import amp-ad:

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

Instructions

Notes

data-block-on-consent

When implementing <amp-consent>, 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.

type

Should always be set to 'taboola'.

No editing required.

layout

Should always be set to 'responsive'.

No editing required.

data-publisher

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

Fill in the UI Mode ID for this placement, as provided by Taboola:
- E.g. '<<mode>>'.

data-placement

Fill in the placement name, as provided by Taboola:
- E.g. '<<placementName>>'.

data-target_type

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

Pass 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

If your Taboola account was configured for custom segment targeting, you can optionally pass a cseg param. See: Custom Segments

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.