First they made the code responsive, now Google Adsense offers responsive ad units to allow best ad placement for responsive site design. There is no doubt that responsive design is the best way to display your site on multiple screen resolutions across mobile devices and large screen desktops. Responsive design is here to stay and a superior alternative to designing a separate mobile website.
Google Adsense recently released the new asynchronous script, which offered new coding options and enabled webmasters to officially edit the code to fit responsive sites. The new code lay the framework to support new responsive ad designs.
Adsense Responsive Ad
I ran across multiple forums, where all sorts of Adsense code tweaks were being suggested to support responsive design. To stop all the confusion, it is good Adsense has released new responsive ad units – they are entirely new units with new code which has to be compulsarily edited to fit your site. You cannot edit your current ad units code, you need to create a new ad.
So I created a new Responsive ad unit and this is the code I got.
<style>
.responsive { width: 320px; height: 50px; }
@media(min-width: 500px) { .responsive { width: 468px; height: 60px; } }
@media(min-width: 800px) { .responsive { width: 728px; height: 90px; } }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive -->
<ins class="adsbygoogle responsive"
style="display:inline-block"
data-ad-client="ca-pub-123456789"
data-ad-slot="12345"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>Some important things to note while implementing the ads
- Note that it has inline style tags. The class ‘responsive’ is derived from the ‘Name’ you give to the ad unit while creating it.
- These units only use asynchronous code – so do not delay page loading. Note you can use the aync script once only to speed page loading times.
- It will give code for a 320px mobile ad, 468px banner and 728px banner by default. If you need to use it elsewhere like for rectangle ads, you need to modify the code based on screen sizes you desire. Change this carefully for desired response.
- Only use standard Adsense sizes, else ads may not appear, and may violate terms of service.
- Did you change browser width, but the Adsense ad did not change size? – they claim this is a standard response and whatever ad loads the first time is what you get. Changing screen sizes will not change the ad size. Loading it on different devices will show the responsive ad.
- Set default ad sizes – this is the first line of code without the media queries and will work even when media queries for responsive design are not supported. The CSS class is deciding how much ad size to fill.
- You need to put new tracking channels to this ad unit, and be sure to add on the Adsense targeting channel to allow advertisers to target your ad to increase competition and earn you more money.
- A new responsive report allows you to track how well your channel is doing.
Try the new Adsense ads and earn more money by making your ads blend better on different mobile devices, tablets and large computer screens.