Elevator Adverts

Elevator adverts are a way of displaying advertisements on web pages. Not for elevators in buildings. The name refers to the way the advert moves up and down the margin of the page, as the reader scrolls up and down. A standard “skyscrapper” advertising block is always visible, right next to where the user is reading.

Advertising networks are keen for adverts to be displayed “above the fold” – in the area of the screen first visible when the page loads. However, if the page is content-rich, the best locations are not at the top of the page: In the past, I have run advertising using 2 skyscrappers, one on top of the other. As the reader scrolls down the page, the second advert eventually becomes visible. The best return (from affiliate advertising) was from the bottom advert, not the top. The reason is simple: Reading down the page, the lower advert tends to be next to the important text being read. In contrast, the upper advert tends to sit next to the list of page contents, so is often skipped over.

Instead of stacking adverts, why not just move the advert down the page as the reader scrolls?

The webpage needs an “elevator shaft” down the left margin. For example, apply the CSS “margin-left: 175px” to the division (“div” block) containing the page’s content, to create the elevator shaft. More complex designs may require more work. It is important that the elevator shaft runs close to edge of the text, to continually catch the eye of the reader.

Simply applying a “position: fixed” to style the division containing the advert, would always show the advert in the top-left corner, hanging down the elevator shaft. Unfortunately, the top part of the page normally contains a title block, so the elevator shaft should not travel the full height of the page. Older browsers (notably Internet Explorer 6) do not support “position: fixed”, but we still need to make sure the advert “fails gracefully”, by displaying in a sensible position.

My solution’s code is below.

The Code

The division containing the advert has the following CSS:

position: absolute;
top: 200px;
left: 0px;

The “top” value of 200px is the initial gap between the top of the page and the top of the advert, allowing space for titles. The “left” value shouldn’t be required, but keeps Internet Explorer 6 happy. This is the initial position of the advert. If the script below cannot run (Javascript disabled, or older browser), the advert will default to a normal static position on the page, stuck at the top of the elevator shaft.

Javascript can be placed in the HTML header, or loaded from a separate .js file:

var elevator_id=”addiv”, elevator_top=200, browser_can_elevate=true;

The first line of the Javascript sets 3 variables:

  1. elevator_id is the id of the division containg the advert.
  2. elevator_top is the initial gap between the top of the page and the top of the advert – the same as the 200px in the CSS above.
  3. browser_can_elevate is a check to determine whether the script can move the advert or not. The next block of script sets this “false” for Internet Explorer 6 and below (which cannot handle position:fixed). This code could be expanded to consider other browsers.

if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){
if (Number(RegExp.$1)<=6) { browser_can_elevate=false; }
}

window.onscroll=function(){
if(document.getElementById(elevator_id) && browser_can_elevate) {
if ((window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop)>elevator_top) {
document.getElementById(elevator_id).style.position=’fixed’;
document.getElementById(elevator_id).style.top=’0px’;
} else {
document.getElementById(elevator_id).style.position=’absolute’;
document.getElementById(elevator_id).style.top=elevator_top+’px’;
}
}
}

Now, when the user scrolls the page:

  1. Check that the division exists on the page, and that the browser can change the position.
  2. If the current scroll position is below the initial gap between the top of the page and the top of the advert, change the position to fixed and top to 0: Pin the advert to the top-left corner.
  3. If the scroll position is above the initial gap, revert to the initial styles: absolute position, 200px from the top.

Why change between absolute and fixed? Adding the scroll height to an absolute position would work. However, on some browsers (such as Firefox and Opera) window.onscroll updates slower than normal page rendering, so the adverts move with jerks. Elements with a fixed position move with the rest of the page, smoothly. On some browsers, the advert can still appear to jump slightly when moving across the transition (between absolute and fixed), but this does not happen continually, and most readers will not see it.

There are 2 limitations, that can be addressed with extra code, if required:

The code can be seen in action on most El’s Extreme Anglin’ pages.

Tim Howgego, 4th February 2010. Related topics: Advertising, El. 3 Comments »

3 comments on "Elevator Adverts"

  1. On February 4th, 2010 at 8:44 pm Mania wrote:

    I’d love to hear how these do for you. I was picturing a rather more intrusive elevator ad, like those I’ve seen on more ad-intensive sites, but the El’s elevator is nicely unobtrusive while still being right there in front of you.

  2. On February 5th, 2010 at 3:40 am Tim Howgego wrote:

    I think the secret is to be subtly intrusive, rather than overtly intrusive: Nobody notices, but is still influenced.

    That said, I’ll also (probably later today) be experimenting with my own version of the “dashboard ad” – moving some of the horizontal banner adverts down to a fixed position at the bottom of the screen. Similarly not blocking the view, while remaining very visible. Those will have a “close” button, because I’m still concerned they may be slightly too intrusive.

    Hopefully I can avoid needing to use the very aggressive methods (pop-ups, interstitials) and keep a clear separation between advertising and content.

    Unfortunately, the more aggressive everyone becomes, the less financially attractive passive advertising is. The basic problem seems to be that there’s currently more inventory than worthwhile things to advertise in it. Ideally, I’d have a better business model than advertising, but thus far all my ideas have run into “rights” issues…

  3. On February 11th, 2010 at 11:58 am Mania wrote:

    *nod* I hear you.

    Well, keep us updated! I find this fascinating.

Comments welcome