GuidesCommunity DiscussionAnnouncements
GuidesAnnouncementsCommunity Discussion
GuidesCommunity DiscussionAnnouncementsLog In

AMP Integration

Suggest Edits

Overview

This page explains how to integrate Taboola recommendations within AMP web pages.

🚧

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: Single Page Application
  2. For standard web pages (that are not using AMP), see: JS Tag
  3. For AMP pages, see below (this page).

📘

Your <amp-embed> tags

  1. This page explains how to prepare <amp-embed> tags, using the param values provided by Taboola.
  2. During onboarding, you also received prefilled tags from Taboola. You can copy and paste those 'as is', instead of editing param values.

🚧

New integration?

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

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.

📘

In our sample code, we use <amp-embed> tags.

If you prefer, you can use ` tags instead.

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 IDUI Mode ID - The UI template (layout and properties) for this placement. for this placement, as provided by Taboola:
- E.g. '<<mode>>'.

data-placement

Fill in the placement nameplacement name - A descriptive name for the placement - used for reporting., 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'

(Recommended)
To obtain an automated ID, pass auto:
data-article='auto'

Alternatively, pass your own, internal ID:
data-article='123'

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.

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.

Updated 24 days ago