How to run fully responsive DoubleClick Native Ads without IFRAMEs

Our marketing & advertisement department recently has been asking for slots to be managed by an adserver on our homepage to run native ads & house campaigns.

This integration should not use typical banner / IAB formats but feel like an integrated part of the website should be manageable using campaigns to track goals like CTR, impressions etc.

Spoiler alert: This is how we serve native ads now (Mobile / Desktop):



And this is all done using DFP and a structured, simple way to deliver and manage these campaigns. See the edit form below.


But this was no super easy task, we had to tweak a few things …

The major drawback of native Ad Support in DoubleClick

DFP is now supporting Custom Native Ads and this seemed to be exactly what we’re looking for.

There is one thing that we’ve stumbled upon pretty soon – all native ads, including custom native formats, are rendering using an IFRAME. This means these ads do not share the styles with the host/parent page and responsiveness is somehow complicated.

You could start adding your own styling to the inline CSS used for native ads but this would be blowing up things.

Our workaround: Use postMessage to pass the final ad content to the parent page for rendering

Our native ad is still living within an IFRAME, but invisible to the end user. All it does is creating the ad content and pass this content (simply a string) to the parent page for rendering (basically add a string to the DOM). This way, the ad really becomes part of the DOM, fully responsive and enjoys the same features as the rest of the page.

So this is how it works:

Preparations on our own website – add message handling / rendering stuff

Prepare the parent page to accept incoming ad content to be rendered

Place a div where you want to have your ad to show up.

<div class="bunte-embed-ad" data-container-ad-unit-id="/23748239/BUNTE_Home_Beauty_Teaser"></div>

The ad-unit-id is holding our Ad Unit ID, this is important as the page has to know where to place the incoming ad string, especially as we have multiple native ad slots on our pages.

The second part is adding the necessary script to handle the incoming ad content string that will be fired from the DFP Native Ad IFRAME back to the parent page (= our own HTML page).

We’ve added this script to our basic utility JavaScript.

var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent,function(e) {

var key = e.message ? "message" : "data";
 var data = e[key];

var eventName = data.message || 'ignore';

if (eventName == 'adContentAvailable') {
 console.log( 'ad data available: ', data );
 // replace content 
 $('div,li').filter('[data-container-ad-unit-id="' + data.adUnit + '"]').html( data.content );
 //run function//

The function is doing a pretty simple thing – once a message with the eventName adContentAvailable is available, take the adUnit Parameter of this message (used to identify the Ad Unit / Placement) and add the ad content (data.content) to the markup at that position. Please see the block below (DFP definition) to see how we build this message with the given params.

Proper setup of DFP native ads – post message with ad content to parent page

Field definition example


Nothing groundbreaking here, a title, kicker, image (uploaded by the marketer) and target link.

The custom HTML for our native ad style

The native ad style html will not output anything, but concat a string instead and post this string to the parent for further handling.

var link = '%%CLICK_URL_UNESC%%%%DEST_URL%%';
var content =

'<div class="row">' +
'<div class="col-xs-6 col-sm-12">' +
' <a href="' + link + '" class="channel-item-img">' +
' <img src="[%Image%]" data-src="[%Image%]" alt="Image" width="405" height="225" class="img-responsive">' +
' <span class="tag-photo">[%Tag%]</span>' +
' </a>' +
'</div>' +
'<div class="col-xs-6 col-sm-12">' +
' <h3>' +
' <a href="' + link + '" class="channel-item-subtitle">[%Kicker%]</a>' +
' <a href="' + link + '" class="channel-item-title"> [%Title%] </a>' +
' </h3>' +
'</div>' +

var data = { 'message' : 'adContentAvailable', 'adUnit' : '%%ADUNIT%%', content : content };
parent.postMessage( data ,"*");

The major part of this markup block is about compiling our teaser format markup. This is exactly the same as our other teasers on the website look like. As our ad will be added to the proper placement with the exact same structure, all formatting will automatically apply and fit the ad fully responsive in our environment.

The important part here is the last script block.

The generated string will be passed to the parent page for rendering, adUnit will let the parent page know which Ad Unit we’re talking about there. This string will match the data-container-ad-unit-id property shown above in the markup added to the parent page to place the ad at the correct position.

It’s working – Fully responsive native ads using DFP!

It’s now finally working and editors and marketers are happy to easily serve native ads using DFP campaigns.