Taboola AMP Support

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
the page, allowing only async JavaScript and lazy loading elements below the fold such as the
Taboola unit.

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).

Attributes:

Attribute Name	Required / Optional	AMP / Taboola	Description
width / height	Required	AMP	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).
type	Required	AMP	Defines the type of embed integration, should be set to ‘taboola’.
layout	Optional	AMP	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.
heights	Optional	AMP	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.
data-publisher	Required	Taboola	Publisher identifier as received from Taboola representative.
data-article	Exactly one of these attributes is required.	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)
data-video
data-photo
data-search
data-category
data-home
data-other
data-mode	Required	Taboola	Mode ID for the particular widget layout, as received from Taboola representative.
data-placement	Required	Taboola	Sets the placement of the widget, for reporting purposes.
data-<any other taboola API parameter>	Optional	Taboola	Will be passed to the widget (without the dataprefix) - can be used to pass any parameter that is accepted by the Taboola JavaScript API.

Note: In a typical integration Taboola support will provide the complete integration code that can be embedded as is into the hosting AMP page. The Taboola representative will optimize the “heights” attribute to create an optimal responsive behavior that best fits all of the widget’s responsive steps.

Examples

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
widget mode.
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
required to include the ‘amp-embed’ tag. AMP handles loading Taboola JavaScript libraries
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
was loaded.