Google AMP amp-ad用法及代碼示例

介紹：

我們使用此組件製作一個容器，以AMP HTML文件顯示廣告。

所需腳本：

在標題中導入amp-ad組件

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"> 
</script>

屬性：

Placeholder -amp-ad支持帶有占位符屬性的子元素。如果出現網絡問題並且看不到廣告，則會顯示占位符

<amp-ad width="100" height="100"> 
  <div placeholder>No geeky ads to show</div> 
</amp-ad>

倒退-amp-ad支持具有後備屬性的子元素。如果該廣告位沒有可用的廣告，則顯示此元素

<amp-ad width="100" height="100"> 
  <div fallback>geeks for geeks has no ad available at the moment</div> 
</amp-ad>

例：

<!doctype html> 
<html ⚡> 
<head> 
<meta charset="utf-8"> 
  <title>amp-ad</title> 
  <script async src= 
          "https://cdn.ampproject.org/v0.js"> 
  </script> 
  <!-- Import the `amp-ad` component in the header. -->
  <script async custom-element="amp-ad" 
          src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"> 
  </script> 
  <link rel="canonical" 
        href= 
"https://amp.dev/documentation/examples/components/amp-ad/index.html"> 
  <meta name="viewport" 
        content="width=device-width,  
                 minimum-scale=1,  
                 initial-scale=1"> 
  <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> 
</head> 
<body> 
<h3>geeksforgeeks amp | ad<h3> 
  <!-- 
    `amp-ad` requires `width` and  
   `height` values. Select an ad network 
     via the type argument. 
  -->
  <amp-ad width="300" 
          height="250" 
          type="a9"
          data-amzn_assoc_ad_mode="auto" 
          data-divid= 
 "amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5" 
          data-recomtype="async" 
          data-adinstanceid= 
          "fe746097-f142-4f8d-8dfb-45ec747632e5"> 
  </amp-ad> 
  
  <!-- Placeholder-->
  <!-- 
    Optionally `amp-ad` supports a child  
element with the `placeholder` attribute. 
    If supported by the ad network,  
this element is shown until the ad is available 
    for viewing. 
  -->
  <amp-ad width="300"
          height="200"
          type="doubleclick"
          data-slot="/4119129/doesnt-exist"> 
    <div placeholder> 
      <b> gfg Placeholder here!!!</b> 
    </div> 
  </amp-ad> 
  
  <!--Fallback-->
  <!-- 
    `amp-ad` supports a child element  
with the `fallback` attribute. 
    If supported by the ad network, this  
element is shown if no ad is available  
    for this slot. 
  -->
  <amp-ad width="300"
          height="200" 
          type="doubleclick" 
          data-slot="/4119129/doesnt-exist"> 
    <div fallback> 
      <p>No ad</p> 
    </div> 
  </amp-ad> 
 </body> 
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自somsagar2019大神的英文原創作品 Google Amp amp-ad。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。