![[Taboola Web Integrations]](https://files.readme.io/3cb7608-small-7839e39-small-dev-center-logo.png){kind=link}
[Taboola Web Integrations]AMP
Overview
This page explains how to integrate Taboola recommendations within AMP web pages, using the param values provided by Taboola.
Prefilled tagsIf you received prefilled <amp-embed> tags from Taboola, you can copy and paste them 'as is', instead of editing param values.
Non-AMP pagesIf your website includes both AMP and non-AMP pages, you will need to integrate Taboola recommendations for each page type:
- For SPA pages (that are not using AMP), see the SPA integration.
- For standard web pages (that are not using AMP), see the standard integration (aka JS Tag integration).
- 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:
- Add an
<amp-embed>tag, in the location that the placement should display. - 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 <amp-ad> tag, the <amp-embed>\ 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. 'USER.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. 'USER.MODE'. | |
data-placement | Fill in the placement name, as provided by Taboola: - E.g. 'USER.PLACEMENTNAME'. | |
data-target_type | Fill in the target type, as provided by Taboola: - E.g. 'USER.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
- Each placement must have its own
<amp-embed>tag.- On a given page, each
<amp-embed>tag must have unique value fordata-placement. Do not duplicate a tag on the same page.
Custom SegmentsTo target a custom segment - or simply track its performance - you can optionally pass a
csegparam.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='USER.PUBLISHERID'
data-mode='USER.MODE'
data-placement='USER.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?
- In order to provide personalized recommendations for impressions in the EU and California, make sure to implement amp-consent in all your AMP pages.
- Consider implementing a Read More flow. 'Read More' buttons can boost audience engagement significantly.
- If you have not already done so, configure ads.txt.
- Contact Taboola so that we can verify your Taboola integration.
IMPORTANTFailure to implement AMP consent correctly can result in a significant loss of revenue.
See AMP Consent (below) for steps to verify your flow.
Updated 11 months ago