Responsive Adsense ad boxes with Bootstrap
Google Adsense have finally added the flexibility of responsive ad units to allow advertising to better fit in with responsive sites. At its most basic it’s as simple as inserting a piece of code into your HTML and Adsense does the rest, serving up an ad unit that best fits that space.
But it’s rarely a perfect solution. Ad unit sizes can be unpredictable; though they get the width right, you might find your content pushed down the page by a wayward skyscraper or half-page ad where an MREC or banner would have fit the design and user experience better. Particularly with mobile-sized ad units, where an MREC and mobile banners feature similar widths, the results can be unpredictable and cumbersome.
So, taming the responsive ad units is an important aspect to ensuring a good user experience and maintaining Adsense revenue. There are numerous ways to go about this, but one very simple option is to build on the Twitter Bootstrap grid framework and its -xs, -sm, -md and -lg breakpoints to tailor your ad units.
By using media queries based on Bootstrap’s four breakpoints, we can built a very simple set of classes for the DIVs that will contain our Adsense units. Below is a sample with some of the most commonly used Adsense sizes. You can of course extend this for whatever ad units work best on your site.
/*extra small - max width */
@media (max-width: 767px) {
/*.hidden-xs { display: none!important; } */
.mrec-xs { width:300px; height:250px; }
.leaderboard-xs { width:728px; height:90px; }
.mobile-xs { width:320px; height:50px; }
.skyscraper-xs { width:120px; height:600px; }
.banner-xs { width:468px; height:60px; }
}
/* small */
@media (min-width: 768px) and (max-width: 991px) {
/*.hidden-sm { display: none!important; } */
.mrec-sm { width:300px; height:250px; }
.leaderboard-sm { width:728px; height:90px; }
.mobile-sm { width:320px; height:50px; }
.skyscraper-sm { width:120px; height:600px; }
.banner-sm { width:468px; height:60px; }
}
/* medium */
@media (min-width: 992px) and (max-width: 1199px) {
/*.hidden-md { display: none!important; } */
.mrec-md { width:300px; height:250px; }
.leaderboard-md { width:728px; height:90px; }
.mobile-md { width:320px; height:50px; }
.skyscraper-md { width:120px; height:600px; }
.banner-md { width:468px; height:60px; }
}
/* large */
@media (min-width: 1200px) {
/*.hidden-lg { display: none!important; } */
.mrec-lg { width:300px; height:250px; }
.leaderboard-lg { width:728px; height:90px; }
.mobile-lg { width:320px; height:50px; }
.skyscraper-lg { width:120px; height:600px; }
.banner-lg { width:468px; height:60px; }
}
Note that we have commented out the .hidden- codes. These are included in Bootstrap by default; you can uncomment this line to use these classes if needed.
From here, it is as simple as adding the classes for the corresponding ad sizes into your Adsense responsive ad unit code:
<script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async=""></script>
<ins class="adsbygoogle leaderboard-lg hidden-md mrec-sm mobile-xs" style="display: inline-block;" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></ins>
<script>// <![CDATA[
(adsbygoogle = window.adsbygoogle || []).push({});
// ]]></script>In this example, we will display a Leaderboard for large screens, hide the ad unit for medium, a MREC for small and hide the ad unit on extra-small devices.
Unlike the Bootstrap grid system, where you often only need to specify one breakpoint as the grid defaults to block width for smaller sizes, in this case is recommended that you specify all four so that you can ensure a predictable ad unit is served everytime. Hiding ads means you can also show and hide ads in different locations on your page based on the device.
Of course in placing your responsive ad units, you be careful to be compliant with Google Adsense policies about placement and limits of number and sizes per page.
Massive thanks to Richard Wilson, the author of this article and its code snippets.
