Responsive AdSense

Posted by & filed under Code.

Using Google AdSense Responsive Design and responsive Ads with CSS @media queries

I’ll be honest, I’m not one to use Google AdSense on a personal website/blog, but since I’ve been using Bootstrap 3 for WordPress I wanted to try out Google’s responsive AdSense unit.

Using Bootstrap 3 with Google AdSense

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts. Using Bootstrap 3 media queries we can render different AdSense unit sizes with css. Check out the example below for the code used to render different units in this post:

<style>
.programmers { width: 300px; height: 250px; }
/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 300px) { .programmers { width: 125px; height: 125px; } }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 600px) { .programmers { width: 200px; height: 200px; } }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 800px) { .programmers { width: 300px; height: 250px; margin:0 auto; }
}
</style>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Programmers -->
<ins class="adsbygoogle programmers"
     style="display:inline-block"
     data-ad-client="ca-pub-2640177500618682"
     data-ad-slot="1532157931"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

And the adsense ad here:

To change which size ad unit shows for each media query, you would swap out the sizes I’ve listed above with one of Google’s adsense units – and you should probably use one of their top performing ad sizes.

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 800px) { .programmers { width: 300px; height: 250px; margin:0 auto; }
}

Below you can see I changed width: 300px; height:250px; to width: 468px; height: 60px;

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 800px) { .programmers { width: 468px; height: 60px; margin:0 auto; }
}

Top Performing ad sizes for adsense
300×250
336×280
728×90
160×600
320×50
468×60
234×60
120×600
120×240
300×600
970×90
250×250
200×200
180×150
125×125

A note on inserting code into individual posts on WordPress

I was unsure how to go about adding a single ad unit to a post on WordPress and then I found WP Simple Adsense Insertion which made it easy to insert my Bootstrap responsive adsense code into any individual post.

Leave a Reply

  • (will not be published)