Mobile advertising using responsive ads

The challenge

CSS media queries can easily be used to show and hide elements on a page based on a device’s screen width. So lets start with that. We’ve got our three different ad slots, say a Bellyband (900x125), a Leaderboard (728x90), and a Mrec (300x250), and we’re serving these to a desktop, tablet & mobile device, respectively. So after a little hard work we craft up three media queries and a little bit of display:none action, and low and behold our ads are responsive. The desktop ads are showing for desktops, the tablet ads are showing on tablets, and the mobile ads are showing on mobiles. Time to pack up and go home.

So tomorrow morning we come back in, and awaiting us is an email from our ad department. It says something about the impression rate of all the ad sizes being exactly the same. Something’s up. The different devices are still recording impressions for all ads as a simple CSS show/hide is not enough to tell our ad provider not to record an impression. We need to stop them from rendering in the first place.

The players

Now, it’s a little bit of a tricky thing to stop an ad from rendering based on a user’s device. And it’s something which is obviously going to require a dose of Javascript.

We still need CSS Media Queries

As in the example above these little bad boys, being the most important organ of the responsive body, are still the core behind our method of rendering responsive ads. They are just going to be used a little less directly.

Enter modernizr.js

This beauty of a script is designed to allow backwards compatibility for websites implementing fancy new CSS3 or HTML5 techniques. Forget all that, we’re just going to be compiling the version of modernizr.js that allows CSS Media Queries in javascript.

And the big boy: Google DFP

Google Doubleclick for Publishers was the ad platform we last used to implement our responsive ads. Google DFP has no built in pro-responsive abilities however, it’s just a solid platform for serving ads, and that’s why it was chosen. The only important thing to realise here about DFP, is that all the examples in this article revolve around DFP’s JS calls. However with a little love and patience, I’m sure you’ll be able to convert these examples to work on the ad platform of your choice.

The bit parts & stand ins

Naturally jQuery will have it’s own part to play and there’ll also be a custom jQuery plugin that does a fair whack of the work.

The fundamentals

Firstly, we need to add some HTML for the ad to appear in:

<div id="adblock-mrec" style="width:300px;height:250px"></div>

<div id="adblock-leaderboard" style="width:728px;height:90px"></div>

<div id="adblock-bellyband" style="width:900px;height:125px"></div>

Since we’re using DFP we also need to add some JS to the head of the page which will “setup” our ads so they can be rendered in the body later on:

<script type="text/javascript">
  googletag.cmd.push(function() {    
    googletag.defineSlot("/xxxx", [300, 250], "adblock-mrec").addService(googletag.pubads());    
    googletag.defineSlot("/xxxx", [728, 90], "adblock-leaderboard").addService(googletag.pubads());    
    googletag.defineSlot("/xxxx", [900, 125], "adblock-bellyband").addService(googletag.pubads());    
    googletag.pubads();     
    googletag.enableServices();
  });
</script>

Now our ad blocks are ready to be embedded into their respective divs. This is just a matter of adding the below code inside it’s appropriate div tag from above, so that it becomes something like this:

<div id="adblock-mrec" style="width:300px;height:250px">
  <script type="text/javascript">googletag.cmd.push(function() { googletag.display("adlock-mrec"); });</script>
</div>

Here come our media queries. Let’s define these in a very simple manner:

/* For mobiles */
@media only screen and (min-width:320px) and (max-width:480px) {
    #adblock-mrec {display:block}
    #adblock-leaderboard {display:none}
    #adblock-bellyband {display:none} 
} 

/* For tablets in portrait mode */
@media only screen and (min-width:768px) and (max-width:1024px) {
    #adblock-mrec {display:none}
    #adblock-leaderboard {display:block}
    #adblock-bellyband {display:none}
}

/* For tablets in landscape and desktops */
@media only screen and (min-width:1024px) {
    #adblock-mrec {display:none}
    #adblock-leaderboard {display:none}
    #adblock-bellyband {display:block}
}

The above media queries are just enough to provide us with the basics of our mechanics and a failsafe: Our three ad blocks will now all render and record equal impressions, but as we view the site on different devices, the correct ad blocks will show and hide depending on the resolution of the device.

The main course

Now it’s time to solve the little issue of the incorrect impression count. To achieve this we’re going to use modernizer.js to allow the ad to embed only if it’s media query is satisfied. And we’re only going to do this once when the page is first loaded (so sadly there won’t be any fancy-ness where different ad’s load as certain tricky user’s resize their browser window to test the responsive-ness of our ads...).

As you’re probably going to have somewhere between 50 and 500 ad blocks on any given page, we’re going to use a jQuery plugin to make this mechanism smooth and simple to call on many different ad blocks. It will look something like this:

$("#adblock-mrec").responsiveAd({screenSize: "mobile"});

You’ll need to call responsiveAd() for every ad block on the page, passing in “mobile”, “tablet”, “desktop”, “all” or a combination of the first three. Like so:

$("#adblock-mrec").responsiveAd({screenSize: "mobile,tablet,desktop"});

You’ll also need to remove the script tag that previously displayed the ad from within it’s div. So all your ad divs will look like this again:

<div id="adblock-mrec" style="width:300px;height:250px"></div>

Now here comes our jQuery plugin, first in full:

(function($){
    $.fn.responsiveAd = function(options) { 

      var opts = $.extend({
        screenSize: 'all'          
      },options);

      this.placeAds = function(screenSize) {

        var obj = this;

        var deviceSize = '';
        if (Modernizr.mq('only screen and (min-width:1024px)')==true) {
          deviceSize = 'desktop';
        }             
        else if (Modernizr.mq('only screen and (min-width:768px) and (max-width:1024px)')==true) {
          deviceSize = 'tablet';
        }       
        else if (Modernizr.mq('only screen and (min-width:320px) and (max-width:480px)')==true) {
          deviceSize = 'mobile';
        }

        var placeAd = false;
        if (opts.screenSize.search('all') != '-1') {
          placeAd = true;
        }
        else if (screenSize.search(deviceSize) != '-1') {
          placeAd = true;
        }

        if (placeAd == true) {
          script = document.createElement("script");
          script.type  = "text/javascript";
          script.text = 'googletag.cmd.push(function() { googletag.display("'+obj.attr('id')+'"); });';
          
          id = obj.attr('id');
          document.getElementById(id).appendChild(script);
        }     
      }        
      
      return this.placeAds(opts.screenSize);
    };
})(jQuery);

I’ll break this down for you so you’re clear on all aspects of the script.

$.fn.responsiveAd = function(options) { 

  var opts = $.extend({
    screenSize: 'all'          
  },options);

  this.placeAds = function(screenSize) {

    var obj = this;

These first few lines declare our plugin, set up a default for the screenSize option, and declare the object that we’ll be working on (our div).

var deviceSize = '';
if (Modernizr.mq('only screen and (min-width:1024px)')==true) {
  deviceSize = 'desktop';
}             
else if (Modernizr.mq('only screen and (min-width:768px) and (max-width: 1024px)')==true) {
  deviceSize = 'tablet';
}       
else if (Modernizr.mq('only screen and (min-width:320px) and (max-width: 480px)')==true) {
  deviceSize = 'mobile';
}

Here we test for the media queries (which are exactly the same as the ones we have used in our CSS above). For this to work properly we must have Modernizr loaded and compiled with it’s media query component. We are also declaring the screen sizes available to us - “mobile”, “tablet”, etc. It’s quite easy to extend these options, by adding additional media queries and specifying additional deviceSize values.

var placeAd = false;
if (opts.screenSize.search('all') != '-1') {
  placeAd = true;
}
else if (screenSize.search(deviceSize) != '-1') {
  placeAd = true;
}

Now we have a bit of search() action where we compare the active deviceSize with the screenSize value(s) that are passed into the plugin. This method allows us to specify “all” so we can have the ad render regardless of the device, and it also allows us to specify multiple screen sizes so some ad blocks can show on multiple devices.

if (placeAd == true) {
  script = document.createElement("script");
  script.type  = "text/javascript";
  script.text = 'googletag.cmd.push(function() { googletag.display("'+obj.attr('id')+'"); });';
          
  id = obj.attr('id');
    document.getElementById(id).appendChild(script);
  }
}  

And finally we use an awesome bit of classic JS, the document.createElement() function to build the script tag that embeds the ad - providing the appropriate media query has been satisfied.

The real world

Seeing as we’ve used JS to render the ad based on the user’s device, the ad will not record an impression if it’s not rendered. And we’ve done this using CSS Media Queries, instead of some convoluted jQuery or Javascript based checking of browser dimensions. Add to that a CSS failsafe, so tricky users like you and me can resize the browser window to our heart’s content without the wrong ad size turning up.

If you want to see this exact method in action, head on over to NovaFM. There we have a plethora of ad sizes working on a variety of different screen sizes. And in addition to that we also have billions of potential dynamic ad tags that allow Nova’s ad managers to assign a different campaign to every single page & ad slot on the site - if they want to...

I’ll leave it up to you to devise similar methods of dynamic embedding, and indeed to convert this method over to another ad platform, however regardless of what platform you are using the concept is the same.