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