To create an Peel Ad in DFP.
There's already a a great guide on doing a peel ad here: http://www.ravelrumba.com/blog/jQuery-peel-back-ad/. I'll be using their code since it works so well.
Unfortunately/fortunately, the script uses jQuery. This is good and bad. The good part is that jQuery is used on many sites. Unfortunately the bad part is that IE sometimes has issues with loading jQuery (as part of your creative) and then executing the script.
When doing an Peel, you pretty much want it there all the time. So a Sponsorship 100% Goal on it's own Ad Unit is the best way to go.
You will be using a Third Party Creative type.
Here is the Creative I used. You can remove all the quoted lines (green). I put them in there to make it easier to explain the code. This Creative assumes jQuery is already running on the page.
If you're not sure if jQuery is loaded on the page then you'll need to do something special for it. If this was a good web developing world, we could use a simple code. Unfortunately, it's not. Certain versions of IE won't dynamically load jQuery correctly and it'll break the ad. So this means we need to do something so that IE executes only after jQuery is finish loading.
Not much else too it. The creator of the script (Rob Flaherty) did a very good job of making it simple to use.
All that's left is to tag your page. This type of Creative works best when using an 1x1 Ad Unit also known as a "Interstitial" in DFP. Although it should probably better termed as a "Out of Page" Ad Unit.
Now, normally you should utilize whatever features are available in DFP to make things work (eg, Frequency setting to limit how many times it will display to the user). But it seems like the defineOutOfPageSlot code simply doesn't work (could be not intended for SB). I tried quite a bit to get it work to no avail. It's not much of an issue but it does mean that you may have a 1x1 (Ad Unit size) code somewhere. You should probably place the tags to display at the bottom of your page, if possible.
Here's the code to define the Ad Unit. Please note I use a custom ID value instead of the randomly generated one from DFP. You just slip it in with the rest of the define Ad Units (obviously update the Network code and Ad Unit name with yours). You'll need to update the location of your files and Creative image (please don't hotlink to my server).
Here's the display code. As stated before please note the custom IDs so that they don't conflict with something you may have already done.
Hopefully this demo has been informative to help you do your own peel.
Last updated 2013-03-03