Search code examples
google-dfp

HTML Creative template served with extra html/body tags


I'm building a responsive HTML creative template to serve a full screen ad. The ad is displayed on a mobile device, running iOS 6-7, using version 6.8.0 of the DFP SDK. I noticed that when serving an ad with my template, DFP wraps my HTML with extra html/body tags (see comments below):

<!-- the code below is from DFP --> 
<html><head>
<meta name="viewport"content="width=device-width,height=device-height,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0"/>
</head><body leftMargin="0" topMargin="0" marginwidth="0" marginheight="0">
<!-- my code starts here --> 
<html>
<head>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>
</head>
<body>
...
<!-- my code ends here -->  
<!-- the code below is from DFP --> 
</body></html>

The issue I'm having is that height=device-height from the injected HTML code makes my ad scrollable. My ads are displayed in landscape and for unknown reason device-height and device-width default to a same value - the device width. The HTML above is not valid because nested html/body tags and I can't control the viewport definition to remove the erronous height=device-height.

Questions:

  1. Is there a way to suppress DFP generated wrapping HTML (<html>...</html>) and rely on my code to supply it (so I can supply my own viewport)
  2. Any clues why landscape view of the ad defaults both width and height to the device width

Solution

  • I ended up using Javascript to update the header:

    <script type="application/javascript">
       var meta = document.getElementsByTagName("meta")[0];
       meta.setAttribute("content", 'width=device-width,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0');
    </script>