This is The Register-Guard's solution to serving ads, on demand, based on viewport size.
At The Register-Guard, we built a "responsive" template for the comprehensive redesign of our site.
Serving different ad creatives, and different 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 IAB Standard Advertising Units).
Scan with phone and/or click to view the latest demo:
Browse through the source code here.
- Ad Server: OpenX Enterprise
- By default, this Ad Server is not setup to handle responsive ad inventory
- OpenX Inventory Basics
- Site Sectioning:
- Main Section with various sub-sections
- News
- Local News
- Etc...
- Sports
- More...
- etc...
Use the out-of-the box ad unit group (AUG) tags on each and every separate template (we have approx. 50-75).
In the Wild:
Provided the ability for 1 server ping per page to request all the ads on that page, but is a lot of inventory management and overhead.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Create 2 AUGs per template (desktop ads, mobile ads) and use CSS display:none to show/hide ad positions… Unfortunately, while it might sound easy to impliment such a system, there are drawbacks:
In the Wild:
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.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Just deliver the normal script ad tags with a document.write and all is right with the world… WRONG
In the Wild:
It all boils down to Javascript's
document.writecommand; 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 write command.If you you're building a responsive website, and you want your ads to change based on viewport size, then trying to call ad tags that use the
document.writecommand just doesn't work.I don't blame OpenX. The problem is deeper than that… Long story short, the online advertising industry needs to stop using
document.write! — Micky Hulse
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Deliver every individual ad unit <script> tag with writeCapture2() & onMediaQuery() scripts
In the Wild:
A few months of research can be found via the defunct branch.
The bulk of the code in that branch used OpenX's <script> tag implimentation to serve ads to our pages.
Why did it all fail? Well, there's two primary reasons:
The crap HTML and/or javascript was a huge problem for when it came to using writeCapture or PostScribe plugins.
During a span of two months, OpenX changed their ad serving javascript twice! After each change, our code broke. This was extremely frustrating.
It's hard to leverage a system that changes on a regular basis… The last situation we wanted to be in was a Friday afternoon and all the ads across all of our sites were not serving.
After the second OpenX change, we shelved the <script> tag approach and went back to the drawing board…
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Deliver every individual ad unit tag with writeCapture2() & onMediaQuery() scripts, but in the form of an<iframe> (can be injected after page-load and won't destroy the page)
In the Wild:
We built a Django app to help us serve our ads to our network of sites (via a wicked ah-some JSON call).
In situations where we can't use <iframe>s (e.g. a pushdown), we put our CSS's show/hide within the ad creative itself! The advantage here is that the ad gets counted only once! Though, the disadvantage is that we're loading twice the assets for any one viewport size/range.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Deliver AUGs via OpenX's asynchronous JS ad tags and kill the overhead of the OnMediaQuery JS and replace with MatchMedia JS.
OpenX now supports asynchronous JavaScript ad tags for standalone, ad unit group, and multi-ad unit ad calls. Implementing these tags will decrease webpage load times; users won't have to wait for webpage content to load before ads display. Currently, you cannot generate these ad tags in the user interface; however, the documentation describes how to manually build them.
This code was extracted from this repo and lives here
- Django Ad Manager: Django app to help manage, schedule and control OpenX ads from one server to another (this is what we actually use on our live site).
- Benjamins: Coming soon! We're moving the Django Ad Manager javascript plugin (and other static assets) to their own repository.
Note: At The Register-Guard, we use OpenX Enterprise-level ad serving solutions for publishers, so that's what the demo uses to serve the ads; fortunately, this repo's code, concepts and techniques should be easy to adapt to other ad serving software.
With that said, if you have questions/concerns/comments/other, please feel free to post them via this repo's issue tracker.
- BrowserStack: Cross-browser online testing tool.
- modern.IE: Developer resources.
- Virtual PC
Note: I'd suggest clicking the "Don't need XP Mode and want VPC only? Download Windows Virtual PC without Windows XP Mode." link... XP Mode sounds like a headache. Always disable automatic updates so that the current version of IE doesn't get upgraded automatically. - Adobe Flash DEBUG Player
- Note: Don't make the same mistake I did... Install Flash player on the VPC IE apps!
- Mac:
- PC:
- DebugBar: Free! Or paid... I've only used the free version.
- Companion.JS: An awesome JS debugger for IE!
- Internet Explorer Developer Toolbar
- Small tip: When you have the IE Toolbar open, notice the menu item labled "Browser Mode"; switching modes can be helpful to catch JS errors.
- View Generated Source in IE6: A decent Bookmarklet for IE6.
- Fiddler: Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet.
- Firebug Lite: Like Firebug for Firefox, but lighter. :)
- Don't forget to turn on script debugging via the VPC IE apps!
- DebugBar: Free! Or paid... I've only used the free version.
- OpenX Enterprise documentation
- Responsive Advertising: A Ranged Solution
- matchMedia() polyfill
- Responsive Web Design and JavaScript
- Harvey - CSS media query state management
- The state of responsive advertising: the publishers' perspective
- Adaptive Web-Design & Advertising
WriteCapture2element.writeonMediaQuery, and here's my fork
Copyright © 2013 Micky Hulse, Patrick Sullivan / The Register-Guard
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.