Peel

Objective

To create an Peel Ad in DFP.

Dependencies

  1. 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.

  2. jQuery. There can be two assumptions to be made: Site is already running jQuery or it's not. Depending on where you plan to run the peel back, it would be much easier simply to not load jQuery in your script and have it running on the actual webpage itself. Lots of webpages use jQuery. Unfortunately, if it's not running jQuery and you want to load it up via the Creative, you need to do something special to prevent issues from occur.

  3. A server to host your scripts and assets. I'll be using my own server. Please do not hotlink to it.

Line Item Settings

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.

The Creative

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.

<!-- Loading external files -->
<script src="http://dfp.ingraye.com/creative/peel/jquery.peelback.js"></script>
<script type="text/javascript">
$(function()
{
$('body').peelback({
// Peelback settings
adImage : 'http://dfp.ingraye.com/creative/peel/ad-peel.jpg?ord=%%CACHEBUSTER%%',
peelImage : 'http://dfp.ingraye.com/creative/peel/ad-folded.png?ord=%%CACHEBUSTER%%',
clickURL : '%%CLICK_URL_ESC%%http://www.google.com/',
gaTrack : true,
gaLabel : 'Peel Example',
autoAnimate: true
});
});
}
</script>

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.

<script type="text/javascript">
// Boolean flag to know if jQuery has been loaded
var jQueryloaded = false;
function initjQuery()
{
//if the jQuery object isn't available
if (typeof(jQuery) == 'undefined')
{
if (! jQueryloaded)
{
//only output the script once..
jQueryloaded = true;
//output the script (load it from google api)
document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js\"></scr" + "ipt>");
}
// Recursive until jQuery is loaded
setTimeout("initjQuery()", 100);
}
else
{
// jQuery is loaded. Let's use jQuery's getScript to load our Peelback script so we don't have to redo this code for it
// jQuery's getScript is basically this script right here. It will load the script and once it's done, execute our peelback function
jQuery.getScript('http://dfp.ingraye.com/creative/peel/jquery.peelback.js',function () { loadPeelback() });
}
}
initjQuery();
</script>

<script type="text/javascript">
function loadPeelback()
{
// Launch the peelback
$(function()
{
$('body').peelback({
// Peelback settings
adImage : 'http://dfp.ingraye.com/creative/peel/ad-peel.jpg?ord=%%CACHEBUSTER%%',
peelImage : 'http://dfp.ingraye.com/creative/peel/ad-folded.png',
clickURL : '%%CLICK_URL_ESC%%http://www.google.com/',
gaTrack : true,
gaLabel : 'Peel Example',
autoAnimate: true
});
});
}
</script>

Not much else too it. The creator of the script (Rob Flaherty) did a very good job of making it simple to use.

Tagging

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).

googletag.defineSlot('/1001962/Creative-Examples', [1,1], 'dfp-onebyone').addService(googletag.pubads());

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.

<div id='dfp-onebyone'>
<script type='text/javascript'>
googletag.display('dfp-onebyone');
</script>
</div>

Done

Hopefully this demo has been informative to help you do your own peel.

-Ingraye

Last updated 2013-03-03