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 ?
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.