Google Amp amp-ad

Last Updated : 01 Oct, 2020

Introduction:

We use this component to make a container to display an ad in AMP HTML files.

Official Site: https://amp.dev/

Required 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>

Attributes:

Placeholder – amp-ad supports a child element with a placeholder attribute. when there is a network problem and the ad is not viewable the placeholder is shown

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

Fallback – amp-ad supports a child element with a fallback attribute. when there is no ad available for the slot this element is shown

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

Example:

<!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>

Output:

My Personal Notes

Related Articles