AMP Integration
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:
- For SPA pages (that are not using AMP), see: Single Page Application
- For standard web pages (that are not using AMP), see: JS Tag
- For AMP pages, see below (this page).
Your <amp-embed> tags
- This page explains how to prepare
<amp-embed>
tags, using the param values provided by Taboola.- 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:
- 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.
In our sample code, we use
<amp-embed>
tags.If you prefer, you can use ` tags instead.
Param/default value | Instructions | Notes |
---|---|---|
| When implementing <amp-consent>, this param must be present and set to | 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. |
| Should always be set to | No editing required. |
| Should always be set to | No editing required. |
| Fill in your alphabetic Publisher ID, as provided by Taboola | Your Publisher ID is a unique, alphabetic String. It might contain dashes - but not spaces. |
| Fill in the UI Mode IDUI Mode ID - The UI template (layout and properties) for this placement. for this placement, as provided by Taboola: | |
| Fill in the placement nameplacement name - A descriptive name for the placement - used for reporting., as provided by Taboola: | |
| Fill in the target type, as provided by Taboola: | |
| Replace the default text with the relevant page type, as provided by Taboola | Possible values: |
| (Recommended) Alternatively, pass your own, internal ID: | Specifies the ID of this page, for the given page type. |
| 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.
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?
- 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.
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