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    : 'http://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!

Both comments and pings are currently closed.

Discussion

Addy Osmani

This is great but your links to check-out the code on Github/download are broken atm :)

@Addy,
Thanks. I double checked the links. They’re correct, it seems that Github is/was just having some server issues.

nice work rob (:

Cool plugin. Is there a reason I’m missing you didn’t make all the dimensions either parameters or even derived from the actual image dimensions (I figured I’d ask before I add it myself)

Thanks John! Adding the image dimensions as parameters is definitely the next thing to add. I figured it was a nice hanging softball for anyone who felt like forking the plugin. =)

I think I had a reason for not making the image sizes variable but I can’t remember what it was (laziness, perhaps). It would be nice if the peelback ad became standardized, in which case varying image sizes would be discouraged.

is it possible to make the peel back wave/move before being clicked on to draw attention to it?

Chris,
No, not with this plug-in. To catch the user’s eye it does have a delay option (instead of the peeled image being present when the page loads it waits a second and then peels into view)

Richard Perez

Great Code!

How would I make the URL open in same page instead of a new page?

Richard,
Thanks. I can add this as an option to the plugin. In the meantime, you can do it by just removing target="_blank" from line 60.

Peanut Gallery

This site is a salad bar of great items!! Like you, I’ve also used a heavy SWF peel back for years. This looks fantastic.

I’d be very curious if you plan to revisit the Ad Position document.write() issue with OAS ad loading. Your prose is easy to read and I’d love to hear you insights on how to defer the page load halting challenges

Is this intended for personal use only? or Can it be used in a “commercial” sense?

So,
Commercial use is fine. It’s MIT/GPL licensed.

How to do this effect on an image? is it possible?

Does it work fine on IE?

Does not work on IE 9, even in compatibility mode.

IE9user,

This seems to be a bug with the demo page. I have the plugin running on a few live sites and it’s working fine in IE9. I’ll look at it later today. Thanks for the heads-up.

EDIT: Actually seems to be a bug caused by a recent update. An older version of the script works. Will investigate. Thanks again.

EDIT: Seems to be a demo problem after all. Referencing a local copy of the script instead of loading from Github fixed it. http/https problem?

Joey Martin

Any chance of referring to swf files instead of the PNGs so we can get a little animation? Great tool by the way!!

Joey Martin

In case anyone is interested, I did figure out how to make the peel allow SWF. The ad (big image) still needs to be static (or animated gif).

Val Vesa

I tried using the code provided here and on github, my page is something.php

But the banner does not show. The IE error I get is in line 18, where this is contained: “$(function(){”

Any thoughts?

how to use this in a div or table instead the body?

Hi there – great work … one question – why the peel doesn’t work on a iPad? The effect of the peel doesn’t work – clicking the corner only opens the link in a new tab – and on the clicked page the peel is open. There is no effect.

Any one with a solution? It also doesn’t work with the demo.

Guido,
The peel effect is based on a mouseover event, which touch screens do not have. Technically the plugin could be modified to make the animation respond to touch events as well.

Is there any way to set position for a static width page?

Hi Rob,

I’ve implemented your code on my site and its working fantastically. I’ve got the site configured so it works on mobile screens (screen width below 640px) and because of the way my menus change i’d like to stop this script from running.

Is it possible to integrate a little code snippet that says ‘don’t run peel back ad if screen width is less than 640px’ and if so would you be willing to show me how?

Thanks in advance.

Cheers,

Alex

You need to add in a feature for options to peel it in different directions.

@Alex,
I think the easiest way to achieve this would be to use a media query to hide the peelback div on screens smaller than 640px.

Hi Rob,

Appreciate you getting back to me. I’ve been looking at a few media query scripts which would all seem to do the trick. The only problem i’m having is actually incorporating them into the js code. I’m a complete newby to js. but have been trying to get the following to work myself largely by researching it and trial and error but i’m still having no luck. It would eb a huge help if you could demonstrate how I should be incorporating a bit of code like the following into a script like yours:

$(window).resize(function(){
if ($(window).width() <= 800){
// do something here
}
});

Where exactly do I place your code? I've tried it where it says //do something here but it doesn't work (the whole script fails to run). I suspect I'm missing something very simple here.

Any example you could give would be really appreciated!!

Cheers,

Alex

The script is great. Any way to make it sit at the corner of a div element instead of ‘body’ ?