Responsive Ad Serving In Four Steps

A Guide for Publishers Using Mobile Responsive Design

With the growing number of mobile responsive sites, a solution for responsive ad serving is necessary. It is not feasible to place every possible ad tag on the page and let responsive CSS media queries decide which one is visible or hidden. (CSS media queries are used to define different style rules for different types of media devices.)

Hidden ads will generate fake impressions. Serving hidden ads is not an acceptable practice, and with the recent introduction of viewability and verification technologies, it is more easily discovered.

The logical solution would be to create responsive design ads, but just like with discrepancies, there’s nothing logical when it comes to ad serving. Understanding the expense to develop responsive design creatives, there are always going to be static and flash ads that can’t be resized or modified with the page.

Fortunately, there are a few simple steps you can follow to make sure your ads are being properly delivered:

1. Plan – define the breakpoints of different site layouts. For example, the site can be responsive for three different devices: desktop, tablet, and mobile phone. Based on CSS media queries used to create these layouts, the defining breakpoints are: 768px and 480px.
2. Plan – define ad slots for each layout. For example:

• Desktop – 970×250, 728×90 combo; 300×250, 300×600 combo; 160×600
• Tablet – 728×90; 300×250, 300×600 combo; 160×600
• Mobile Phone – 320×50; 300×250

3. Implement – Use the following JavaScript to identify the width of the page. This bit of code will go into the full ad tag script as shown in the next step. It’s not the most advanced version of the code, but it will do the trick for majority of browsers:

var screen_width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
4. Implement – Place tags in ad slots that you identified for all three devices on the page. Use the IF statement to execute ad tags based on the width of the page:

DESKTOP:

<script>
var screen_width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if (screen_width >= 768) {
// Insert desktop ad tag (i.e. 970×250,728×90)
}
</script>

TABLET:

<script>
var screen_width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if (screen_width < 768 && screen_width > 480) {
// Insert tablet ad tag (i.e. 728×90)
}
</script>

MOBILE PHONE

<script>
var screen_width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if (screen_width <= 480) {
// Insert mobile phone ad tag (i.e. 320×50)
}
</script>

(Note for developers: Remember to place ad tags in the HTML where they should appear in the layout. Do not to manipulate DOM. Majority of ad servers and ad tags are still using document.write technology and by manipulating DOM after the page was loaded might render the page blank. In addition do not try to change ads on window resize. No one does it except for testing and you will get the same effect as in DOM manipulation.)

With this four-step approach, only the right ad tag will be executed on the page and no fake impressions will be generated.