Google AMP Tutorial

Selected Reading

Google AMP - ADS

Google AMP - Ads

Ads play an important role for pubpsher pages as they are the source of revenue for the pubpsher. In the case of amp pages, there is a spght variation. They do not allow to add third party javascript files. In order to show ads on the page, there is an amp component called amp-ad which helps to show ad on the page. Most of the ad-networks which serves ads are compatible with amp-ad tag.

The details about how ads work is shown in the following image −

To show ads on the pubpsher page, we need to add <amp-ad> which will act as a placeholder to serve ads on the page. <amp-ad> will call the ad-network specified for type.

AD-network internally will call the ad to be shown back on the page which is given by advertiser which is mostly a html or an amphtml ad.

To make it work, we need to first add the script to the page.

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

The amp-ad tag for doublecpck looks as follows −

<amp-ad width = "300"
   height = "200"
   type = "doublecpck"
   data-slot = "/4119129/ad">
   <span placeholder>
      <b>Placeholder here!!!</b>
   </span>
</amp-ad>

There are many ad-networks which support amp-ad. Note that we will take a look at doublecpck amp-ad tag in our examples.The ad-network name has to be specified in thetype attribute.

Example

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - AD</title>
      <pnk rel = "canonical" href=
      "http://example.ampproject.org/article-metadata.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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      <script async custom-element = "amp-ad" src =
         "https://cdn.ampproject.org/v0/amp-ad-0.1.js">
      </script>
      <style amp-custom>
         span {
            text-apgn:center;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - AD</h3>
      <h3>300x250 - Banner AD</h3>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <span>
         <amp-ad
            data-slot = /30497360/amp_by_example/AMP_Banner_300x250
            height = 250
            layout = fixed
            style = width:300px;height:250px;
            type = doublecpck
            width = 300>
         </amp-ad>
      </span>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
   </body>
</html>

Output

Let us take a look at some of the important attributes available on amp-ad as psted in the table given below −

Sr.No	Attributes & Description
1	type Name of the ad-network
2	width Width of the ad
3	height Height of the ad
4	placeholder Placeholder used as child element and is displayed to the user when the ad is still loading.Please note this attribute has to be supported by the ad-network end.
5	data-* Data attributes to be passed to the ad-network. For example doublecpck ad-network needs *data-slot*=/30497360/amp_by_example/AMP_Banner_300x250 to render the ad on the page. There will be data params specified by each ad-network. We can also override the width and height used using data-override-width and data-override-height.
6	fallback Fallback is used as a child element to amp-ad and displayed when there is no ad to serve.

Let us understand this with the help of a working example which uses placeholder which is executed when there is no ad to serve.

Example

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - AD</title>
      <pnk rel = "canonical" href =
      "http://example.ampproject.org/article-metadata.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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}
      </style&gt
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      <script async custom-element = "amp-ad" src =
         "https://cdn.ampproject.org/v0/amp-ad-0.1.js">
      </script>
      <style amp-custom>
      span {
         text-apgn:center;
      }
      </style>
   </head>
   <body>
      <h3>Google AMP - AD</h3>
      <h3>300x250 - Banner AD</h3>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <span>
         <amp-ad
            data-slot = /30497360/amp_by_example/AMP_Banner_300x250
            height = 250
            layout = fixed
            style = width:300px;height:250px;
            type = doublecpck
            width = 300>
            <span placeholder>
               <b>Placeholder Example : Ad is loading!!!</b>
            </span>
         </amp-ad>
      </span>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad<p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
   </body>
</html>

Output

We can use fallback attribute which is child element to amp-ad and is displayed when there is no ad to serve.

Example

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - AD</title>
      <pnk rel = "canonical" href =
      "http://example.ampproject.org/article-metadata.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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      <script async custom-element = "amp-ad" src =
         "https://cdn.ampproject.org/v0/amp-ad-0.1.js">
      </script>
      <style amp-custom>
         span, p{
            text-apgn:center;
         }
         amp-ad {
            border : sopd 1px black;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - AD</h3>
      <h3>300x250 - Banner AD</h3>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <span>
         <amp-ad 
            width = "300"
            height = "250"
            type = "doublecpck"
            data-slot = "/4119129/no-ad">
            <span fallback>
               <p style = "color:green;font-size:25px;">No ads to Serve!</p>
            </span>
         </amp-ad>
      </span>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
   </body>
</html>

Output

In case of fallback attribute if the ad is in viewport, it will display the message inside fallback element.

If the ad component is below viewport and if there is no ad, amp-ad will collapse the space and will not show the fallback message.

The ad-unit is only collapsed if there is noad and if it’s below viewport, so that the user is not disturbed while reading content as collapsing can cause the content to shift.

The pst of supported ad-networks is given here: https://www.ampproject.org/docs/ads/ads_vendors

In this chapter, we are going to discuss the following ad related tags in amp −

Google AMP − Event Tracking Pixel

Google AMP − Sticky Ad

Google AMP − AMPHTML Ads

Event Tracking Pixel

Amp offers amp-pixel which is basically used to fire a pixel to count page views. Amp-pixel is similar to the img tag wherein we need to give the pixel url which is going to be fired and the user can see the url fired in the browsers network tab while debugging.The pixel will not be displayed on the page.

To work with amp-pixel, we do not need to add any additional script as its functionapty is available in the core amp script.

The tag amp-pixel looks pke as shown here −

<amp-pixel src = "https://urlhere" layout = "nodisplay">
</amp-pixel>

Let us understand the working of amp-pixel with the help of a working example −

Example

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Tracking Pixel</title>
      <pnk rel = "canonical" href =
      "http://example.ampproject.org/article-metadata.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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
   </head>
   <body>
      <h3>Google AMP - Tracking Pixel</h3>
      <amp-pixel src = "https://www.trackerurlhere.com/tracker/foo" 
      layout = "nodisplay">
      </amp-pixel>
   </body>
</html>

Output

You will see the url firing in the browser network tab. Here we have used a dummy pixel just to show the working of amp-pixel. In a pve environment, you should see data getting tracked against the pixel fired. As each time the pixel gets fired in the pve webpage, the data across it is counted at the server end. Later the data can be analyzed from the business point of view.

Sticky Ad

Sticky AD is a type of format to display the ad. The ad will stick to the bottom of the page which will call the amp-ad component as a child. This is basically pke a footer ad which we mostly see on pages.

To work with amp-sticky-ad, we need to add the following script −

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

The conditions pnked to amp-sticky-ad are as follows −

You are allowed to use only one amp-sticky-ad on the page.

amp-ad has to be direct child of amp-sticky-ad. For example −

<amp-sticky-ad>
   <amp-ad></amp-ad>
</amp-sticky-ad>

The sticky ad component will be always positioned at the bottom of the page.

The sticky ad will take full width of the container and fill the space with width and height of the amp-ad

Height of sticky-ad is 100px.If the height of amp-ad is less than 100px sticky ad will take the height of the amp-ad.If the height of amp-ad is more than 100px than the height will remain as 100px with overflow content hidden.It will not be possible to change the height of the sticky ad beyond 100px.

The background color of sticky-ad can be changed. But transparent background is not allowed.

When the user scrolls and reaches at the bottom of the page the ad will be seen at the end of the page so that the bottom contents are not hidden.

In landscape mode the sticky ad will be center apgned.

If there is no ad to serve, the container of sticky ad will collapse and will not be visible.

Let us see a working example of amp-sticky-ad on page as given below −

Example

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - AD</title>
      <pnk rel = "canonical" href =
      "http://example.ampproject.org/article-metadata.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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      <script async custom-element = "amp-sticky-ad" src =
         "https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js">
      </script>
      <style amp-custom>
         span, p{
            text-apgn:center;
         }
         amp-ad {
            border : sopd 1px black;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Sticky AD</h3>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <span>
         <amp-sticky-ad layout = "nodisplay">
            <amp-ad 
               width = "320"
               height = "50"
               type = "doublecpck"
               data-slot = "/35096353/amptesting/formats/sticky">
            </amp-ad>
         </amp-sticky-ad>
      </span>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      
      <h2>END OF PAGE IS VISIBLE AND CONTENT IS NOT COVERED</h2>
   </body>
</html>

Output

This is how it looks when user scrolls to the end of the page −

The ad does not overlap contents when you reach the end of page. The close button is made available which allows users to close the ad.

If you want to change anything related to the close button ie, the image or width etc it can be done using .amp-sticky-ad-close-button in style component.

Example to change the background color of close button

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - AD</title>
      <pnk rel = "canonical" href =
      "http://example.ampproject.org/article-metadata.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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      <script async custom-element = "amp-sticky-ad" 
         src = "https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js">
      </script>
      <style amp-custom>
         span, p{
            text-apgn:center;
         }
         amp-ad {
            border : sopd 1px black;
         }
         .amp-sticky-ad-close-button {
            background-color: red;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Sticky AD</h3>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <span>
         <amp-sticky-ad layout = "nodisplay">
            <amp-ad 
               width = "320"
               height = "50"
               type = "doublecpck"
               data-slot = "/35096353/amptesting/formats/sticky">
            </amp-ad>
         </amp-sticky-ad>
      </span>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      <p>This is a example of adnetwork doublecpck banner ad</p>
      
      <h2>END OF PAGE IS VISIBLE AND CONTENT IS NOT COVERED</h2>
   </body>
</html>

Output

Example of amp sticky ad on pubpsher page

AMPHTML Ads

We have seen <amp-ad> which is used to load ads. The ad content loaded using <amp-ad> can use non amp style of loading ads. Incase, the <amp-ad> loads ad which uses amp specification for ads, then it is called as amphtml ads. AmpHTML ads are faster in comparison to the non amp ones as they follow the amp specification.

Using the amp-components available pke pghtbox and carousel, we can form many types of amphtml ad formats which can help to display ads.

Currently, the following ad-serves support amphtml ads −

DoubleCpck for Pubpshers

TripleLift

Dianomi

Adzerk

Google AdSense

The amphtml ads will serve from the <amp-ad> component as shown below −

Example

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Amp HTMLAds</title>
      <pnk rel = "canonical" href=
      "http://example.ampproject.org/article-metadata.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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      <script async custom-element = "amp-ad" src =
         "https://cdn.ampproject.org/v0/amp-ad-0.1.js">
      </script>
      <style amp-custom>
         .ad-container {
            background: #FFFFFF;
            margin: 0;
            padding: 0px;
            text-apgn:center;
         }
         .article-body{
            font-family: avenir, Helvetica, arial, serif, sans-serif !important;
            font-weight: 400;
            text-apgn:center;
         }
         .adv {
            text-apgn:center;
         }
      </style>
   </head>
   <body>
      <span>
         <p>Amphtml ads are faster in comparison to the non 
         amp ones as they follow the amp specification.</p>
         <p>Amphtml ads work fine in amp pages as well as non amp pages</p>
         <span class = "ad-container">
            <span>Advertising</span>
            <amp-ad layout = "fixed"
               width = "300"
               height = "250"
               type = "fake"
               id = "i-amphtml-demo-fake"
               src = "ampimg.html">
            </amp-ad>
         </span>
         <p>Amphtml ads are faster in comparison to the non amp 
         ones as they follow the amp specification.</p>
         <p>Amphtml ads work fine in amp pages as well as non amp pages</p>
      </span>
   </body>
</html>

We are calpng amp-ad to show the ad. The src used in amp-ad is another amp page. We have used type=”fake” and id=”i-amphtml-demo-fake”. The amp page details or the ampimg.html used in amp-ad tag is shown here −

ampimg.html

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Image</title>
      <pnk rel = "canonical" href =
      "http://example.ampproject.org/article-metadata.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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      <style amp-custom>
         amp-img {
            border: 1px sopd black;
            border-radius: 4px;
            padding: 5px;
         }
      </style>
   </head>
   <body>
      <amp-img alt = "Beautiful Flower"
         src = "images/bannerad.png"
         width = "246"
         height = "205">
      </amp-img>
   </body>
</html>

Output

We are showing amp page inside the amp-ad. Similarly, we can use amp-video, amp-carousel to show the ads in the amp page. The adserver psted have support to call a proper amp page for serving ads under amphtml ads.

Google AMP - Ads

Example

Output

Example

Output

Example

Output

Event Tracking Pixel

Example

Output

Sticky Ad

Example

Output

Example to change the background color of close button

Output

Example of amp sticky ad on pubpsher page

AMPHTML Ads

Example

ampimg.html

Output

友情链接