How to Make AMP Adsense Ads Responsive (Accelerated Mobile Pages)

0 57

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

Accelerated Mobile Pages Google Webmaster Tools

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>

Leave A Reply