- Google AMP - Discussion
- Google AMP - Useful Resources
- Google AMP - Quick Guide
- Google AMP - Cors
- Google AMP - Custom Javascript
- Google AMP - Caching
- Google AMP - Validation
- Google AMP - Basic Syntax
- Html Page To Amp Page
- Google AMP - Media
- Google AMP - Social Widgets
- Google AMP - Analytics
- Google AMP - ADS
- Google AMP - Layout
- Google AMP - Data Binding
- Google AMP - Animations
- Google AMP - Actions And Events
- Google AMP - Dynamic CSS Classes
- Styles And Custom CSS
- Google AMP - Attributes
- Google AMP - Next Page
- Google AMP - User Notification
- Google AMP - List
- Google AMP - Font
- Google AMP - Link
- Google AMP - Selector
- Google AMP - Story
- Google AMP - Date Picker
- Google AMP - Date Countdown
- Google AMP - Fit Text
- Google AMP - Mathml
- Google AMP - Timeago
- Google AMP - Button
- Google AMP - Video
- Google AMP - Iframes
- Google AMP - Form
- Google AMP - Images
- Google AMP - Introduction
- Google AMP - Overview
- Google AMP - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
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 −
![AMP Ads](/google_amp/images/amp_ads.jpg)
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
![Amp Banner Ad](/google_amp/images/amp_banner_ad.jpg)
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> <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
![Amp Banner Ad Ex](/google_amp/images/amp_banner_ad_ex.jpg)
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
![Amp Child Element](/google_amp/images/amp_child_element.jpg)
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
![Amp Tracking Pixel](/google_amp/images/amp_tracking_pixel.jpg)
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.
![Amp Tracking Pixel](/google_amp/images/amp_business_point.jpg)
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
![Amp Sticky Ad](/google_amp/images/amp_sticky_ad.jpg)
This is how it looks when user scrolls to the end of the page −
![Amp Sticky Ad Scroll](/google_amp/images/amp_sticky_ad_scroll.jpg)
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
![Amp Sticky Background](/google_amp/images/amp_sticky_background.jpg)
Example of amp sticky ad on pubpsher page
![Amp Sticky Pubpsher](/google_amp/images/amp_sticky_pubpsher.jpg)
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
![Amp Img Html](/google_amp/images/amp_img_html.jpg)
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.
Advertisements