DoubleClick AMP Story Ads
Introduction
In an AMP story, you cannot put an amp-ad directly onto the page, instead, all ads are fetched and displayed by the amp-story-auto-ads extension.
For the complete documentation please see our documentation on GitHub.
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://amp.dev/documentation/examples/advertising-analytics/doubleclick_amp_story_ads/index.html">
<meta name="viewport" content="width=device-width">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>DoubleClick AMP Story Ads</title>
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
Setup
Import the amp-story-auto-ads component.
<script async custom-element="amp-story-auto-ads" src="https://cdn.ampproject.org/v0/amp-story-auto-ads-0.1.js"></script>
Configuration
Include the amp-story-auto-ads tag on your page.
It's first child should be a script tag with a JSON configuration object that contains details for how ads should be fetched and displayed. ad-attributes is a map of key-value pairs, which correspond to the attributes of the amp-ad element to be inserted.
For ads served from DoubleClick one should set "type": "doubleclick" and "data-slot" to the full path of the ad unit with the network code and unit code.`
<amp-story-auto-ads>
<script type="application/json">
{
"ad-attributes": {
"type": "doubleclick",
"data-slot": "/30497360/a4a/amp_story_dfp_example"
}
}
</script>
</amp-story-auto-ads>
See the full example below:
如果此页面上的说明未能涵盖您的所有问题，欢迎与其他 AMP 用户取得联系，讨论您的具体用例。
前往 Stack Overflow 一项无法解释的功能？AMP 项目强烈鼓励您参与并做出贡献！我们希望您能成为我们开放源代码社区的持续参与者，但我们也欢迎您对所热衷问题做出一次性贡献。
编辑 GitHub 上的示例