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.

Answer 2

You will need to use an iframe buster

You can try the code below. Remember that you will need to uncheck the "Serve into a SafeFrame" config in creative settings. The type of the creative must be Custom, Third-Party or a template)

if (top === self) {
        // 
} else {
    var parentIframes = top.document.querySelectorAll('iframe');
    for (var i=0; i < parentIframes.length; i++) {
        var el = parentIframes[i];
        if (el.contentWindow === self) {
            // here you can create an expandable ad
            var expandableAd;

            var googleDiv = el.parentNode;

            googleDiv.insertBefore(expandableAd, el);

        }
    }
}

More information:

• Iframe Buster purpose
• Working with Friendly Frames

More help:

• Choosing the GPT mode