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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.

My Personal Notes

Related Articles

Google Amp amp-ad