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 100x100 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 700x700 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 100x100 image that appears when the page peel is closed and the other a larger 700x700 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 300x250 or 728x90 graphic banner.
- 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.
- 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.
-
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!
Mike Cherichetti
