5.添加广告

您的样本article.amp.html页面应该如下：

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script type="application/ld+json">
    {
     "@context": "http://schema.org",
     "@type": "NewsArticle",
     "mainEntityOfPage":{
       "@type":"WebPage",
       "@id":"https://example.com/my-article.html"
     },
     "headline": "My First AMP Article",
     "image": {
       "@type": "ImageObject",
       "url": "https://example.com/article_thumbnail1.jpg",
       "height": 800,
       "width": 800
     },
     "datePublished": "2015-02-05T08:00:00+08:00",
     "dateModified": "2015-02-05T09:20:00+08:00",
     "author": {
       "@type": "Person",
       "name": "John Doe"
     },
     "publisher": {
       "@type": "Organization",
       "name": "⚡ AMP Times",
       "logo": {
         "@type": "ImageObject",
         "url": "https://example.com/amptimes_logo.jpg",
         "width": 600,
         "height": 60
       }
     },
     "description": "My first experience in an AMPlified world"
    }
    </script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

以上是一个简单的页面，这个页面最有趣的事实是它通过AMP验证和Schema.org搜索引擎元数据验证。如果这个网页部署在新闻网站上，那么它将有资格被纳入专门针对AMP内容的新Google搜索转盘中，因此这是我们工作的一个很好的起点。

在我们更改页面之前，让我们开启Chrome开发者工具。当在网站上工作时（尤其是移动网站），在浏览器中测试时模拟移动体验通常是一个好主意。首先，您可以通过菜单>更多工具>开发人员工具在Chrome中打开开发者控制台：

请检查开发者控制台中的JavaScript输出。确保您选择了“控制台”选项卡：

现在点击开发者控制台中的设备模拟按钮。它的图标是一个电话和平板电脑：

在出现的菜单中，将设备设置为“Nexus 5X”：

现在我们可以开始在页面上工作。我们来试试添加一个广告到我们的AMP文章！

AMP中的所有广告均使用amp-ad组件构建。使用此组件，我们可以通过多种方式配置我们的广告，例如宽度，高度和布局模式。不过，许多广告平台需要额外的配置，例如广告网络的帐户ID，应该投放哪个广告或用于定位广告的选项。对于amp-ad，我们只需填写HTML属性所需的各种选项。

看一下双击广告的这个例子：

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/image/static">
</amp-ad>

你可以看到这是一个非常简单的配置。注意type属性，此属性通知您要使用哪个广告平台的amp-ad组件。在这种情况下，我们需要双击平台，因此类型值是doubleclick。

data-slot属性更加独特。在amp-ad中以data-开头的任何属性都是供应商特定的属性。这意味着并不是所有的供应商都必须要求这个特定的属性，如果它被提供，它们也不一定会有反应。例如，将上述双击示例与A9平台的测试广告进行比较：

<amp-ad
  width="300"
  height="250"
  type="a9"
  data-aax_size="300x250"
  data-aax_pubname="test123"
  data-aax_src="302">
</amp-ad>

尝试将上述两个示例添加到<header>标签之后的文章中。刷新页面，您应该会看到出现两个测试广告：

重要提示：您的开发人员控制台可能会出现一些错误，例如“混合内容”或“无法加载XMLHttpRequest”。前者可能与A9广告有关，因为并不是所有的内容都是安全的。对于AMP上投放的所有广告来说，这是一个明显的要求。

让我们来探索一些可以使用双击的选项。尝试将这两个地理位置定位广告配置添加到您的页面：

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/uk">
  <div fallback>No ad appeared because you're not browsing from the UK!</div>
</amp-ad>

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/us">
  <div fallback>No ad appeared because you're not browsing from the US!</div>
</amp-ad>

不幸的是，不能从页面本身的代码来控制地理位置定位。但是，这些测试广告已经在“双击”信息中心中配置，仅在特定国家（特别是英国和美国）展示。

刷新页面并查看。以下屏幕截图是从澳大利亚捕获的，所以广告都不会加载：

上述地理位置定位示例演示了amp-ad对于各种广告平台功能的灵活性。

注意：您可能会注意到，这些amp广告代码中有额外的div标签，其中有一个名为fallback的属性。你能猜测fallback属性是什么意思？当父元素无法成功加载时，它通知AMP的加载系统仅显示该元素的内容。意思是父元素落在子元素上 - 因此术语为“回退”。

译者（位于中国）测试时amp-ad并未成功加载显示，原因可能为网络问题。

Failed to load resource:amp-ad-0.1.js  net::ERR_CONNECTION_TIMED_OUT

以下是当前支持的广告网络：

有关最新支持的广告平台的信息，请务必查看AMP广告组件的文档页面。

在下一章中，我们将探讨更先进的AMP组件以及如何将它们纳入AMP文档。

注意：没有广告网络允许JavaScript在AMP文档中运行。相反，AMP运行时将来自不同来源的iframe（通过iframe沙箱）作为AMP文档加载，并在该iframe沙箱内执行广告网络的JS。

重要提示：amp-ad的规范可能会随着时间的推移而显着演变。目前的方法旨在引导格式以展示广告。

Previous4.学习AMP核心部件Next6.用扩展组件扩大内容

Last updated