How to properly write a DFP out of page ad unit?

Question

I am developing a javascript-rendered mobile web interstitial. The layout is fully responsive, hence it will take 100% of the provided screen\iframe.

I now wish to display the interstitial through DFP.

At first I created a sized ad unit (320x480) and it worked just fine, but the interstitial was limited to the boundaries of the iframe.

I founf a new line item type called Out-of-page. The documentation states that:

They may include pop-ups and floating line items and are sometimes called interstitials.

But when I try to embed the interstitial in a test site, what happens is that the iframe stays 1x1, making the interstitial invisible (if I manually enlarge it with a debugger, I see it)

---

My settings:

• line item with inventory sizes of 1x1 and out of page
• creative with my code snippet
• ad unit is defined as size 1x1

---

I read in the documentation that:

If you're using a DoubleClick tag creative, you must ensure that the creative code trafficked on the other end of the DoubleClick tag (i.e., another DFP network) is properly coded for an out-of-page ad unit.

What does it mean, in terms of DFP Out-of-page interstitial, that the ad is "properly coded"? How do I force the interstitial to take all the size of the screen?

Answer 1

After consulting with DFP support, I was able to create an out of page interstitial ad unit by following these steps:

1. Create a new Ad Unit, with inventory size of "Out of Page"
2. Create a new Line Item and a mobile creative with inventory size "Out of Page", this line item targets the former Ad Unit.

3. Generate new tags under the Inventory tabs, selected "Enable synchronous requests" and "Out of Page" on step 2. The "Enable synchronous requests" seems to be the key to make this work.

   According to Google Support:

   We usually recommend our publishers to implement Sync GPT when serving out of page (interstitial) ads as the creative renders in a element instead of an iFrame

4. Place this tag in a test page (with the necessary html, head and body tags) and Voilà!

Answer 2

Not sure this is what you need, and I don't have that much experience with DFP, but I just ran into a similar problem that I solved by managing the size of the iframe manually. Maybe this can help you too.

The DFP API has an event you can listen to that lets you know that the ad has finished rendering, upon which I would suggest you change the iframe properties to be full width, and a whatever height would work for the placement.

Assuming you have jQuery on your page, this can be done quite easily. After setting up the DFP plugin (calling defineSlot etc.) you can add a listener for this event like so:

googletag.pubads().addEventListener('slotRenderEnded', function(){
  var $adFrame = $('#id-of-the-iframe');
  $adFrame.css({width: '100%', height: '500px'});
});

This is outlined in DFP docs here.

Hope this helps.

EDIT: After posting I realized that the code example I posted is from the DFP GPT library. Perhaps you are not using this. This SO question has a link to a library that someone has created to listen to events that DFP fires. Perhaps you can use that and use the technique I described?

Again - hope this helps :)