Taboola AMP Support - Beta

What is AMP?

From the amp faq page:

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 it’s 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 widget.

Taboola AMP support

Adding the taboola widget to an AMP page entails inserting an amp-embed tag into the AMP markup, for example:


<amp-embed width=100 height=100
    type=taboola
    layout=responsive
    heights="(min-width:780px) 64%, (min-width:480px) 98%, (min-width:460px) 167%, 196%"
    data-publisher="amp-demo"
    data-mode="thumbnails-a"
    data-placement="Responsive example - AMP"
    data-article="auto">
</amp-embed>

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 a a/b test focusing on different widget sizes.)

Attributes:

Attribute Name Required / Optional AMP / Taboola Description
width / height Required AMP Used to defined the aspect ratio of the widget. relevant only on non responsive widgets, otherwise, if the heights attribute is used, the values on these attributes is ignored (but they are still required).
type Required AMP Defines the type of embed integration, should be set to ‘taboola’.
layout Optional AMP

Layout is used to express the runtime 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 layout 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
data-video
data-photo
data-search
data-category
data-homepage
data-other
Exactly one of these attributes is required. Taboola

Exactly one these attributes should be us 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-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 data- prefix) - 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 behaviour that best fits all of the widgets responsive steps.

Examples

A basic example:


<amp-embed width=100 height=100
    type=taboola
    layout=responsive
    data-publisher="amp-demo"
    data-mode="thumbnails-a"
    data-placement="Responsive example - AMP"
    data-article="auto">
</amp-embed>

The most simple integration method, in this method the taboola widget have an aspect ratio of 1X1 (width X height). It’s up to the page author to provide the correct ratio that fits the aspect ration of the relevant widget mode.

In the case where the 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 behaviour using the ‘heights’ attribute:


<amp-embed width=100 height=100
   type=taboola
   heights="(min-width:780px) 64%, (min-width:480px) 98%, (min-width:460px) 167%, 196%"
   data-publisher="amp-demo"
   data-mode="thumbnails-a"
   data-placement="Responsive example - AMP"
   data-article="auto">
</amp-embed>

This example is brought here to demonstrate the how 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, in opposed to all page views where that page was loaded.