What is a Page Peel?

Consider that you are reading a book or a magazine and you want to mark a page to come back to it later.
You would normally use a bookmark, but unfortunately you seem to have misplaced it. Instead you decide to
simply fold over the corner of the page. Not only have you marked your page, but you can also peek at the
top corner of the next page. That space is where the page peel ad initially appears. Hover your mouse over
the peeled back corner of the page or touch it on a touch-enabled device and it quickly peels back further
to reveal a larger ad with more details and a call to action.

Live Example

They say a picture is worth a thousand words, but I’ll do you one better with a
live example — take note that page peel ads
only work on desktop and laptop computers, so you won’t see the example if you happen to be using a tablet or
mobile phone.

Big Space, Small Footprint

The problem with large ads is, well, that they can take up a lot of space and it’s hard to fit them into
your content. Page peel ads solve that problem quite nicely. When the visitor is not interacting with
them they only take up a small 100×100 pixel space in the upper left or right corner of the browser window!
In fact, the page peel can alternatively anchor itself to a page element to give it a more page-like effect as
you see in our example. Only when the visitor interacts with the page peel though, does it reveal the
much larger 700×700 pixel ad behind the page. This gives the advertiser plenty of space to create a compelling
ad with a strong call to action, which when done properly can result in mind blowing click-through rates.

Modern Implementation

If you’re a web developer you probably noticed already that the page peel on the
live example page is not using Flash.
How is that possible? Every page peel you have encountered up to this point was done with Flash.
Well, my curious friend, what we’ve actually done is implemented the page peel using HTML5 with
CSS, JavaScript and SVG! This means it loads faster and works for all visitors regardless of whether they
have Flash installed or not!

Creating a Page Peel

Surely it must be difficult to create one of these page peel ads? Nope, it’s definitely not. Advertisers are
already familiar with creating graphic ads in JPG, GIF or PNG formats. All that’s required for them to run a
page peel is to create two such images. One a smaller 100×100 image that appears when the page peel is closed
and the other a larger 700×700 image that appears when the page peel is opened. In fact, in most cases you can
just crop off the upper left or right corner of the large image to create the smaller image.

Creating the page peel media with AdvertServe and deploying it on your web site is just as easy and no more
difficult than working with a standard 300×250 or 728×90 graphic banner.

  1. Go to Media and create a new Right Page Peel or Left Page Peel media. You
    will be asked to upload the Small Image and the Large Image as well as provide a
    Redirect URL. If you have ever created a graphic banner media before it’s essentially the
    same process except you have two images.
  2. You’ll obviously want to set up a zone with multiple campaigns/media on your live web site,
    but for the purpose of this example we’ll skip those extra steps.
  3. Go to the Code Wizard

    • Click on Page Peel Code > HTML in the navigation menu on the left side of the screen.
    • Select your Media and optionally a Publisher if that’s applicable.
    • You can customize the gradient color of the page peel, but the default paper-like color should be
      appropriate for most web sites.
    • It’s also possible to anchor the page peel to a DOM element, such as your page header.
      All you need to provide is its element ID attribute. This is, of course, optional so if
      you leave this blank the page peel will anchor itself to the upper left or right corner
      of the browser window instead.
    • Press the Generate Code button

Once you have the generated code, simply copy and paste it into the bottom of your web page near
the </body> tag.

Final Thoughts

This might be obvious, but because the page peel always appears above the fold it inherently optimizes viewable
impressions. It’s also important to point out that page peels can be added to
any web site without having to make any changes to the layout of your content. Couple all of this with
high average click-through rates and you’ve got a real winner that can generate premium earnings!