21

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?

Lizozom
  • 1,926
  • 2
  • 17
  • 30

3 Answers3

19

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à!

Lizozom
  • 1,926
  • 2
  • 17
  • 30
  • 1
    Awesome! Thanks for the clear, concise solution. This works for me as well on my DFP / Wordpress site. – ndmweb May 14 '15 at 21:58
  • 1
    What do you mean on #4 instruction? I'm implementing this on WP but a bit confused on your words: "with the necessary html, head and body tags". I tried it actually but it didn't work as interstitial ad has already html,head and body tags.(I believed thats the reason) – Raf Jan 15 '16 at 18:08
  • Number #4 means that you can test it in a test page. If you use WP \ interstitital ad, this is not needed. – Lizozom Jan 17 '16 at 13:00
  • 1
    Big problem with this solution. You cant use asynchronous and synchronous advert on one page. _Mixing asynchronous and synchronous ad tags in the same web page is not recommended. You can use asynchronous tags on some pages of your website and synchronous tags on others, but avoid combining these rendering modes on the same page._ – Zhivago Nov 28 '17 at 11:59
6

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

Community
  • 1
  • 1
grammar
  • 851
  • 9
  • 21
  • This is cool, if you can change the hosting site's code. My goal is to achieve this without any change on the site's side. – Lizozom May 14 '15 at 09:46
  • How can I detect if the creative is closed to decrease the size of this iframe ? Otherwise, once the creative is closed, iframe still covers the page and prevents any clicks on elements behind it. – divyenduz Mar 20 '17 at 10:35
0

I just ran into this. It seems that DFP has gotten rid of the Enable Synchronous Requests option. This was never that great of a solution (as others pointed out) for a couple of reasons. First, it doesn't work well if you have async requests on the same page. And second, it is "blocking" and slows your page down.

Friendly iFrame

It seems that now the preferred method is to use a "Friendly iFrame". To use a Friendly iFrame, when setting up your creative in DFP, uncheck the "Serve into a SafeFrame". DFP will now serve your ad into a "Friendly iFrame". A Friendly iFrame is an iFrame that is served from the same domain as the parent window. Because the domains match, browser security rules allow JavaScript in the iframe to access the parent window (via window.parent.document). Now you can adjust the size of the iframe to make it full screen. To do this, add something like the below to your ad code:

window.parent.document.getElementById(window.name).style.cssText = "position: fixed; top: 0; left: 0; bottom: 0; width: 100%; height: 100%; margin: 0;";

If your ad has a way to close itself, make sure to also shrink the Friendly iFrame back down on close (otherwise the expanded Friendly iFrame will block mouse actions on the underlying page). You can do this like so:

window.parent.document.getElementById(window.name).style.cssText = "position: relative; width: 0px; height: 0px;";

A Couple of Notes

For security reasons, whenever possible, SafeFrame is the preferred way to serve ads. SafeFrame provides an API for communicating with the parent window without allowing full access. SafeFrame includes an expand option for increasing the size of the iFrame, however, DFP's SafeFrame implementation doesn't seem to allow you to expand to fullscreen. For this reason, it seems best to use a Friendly iFrame for interstitials. You can try out DFP's SafeFrame implementation here.

Note that you should only allow content that you fully trust to run in a Friendly iFrame as it can do a lot of malicious stuff (such as stealing user session cookies, etc).

Collin Krawll
  • 1,362
  • 13
  • 13