Custom code on Google DFP asynchronous tag

Question

I need to run a campaign on Google DFP using a custom code that will add a full screen, responsive div, above my website. The problem, here: it just works using synchronous Google DFP tags, not asynchronous -- and it must be asynchronous.

I really don't know what the problem is (maybe the fact that the adsize is 1x1 and the iFrame don't know it should expands? Maybe my whole code should be out of the iFrame?), but I know the ad is loaded using a Friendly iFrame...

How could I make this happen?

Here's the code that was supposed to appear above my website.

<!-- INTERSTITIAL -->
<div class="container-fluid">
  <a href="%%CLICK_URL_UNESC%%[%URL%]" target="[%TARGET%]">
  <div id="AD_TakeOver">
<span class="FloatRight Exo PaddingRight16" style="position: fixed; right: 8px;" title="Anuncie você também no JUDÃO! Entre em contato. :)">
<svg style="vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000" height="16" width="16"><path d="M1840.478 1080.596l61.522-426.8-397.714 61.775 240.748-329.09-333.15-243.29-264.875 362.072-51.6-331.62L668.593 114l66.246 425.767L98 328.564l394 544.24-302.02 46.91-61.522 426.798 454.81-70.64-268.363 366.838L648.055 1886l244.294-333.94 42.535 273.38 426.96 60.56-65.61-421.678 362.303 264.58 243.462-332.8-367.053-268.05z" fill="#FFF"/></svg> PUBLICIDADE</span>

<div class="Bottom" style="text-align: center;">
<svg style="margin-top: 62px;" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 306 306"><path fill="#FFF" d="M270.3 58.65L153 175.95 35.7 58.65 0 94.35l153 153 153-153"/></svg>
</div>
  </div></a>
    </div>

<style>
#AD_TakeOver{
background-image: url("[%IMAGE%]");
-webkit-background-size:cover!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;

background-size:cover!important;
background-attachment:fixed!important;
background-position:center!important;
background-repeat:no-repeat!important;
height: 100vh;
position:relative;
border-bottom:8px SOLID #000;
border-top:1px SOLID #000;
color:#FFF; }

#AD_TakeOver .Bottom {
position:absolute;
bottom:0;
background-color:transparent!important;

background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAB4CAQAAAEFAdueAAAAhUlEQVQoz3WQ0Q5DIQhDTwtu///He9jVobKEkFKaFgWZMGmGGeY1613wMGkS/AW7sopHEct4r5j9qOzIKPpqIrChc15YJgufpa9E/w+906NErK32xOe8DiOEjLABjIhnvFoYn9s5mlwolrjjjq12XdaMy6CzUsPZuNzcPUbV4FjUL/mN+gBXngOnAbq0QwAAAABJRU5ErkJggg==) repeat-x;

background-size:2px 120px;
border-bottom:0!important;
overflow:hidden!important;
height:120px!important;
max-height:120px!important;
width:100%;
vertical-align:bottom;
line-height:120px;}

</style>
<!-- /INTERSTITIAL -->`

Answer 1

So the code example is the code that's specified in a creative?

The problem is exactly as you stated! The reason it works in the synchronous version is because the code is inserted in the DOM directly. In case of asynchronous it's inside an iframe with a width and height of 1px.

I'm not a big fan of having that much HTML/CSS code inside a creative. There are a few solutions:

1. use a rich media provider (costs money and for something this 'simple', I'd go with approach 2)
2. write a JS solution (I believe that's how RMP's work, but I haven't investigated it)

Approach 2:

Either write some JS that's called inside the creative to set the width and height of the iframe OR (and what I prefer)

Inside your creative, write something like

<script>
showInterstitial('%%CLICK_URL_UNESC%%[%URL%]', '[%TARGET%]', '[%IMAGE%]')
</script>

All the HTML and CSS (except the background-image css of #AdTakeover) code can be moved to the sites html/css-folders.

You could add the interstitial-html to every page with display: none. Once this function is called, you can change it to display: block and update the required DOM-elements (the link, the background-image with an inline-style on the #AdTakeover) etc.