How to Customize Google Adsense responsive ads for Google AMP Project (Accelerated Mobile Pages) (Updated OCT 7 2016)AMP known as ‘Accelerated Mobile Pages’ was recently introduced by Google to make websites load faster in slow connection on mobile devices while this is a good idea,
implementing this to a site is not easy. AMP also lazy load ads including Adsense to speed up content loading also AMP doesn’t change your desktop website view, it just show special AMP Pages to the mobile users via Google Search
Here is the image of webmaster tools where all your AMP Pages will be listed
When configuring Adsense for AMP Pages, It doesn’t officially support responsive ads
but you can configure it with following trick, We already have articles in This website for Configuring Adsense Async Responsive Ads and Configuring Adsense Sync Responsive Ads
This is the basic AMP HTML for Adsense, the following code just shows a 300×250 Ad but its not responsive
<amp-ad width=300 height=200 type="adsense" data-ad-client="ca-pub-XXXX" data-ad-slot="YYYY"> </amp-ad>
ca-pub-XXXX must be replaced with a valid Adsense publisher ID
Ad-Slot (YYYY) must be replaced from a responsive Ad-Code generated
Styles & AMP AD javascript must be added to the HEAD section of AMP HTML
Add this AMP AD javascript to Head
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
But it can be made responsive with CSS similar to the method explained in the article How to Customize Google Adsense Async Responsive ADS Size since AMP is Asynchronous
<head>
<style amp-custom>
.headerad { width: 300px; height: 50px; }
@media(min-width: 320px) { .headerad { width: 320px; height: 100px; } }
</style>
</head>
<body>
<amp-ad class="headerad"
type="adsense"
data-ad-client="ca-pub-XXXX"
data-ad-slot="YYYY">
</amp-ad>
</body>
This is an example for Header Ad which is placed after the logo, The recommended size for mobile header banner is 320×100 but it is slightly large for the old iPhone models like 5S, 5, 4S…. and old Androids too. CSS Media queries detect the screen width and shows the most suitable Ad size. A 300×250 Medium rectangle can not be used in header since it violates the Adsense policy. (Is placing a 300×250 ad unit on top of a high-end mobile optimized page considered a policy violation?)
But 300×250 or 336×280 Adsizes can be used below the fold here is a better css code to use relevant adsizes on devices
<style>
.articlead { width: 300px; height: 250px; }
@media(min-width: 336px) { .articlead { width: 336px; height: 280px; } }
</style>
<amp-ad class="articlead"
type="adsense"
data-ad-client="ca-pub-XXXX"
data-ad-slot="YYYY">
</amp-ad>
Since your AMP pages are going to be shown for Mobile users customizing CSS for 728×90 ads or any other larger Ad-sizes are Unnecessary
Here is a sample Valid AMP HTML Markup
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="self.html" />
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<meta name="viewport" content="width=device-width,minimum-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>
<style amp-custom>
.headerad { width: 300px; height: 50px; }
@media(min-width: 320px) { .headerad { width: 320px; height: 100px; } }
</style>
</head>
<body>
<amp-ad class="headerad" width=300 height=250
type="adsense"
data-ad-client="ca-pub-xxxx"
data-ad-slot="xxxxx">
</amp-ad>
</amp-ad>
</body>
</html>