DoubleClick For Publishers (DFP) : Serving expandable ads using asynchronous GPT

Question

I'm using an asynchronous GPT to serve my expandable ad, but the creative is getting cut off because it seems that the asynchronous tags are not friendly iframes.

I used the DOM function to escape the iframe parent, but I think that i can't because the creative is rendering before the rendering of the page.

This is a sample of my tags

<script type='text/javascript' src='http://www.googletagservices.com/tag/js/gpt.js'>
    googletag.pubads().definePassback('6917646/H24info/H24INFO_ATF_HOME_728x90', [[728,90]]).setClickUrl('[INSERT_CLICK_COUNTER_HERE]').display();

    googletag.pubads().enableSingleRequest(); 
    googletag.pubads().addEventListener('slotRenderEnded', function(event) {

        var sas = document.getElementById("sas_format_33008");

        var gpt = document.getElementById("gpt_unit_6917646/H24info/H24INFO_ATF_HOME_728x90_1_ad_container");

        gpt.style.position = "absolute";
        gpt.style.zIndex = "100";

        sas.style.height = "90px";
    });
    googletag.enableServices();
</script>

Is there somebody who can help me please ?

Answer 1

Another option is to use Post Messages. But you will need to put an event listener in your main site. Something like this:

    <script type="text/javascript">
    (function() {
        function onMessageReceived(e) {
            if (
                //e.origin !== 'http://tpc.googlesyndication.com' ||
                typeof e.data !== 'object' ||
                typeof e.data.id !== 'string' ||
                e.data.cmd !== 'setStyle' ||
                typeof e.data.params !== 'object'
            ) {
                return;
            }

            var frame = document.getElementById(e.data.id);

            if (frame === null) {
                return;
            }

            Object.keys(e.data.params).forEach(function(param) {
                frame.style[param] = e.data.params[param];
            });
        }

        if (window.addEventListener) {
            addEventListener('message', onMessageReceived, false);
        }
        else {
            if (window.attachEvent) {
                attachEvent('onmessage', onMessageReceived);
            }
            else {
                window.onmessage = onMessageReceived;
            }
        }
    })();
</script>

Then in the creative code, you will have to call the event listener to resize the elements that you need to expand. For example:

<script>
(function(){
    if (window.top.postMessage) {
        window.top.postMessage({
            cmd: 'setStyle',
            id: 'div-of-the-banner',
            params: {
                display: 'block',
                height: '600px',
                width: '300px'
            }
        }, '*');
    }
})();
</script>

You may need to call this resize script several times if more than one element is actually fixing the size of your creative.