NOTE: The specification of amp-ad
is likely to significantly evolve over time. The current approach is designed to bootstrap the format to be able to show ads.
A container to display an ad.
Ads are loaded like all other resources in AMP documents, with a special
custom element called <amp-ad>
. No ad network provided JavaScript is allowed to run inside the AMP document. Instead the AMP runtime loads an iframe from a
different origin (via iframe sandbox) as the AMP document and executes the ad
network’s JS inside that iframe sandbox.
AMP documents only support ads served via HTTPS.
The <amp-ad>
requires width and height values to be specified like all
resources in AMP. It requires a type
argument that select what ad network is displayed. All data-*
attributes on the tag are automatically passed as arguments to the code that eventually renders the ad. What data-
attributes are required for a given type of network depends and must be documented with the ad network.
<amp-ad width=300 height=250
type="a9"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
</amp-ad>
type
Identifier for the ad network. This selects the template that is used for the ad tag.
src
Optional src value for a script tag loaded for this ad network. This can be used with ad networks that require exactly a single script tag to be inserted in the page. The src value must have a prefix that is whitelisted for this ad network.
data-foo-bar
Most ad networks require further configuration. This can be passed to the network using HTML data-
attributes. The parameter names are subject to standard data attribute dash to camel case conversion. E.g. "data-foo-bar" is send to the ad for configuration as "fooBar".
json
Optional attribute to pass configuration to the ad as an arbitrarily complex JSON object. The object is passed to the ad as-is with no mangling done on the names.
Optionally amp-ad
supports a child element with the placeholder
attribute. If supported by the ad network, this element if shown if no ad is available for this slot.
<amp-ad width=300 height=250
type="foo">
<div placeholder>Have a great day!</div>
</amp-ad>