Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Responsive serving of ads based on viewport size!

branch: defunct

This branch is 4 commits ahead and 19 commits behind master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 AUTHORS.md
Octocat-spinner-32 CHANGELOG.md
Octocat-spinner-32 CONTRIBUTORS.md
Octocat-spinner-32 README.md
README.md

ATTENTION: There's new code here.


Responsive ads, on demand!

Responsive ad serving experiments using writeCapture2() and onMediaQuery() to call OpenX ads based on viewport size!


DEMOS

Scan with phone and/or click to view the latest demo:

qr code

Advanced demos

  1. DEMO - OpenX ad unit group implementation: Using OpenX's synchronous javascript ad tags, out of the box!
  2. DEMO - Using writeCapture() and onMediaQuery() to call OpenX's showAdUnit() based on viewport size!

Basic demos

  1. DEMO - OpenX "ad unit group" implementation: Using OpenX's synchronous javascript ad tags, out of the box!
  2. DEMO - Using writeCapture() and onMediaQuery() to call OpenX's requestAd({}) based on viewport size!
  3. DEMO - Using writeCapture() and onMediaQuery() to call OpenX's showAdUnit() based on viewport size!
  4. DEMO - Ad calls in head: Using writeCapture() and onMediaQuery() to call OpenX's showAdUnit() based on viewport size!

Browse through the source code via the gh-pages branch.


DETAILS

At The Register-Guard, we're currently in the process of building a "responsive" template for an upcoming redesign of our site.

Serving different ads, and ad sizes, at the various break points is a mission critical aspect of our redesign requirements (we even optimized our grid system to work with Standard Advertising Units ad sizes).

Our initial thought was to use CSS display:none to show/hide ad positions… Unfortunately, while it might sound easy to impliment such a system, there are drawbacks:

From a functional perspective, your first instinct might be to use a simple display:none; in your stylesheet to hide bigger ads from showing up after a certain breakpoint. However, it’s not that easy.
What happens here is that the ad code is still being loaded, the impressions are counted for the advertiser, but their ad isn’t being shown. Using display:none to hide some ads would result in skewed numbers and would definitely affect the performance of ad campaigns. Display: none; isn’t a solution, it just creates more problems.
Adaptive Web-Design & Advertising

Doh!

We use OpenX "Enterprise" to serve ads; after a few quick experiments, we quickly came to realize that OpenX isn't setup to serve ads, on the fly, based on viewport size.

Huh?

It all boils down to Javascript's document.write command; unfortunately, if you call a script that uses this command (after the page has loaded) it will wipe out your page and only display the output of the command.

If you you're building a responsive website, and you want your ad sizes to change based on viewport size, then trying to call ad tags that use the document.write command can be a big PITA.

What's this then?

This project attempts to force OpenX ads into loading "on demand", in a responsive layout.

I'm using the scripts (mentioned above) to shove all of the ad code in the bottom of the page (faster page loads! Woot!) and load ads, when they're needed, as the viewport size changes.

In two of the demos, I have the ad calls at the foot of the document. IMHO, this is optimal because it allows the page to load before the ad scripts even think about executing!


RAMBLINGS

  • Why can't OpenX rewrite their scripts so that they work, out of the box, in the foot of the page (thus, allowing page content to load without delay)?
  • Why can't OpenX just offer some sort of more robust and contemporary JS API? Maybe something that dosen't use oldschool document.writes?
  • Why can't we have the ability to put OpenX's ad calls inside javascript variables so they can be used when needed, on and after (the) page loads?

OBSERVATIONS & IDEAS

I'm sleepy, so here's a bunch of random notes from the past couple of days:

Observations:
  1. OpenX uses document.write; this JavaScript technique only works on page load. If one tries to swap ad positions after page load (using JavaScript), the the whole page gets wiped in place of new ad code.
  2. Using CSS to show/hide ad positions is not a solution: Ad impressions for hidden ads are still counted.
  3. OpenX does not provide ANY alternatives to document.write (it might be nice if they offerd a JSONP script).
  4. OpenX Enterprise docs are skimpy and there's not many people out there sharing code that relate to this version. In other words, it appears as though OpenX has yet to think about solutions for responsive sites (we are basically at the mercy of the limited options provided to us) and there's a lot of uncharted territory out there in terms of OpenX wheel inventing (and responsive ads in general).
  5. OpenX has used document.write for a long time now, so I suspect they're not going to change anytime soon (I hope I'm wrong here).
  6. In reality, in most cases, only the geeks change viewport size.
  7. Boston Globe solved this problem on their famously responsive site by creating a designated advertising column. That column is set to a fixed width large enough to contain the ad, and the ad is never resized, even as the rest of the page adjusts responsively. It's not ideal, but it keeps the ad intact.
    Handling Adsense banners in a responsive layout
  8. Looks like there are other companies out there trying to solve this problem: BuySellAds and ResponsiveAds.
Ideas:
  1. iPhone doesn't load Flash, so fallback images are our best bet. Maybe it might be easier to show/hide image positions for every other view than the initially loaded one?
  2. Maybe hide positions that don't fit when viewport changes?
  3. Rethink ad stack: sell more units that will work on all devices?
  4. Work with OpenX peeps?
  5. Override document.write? Unfortunately, there's a lot of these calls in different scripts. Overriding that built-in JS method is a hack.
  6. Most of the above solutions require a shit ton of code. We need a simple and easy to change/manage solution'
  7. Propose a solution to OpenX? Fix their code for them?
  8. Using PHP or Django, grab the JSON "mobile" feed, convert it to JSONP, cache it, and use the cached version to show/hide ads on pages?

DISCUSSIONS


BROWSER SUPPORT

Browsers tested with (Mac/PC):

Here's the basic test suite:

  • Desktop:
    • Firefox
    • Safari
    • Opera
    • Chrome
    • IE 6-9
  • iPhone:
    • Safari
    • Chrome
    • Opera Mini
  • iPad:
    • Safari

Check out the demo pages for more details.


DEBUG TOOLS


LINKS & RESOURCES


CODE EXAMPLE

OpenX test code; staging a section for use in the real world.

Section Front

Desktop

var OX = OX();
OX.addVariable('section', 'sports');
OX.addPage('13289');
OX.fetchAds();
Billboard | 970 x 90
OX.showAdUnit('273993');
Leaderboard | 728 x 90
OX.showAdUnit('273978');
Medium Rectangle 1 | 300 x 250
OX.showAdUnit('273979');
Medium Rectangle 2 | 300 x 250
OX.showAdUnit('273980');

Tablet

var OX = OX();
OX.addVariable('section', 'sports');
OX.addPage('13291');
OX.fetchAds();
Billboard | 640 x 100
OX.showAdUnit('273976');
Leaderboard | 320 x 50
OX.showAdUnit('273977');
Medium Rectangle 1 | 300 x 250
OX.showAdUnit('280965');
Medium Rectangle 2 | 300 x 250
OX.showAdUnit('280967');

Mobile

var OX = OX();
OX.addVariable('section', 'Sports');
OX.addPage('13292');
OX.fetchAds();
Billboard | 320 x 50
OX.showAdUnit('273975');
Leaderboard | 320 x 50
OX.showAdUnit('280964');
Medium Rectangle 1 | 300 x 250
OX.showAdUnit('280966');
Medium Rectangle 2 | 300 x 250
OX.showAdUnit('280968');

Story Page

Desktop

var OX = OX();
OX.addVariable('section', 'Sports');
OX.addPage('13308');
OX.fetchAds();
Leaderboard | 728 x 90
OX.showAdUnit('273984');
Medium Rectangle | 300 x 250
OX.showAdUnit('273986');

Tablet

var OX = OX();
OX.addVariable('section', 'Sports');
OX.addPage('13310');
OX.fetchAds();
Leaderboard | 320 x 50
OX.showAdUnit('273983');
Medium Rectangle | 300 x 250
OX.showAdUnit('283019');

Mobile

var OX = OX();
OX.addVariable('section', 'Sports');
OX.addPage('13309');
OX.fetchAds();
Leaderboard | 320 x 50
OX.showAdUnit('283016');
Medium Rectangle | 300 x 250
OX.showAdUnit('283022');

Developed by Micky Hulse/The Register-Guard.

Something went wrong with that request. Please try again.