iosfullscreeninterstitialgoogle-dfpdouble-click-advertising

Interstitial DFP ad doesn't fill the screen

I try to integrate interstitial after the launchscreen of my application (iOS). It's working as expected with ads provided by Google for testing. My problem is to create my own creatives.

As there are only 4 authorized sizes for interstitials (320x480, 480x320, 768x1024 and 1024x768) I don't know how to set images for iPhone 5, 6, ... or make the 320x480 image scales to fullscreen.

I tried to create an HTML5 creative that resize the image to fit the screen but it's still 320x480:

interstitial screenshot

Here is the code of the HTML 5:

<!DOCTYPE html>
<html>
  <head>
    <title>ad</title>
    <script type="text/javascript">
      var clickTag = "http://www.google.com";
    </script>
    <style type="text/css" media="screen">

html{
  background-color: #CCC;
}
body{
  /* Workaround for some mobile browsers */
  min-height:100%;
} 
.className {
    max-width: 100%;
    max-height: 100%;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
}
    </style>
  </head>
  <body>
  <a href="javascript:window.open(window.clickTag)">
    <img src="image.png" class="className" />
  </a>
  </body>
</html>

I know it's possible to create macros which assign image depending on the size of the screen but I didn't found any example. I'm open to any suggestion.

Sorry for the long post, it's probably a duplicate but provided answers aren't working.

Solution

  • I have found a working solution by creating a Custom creative (New creative > Mobile App > Custom).

    I used the code bellow (Code snippet field) to insert the image (resized and centered to the screen) and to link the image to the click-through URL:

    <div style="max-height:100%;max-width:100%; text-align: center;">
  <a href="%%CLICK_URL_UNESC%%%%DEST_URL%%">
        <img src="%%FILE:PNG2%%" style="max-height:100%;max-width:100%;vertical-align: middle;" />
    </a>
</div>