Interstitial

Objective

To create an Interstitial Ad in DFP.

Dependencies

  1. I used Shadowbox Jquery script as the script to execute the "interstitial overlay". Shadowbox is quite flexible and has a standalone version which means that you do not have to rely on the site serving the interstitial to have Jquery already loaded. Internet Explorer can have issues attempting to serve Jquery based scripts at the same time dynamically loading Jquery (IE will load Jquery but then execute the Jquery-reliant code before Jquery finishes loading causing it to break).

    When you download the Shadowbox script, be sure to select the appropiate players you want. For simplicity sake, you may wish to simply select all except the QuickTime and Windows Media Player (as they are very unlikely to be used in any ad).

  2. A server to host your script (above) and the Creative. Since DFP does not allow you to upload files to their servers, you will need to host the files yourself.

Line Item Settings

When doing an interstitial, the Line Item settings are important. The most important setting I think would be the Frequency Settings. This is so that the interstitial does not show up many times for the user (aka interstitial pop-ups on every page). You should set the Frequency Settings (frequency is per user and not overall impressions) to fairly low such as 1 Per Hour or 1 Per Day so that a user does not constantly see the ad.

Otherwise the Priority Type is up to you. I would suggest using Sponsorship so that it has the highest priority but it depends on how you have things set up.

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.

If the web were easy, we wouldn't need web developers. Internet Explorer seems to have issues with simply loading the script dynamically. While I would love to simply ignore IE, it's not possible as IE still maintains a fairly huge market share. So to get around this issue, we create a wrapper that checks to see if the Shadowbox Script is available. If not, load it up and wait for it to be loaded before executing out script.

Now, if only it were that easy. Chrome seems to have an issue with the script in that sometimes it attempts to execute the Shadowbox.open before the Shadowbox.init is done (init being the function that setups all the Shadowbox elements to be modified). So we create another wrapper waiting for init to be finished before loading up the ad.

<!-- Loading external files -->
<link rel="stylesheet" type="text/css" href="http://dfp.ingraye.com/creative/interstitial/shadowbox.css" />

<script type="text/javascript">
// Boolean flag to know if Shadowbox has been loaded
var ShadowboxOutputted = false;

// Function to check for Shadowbox and if it's not available, load it.
function initShadowbox()
{
// Checks if Shadowbox is exists
if (typeof(Shadowbox) == 'undefined')
{
// Checks if Shadowbox is has been loaded previously
if (! ShadowboxOutputted)
{
//only output the script once..
ShadowboxOutputted = true;
//output the script
document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://dfp.ingraye.com/creative/interstitial/shadowbox.js\"></scr" + "ipt>");
}
// Recursive until Shadowbox is loaded
setTimeout("initShadowbox()", 100);
}
else
{
// Shadowbox is loaded, do the set up for it
Shadowbox.init({
// Let's skip the automatic setup because we don't have any properly
// configured link elements on the page
skipSetup: true
});
// Shadowbox looks to be loaded, let's run it
loadShadowBox();
}
}
// Run the script to check for Shadowbox
initShadowbox();
</script>

<script type="text/javascript">
function loadShadowBox()
{
// Chrome seems to have issues if we just launch the Shadowbox because certain elements from the init hasn't been done yet
// So we check if the sb-container exists from the init
if (document.getElementById('sb-container'))
{
// If the sb-container is there, load up the interstitial
Shadowbox.open({
// Content is the HTML that is being served.
// Since this is a basic image ad, I can use the Click Macro (%%CLICK_URL_ESC%%) to track clicks.
// I also added the Cachebuster (%%CACHEBUSTER%%) at the end of the image to prevent caching.
// For Flash based ads, you will need to make your own embed code but need to pass the Click Macro via the clickTAG or Flashvars.
content: '<div id="advertisement-shadowbox" style="color: white;"><a href="%%CLICK_URL_ESC%%http://www.google.com/" target="_blank"><img src="http://dfp.ingraye.com/creative/interstitial/adbox.jpg?ord=%%CACHEBUSTER%%"/></a></div>',
// In Shadowbox, you have multiple "players" for types of content (html, iframe, flash, etc).
player: "html",
handleOversize: "resize",
title: "ADVERTISEMENT",
// Obviously set the size to how big your ad is
width: 512,
height: 468
});
}
else
{
// If sb-container doesn't exist, recursive until it does
setTimeout("loadShadowBox()", 100);
}
}
</script>

Looks to be quite a bit of code but hopefully it's documented so it's quite easy to understand and update for your own purposes. As I mentioned before, you can remove all the comments out to reduce the size.

I personally don't like the X (close) button on the bottom right so I modified the Shadowbox so that it displays at the top right follow instructions from here: http://dustincaruso.com/javascript/move-the-shadowbox-js-close-button-to-the-upper-right/

The default Preview mode won't work but if you use the preview "New Window" link on the page, it should execute the Interstitial fine.

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

-Ingraye

Last updated 2013-03-04
Updated code so it works in IE properly. Made it easier to read with more comments.

Last updated 2013-03-03
Recovery from old back-up.