Search
Clear search
Close search
Google apps
Main menu

How to ensure creatives render within iframes

If you're using Google Publisher Tags (GPT) to serve expanding and floating ads, and the creative is larger than the ad slot, your creatives may get cut off. By default, GPT tags use cross-domain iframes to serve creatives; this can be disabled so that ads serve in friendly iframes. Statically-sized creatives (such as 728x90 or 300x250 banners) render correctly regardless of the existence of a (cross-domain) iframe, because they do not require resizing of their container.

Make your creative aware of its surroundings

To make creatives compatible with iframes, the code for the creative should detect and handle the following four scenarios:

Detect if the creative is not served in an iframe

The creative checks and sees that it is not served in a frame or iframe. The creative can be directly written to the page.

Detect if the creative is in an iframe and can escape the iframe

The creative detects that it is in a frame or iframe. The creative code needs to access the correct frame or window when adding the ad's HTML and JavaScript code to the page. In most cases, that window will be the top window. In this scenario, the containing iframe is considered “friendly”, meaning it is not a cross-domain iframe.

Detect if the creative is in a SafeFrame (a special iframe)

The creative detects that it is in a cross-domain iframe. The creative code is able to access the SafeFrame API. Using SafeFrame function calls, the creative is able to communicate with the parent page and resize itself.

Detect if the creative is in an iframe and can't escape the iframe

The creative detects that it is in a cross-domain iframe that it can’t escape. We recommend that you provide an alternative behavior so that the creative still renders in a reasonable way. For example, for an expandable ad, if the ad can't escape the iframe, show a statically-sized backup image.

Example

Below is some sample code to detect each of the different scenarios. Replace each comment with the appropriate creative code.

<script type="text/javascript">
if(top==self){
/* The creative is not in an iframe. Display the ad. It might be possible to use document.write to display the creative. */
}else{
     try{
/* Use appropriate code to have the creative escape the iframe and show the ad. Most likely the code will need to use DOM functions and reference the top window. */
     }catch(e){
/* The creative cannot escape the iframe. Show an appropriate alternative. The alternative will remain inside of the iframe. */
}
}
</script>

Was this article helpful?
How can we improve it?