jQuery Peel Back Ad

On several occasions I’d have to set up a “peel back” (or “peel away”) ad, and each time I’ve used this old script that relies on a SWF file for the peel back animation. It’s a popular script and if you’ve ever had to work on one of these things you probably know the one I’m talking about.

It achieves a nice reflection effect, but otherwise it’s not so great. It’s heavy, slow, not that easy to manipulate, and, being Flash, prone to certain conflicts.

Long aside on the general subject of peel back ads

In terms of aesthetics, I’ve never been a big fan of the peel back ad, and in a way I didn’t mind the aforementioned poor performance. It helped form the argument for not using the ad at all.

But I’ve started to come around on the peel back. I still find it a little hokey, with its web-page-as-literal-page abracadabra, but it does have a few things working in its favor.

For one, when the ad creative is done well I’ve seen peel back ads produce strong click-through rates—3,4 times that of average CTRs on standard IAB units. It’s hard to argue against that kind of data. If you use data to support your design and UX instincts, you have to respect data when it quietly informs you that your instincts are wrong.

Something else I realized only recently is that, usability-wise, peel backs are less intrusive than other “high-impact” interactive ad types.  While push-downs and expandable ads can trigger unexpected (and unwanted) effects on the page, the behavior of peel backs is standard and predictable. And because of its placement at the very top of the page, the peel back effect is unlikely to interfere with the main content area the way push-downs and expandables often do. (Although it can interfere with navigation, search, and other header elements.)

Back to the code: exit Flash, enter jQuery

So, if you’re on board with all this, the next question is how can we make a better peel back ad? Getting rid of the Flash and handling everything with Javascript is an obvious choice.

I got the idea for how to handle the peel back animation from this blog post by Soh Tanaka. I used his solution as a starting point and built out a jQuery plugin with the following features:

• All code is contained in the plugin, which means you can use it without having to add any extra HTML or CSS to your site.
• One of the nice things about these ads is that in addition to impressions and clicks you can record (and report on) the “peel backs” triggered by mouseover. An easy way to do this is with Google Analytics Event tracking. This script plugs in to the Google Analytics API, giving you the option to send the mouseover data back to your GA account.
• It’s fast and small. The code plus the PNG needed for the peel effect are only 7.3kb.
• Tested in all the usual modern browsers, as well as IE6, IE7, and IE8.
• In addition to the regular version there’s a version that uses a data URI for the peel image. This eliminates an HTTP request and an external dependency, but it means the ad won’t show in browsers that don’t support data URIs (namely, IE6 and IE7).

How to use

Call the plug-in on the body element and set the required parameters (details on the parameters and options can be found in the readme, which you’ll find on github).

Example:

$(function(){
  $('body').peelback({
    adImage     : 'peel-ad.png',
    peelImage   : '../assets/peel-image.png',
    clickURL    : 'https://www.thebestdinosaur.com/',
    gaTrack     : true,
    gaLabel     : '#1 Stegosaurus',
    autoAnimate : true,
    debug       : false
  });
});

The size I’ve selected for the exposed portion of the ad is somewhat arbitrary; the peel back has not been recognized by either the IAB or OPA as a standard unit, and there are no other standards for its size that I’m aware of. If you need to accomodate a different size, hacking the plugin shouldn’t be hard. Update (04/26/11): Latest version of the plugin now supports setting the image sizes in the settings.

Hyperlinks!

Here are the links you’ve patiently been waiting for. Please let me know if you have any feedback or questions!

• View demo
• Get code on github
• Download zip