What is AMP?
The Accelerated Mobile Pages (“AMP”) Project is an open source initiative that came out of discussions between publishers and technology companies about the need to improve the entire mobile content ecosystem for everyone – publishers, consumer platforms, creators, and users.
Today,the expectation is that content should load super fast and be easy to explore.The reality is that content can take several seconds to load, or, because the user abandons the slow page, never fully loads at all. Accelerated Mobile Pages are web pages designed to load instantaneously – they are a step towards a better mobile web for all.
AMP employs a number of different techniques to speed up performance; among others - AMP
statically defines the sizes of all its elements, making the entire layout of the document known
early in the rendering process, thus minimizing the amount of size recalculations when loading
Taboola AMP support
Adding the Taboola unit to an AMP page entails inserting an tag into the AMP
markup, for example:
The integration code above creates a widget that is both responsive (has predefined sizes for
each screen size using media queries) and resizable (the widget can signal a size change if
needed - such as in the case of an a/b test focusing on different widget sizes).
|width / height
|Used to define the aspect ratio of the widget.
Relevant only on non-responsive widgets.
Otherwise, if the heights attribute is used, the
values on these attributes are ignored (but
they are still required).
|Defines the type of embed integration, should
be set to ‘taboola’.
|Used to express the run time layout behavior
of the widget.
In the case where the heights attribute is
supplied,the layout attribute can be omitted
and layout=responsive is implied, otherwise
see amp layout system documentation for a
detailed list of lay out options.
|Defines the height of the element in different
responsive breakpoints as a percentage of the
width. if this attribute is not used, the widget
will have a static aspect ratio defined by the
width and the height.
|Publisher identifier as received from Taboola
|Exactly one these attributes should be used.
This attribute classifies and identifies the
content. The attribute name is used to classify
the page type, and the value is used for setting
a unique identifier of the page.
We recommend using a constant value “auto”
which will instruct the widget to use the
canonical URL of the page as a unique
identifier. Otherwise, a unique ID for each
page should be embedded in the markup
server side. (AMP restricts doing this using JS
on the page)
|Mode ID for the particular widget layout, as
received from Taboola representative.
|Sets the placement of the widget, for reporting
|Will be passed to the widget (without the dataprefix) - can be used to pass any parameter
A basic example:
The most simple integration method, in this method the Taboola widget has an aspect ratio of
1X1 (width X height).
It’s up to the page author to provide the correct ratio that fits the aspect ratio of the relevant
In the case where the declared size is different than that of the actual widget, the widget will
attempt to resize the iframe to the optimal height (This method will cause a noticeable
layout recalculation - therefore the recommended method is to use the heights attribute which
pre defines the possible heights).
With responsive behavior using the ‘heights’ attribute:
In this method, the ‘heights’ attribute is used to define the different aspect ratios for different
responsive steps based on the media query expression.
‘layout=responsive’ is implied, and width and height are ignored in this case (but still required
to form a valid AMP syntax).
With optional ‘data-’ parameters:
This example is brought here to demonstrate that any data attribute supported by the
Taboola widget can be added and it will be passed to the underlying Taboola widget and
behave the same as in the non-AMP version.
Differences from the standard Taboola integration
The AMP widget integration is even simpler that the standard, whereas page authors are only
and running the widget in a manner which is least disruptive to the user experience.
Some Taboola features that require modifying the DOM of the page or using fixed layouts
prevent the use of some optional Taboola features on AMP pages. For example, the “Read
More” mobile widget cannot be utilized through AMP.
In addition, since AMP might lazy load the Taboola widget, our page view count will reflect the
page views at which AMP loaded our widget, as opposed to all page views where that page