I have modified GPT (Google Publisher Tags) so it serves on size ads for phones and tablets and the other size for computer or larger screens. It works well but sizes are determined on load and when using tablet the ads stay the same regardless if you flip from landscape to portrait view. I added the code to dynamically refresh the ads on windows resize and that works as far refreshing goes, but sizes are still determined (I assume) on load and ads sizes do not change. How can I “refresh / reload” variables (size and size2) on window resize before ads are refreshed?
This is the code:
<script type='text/javascript'>
googletag.cmd.push(function() {
var width = document.documentElement.clientWidth;
var size;
if (width >= 320 && width < 728)
size = [320, 50]; // smartphones
else
size = [728, 90]; // desktops and tablets
var size2;
if (width >= 320 && width < 728)
size2 = [180, 150]; // smartphones
else
size2 = [160, 600]; // desktops and tablets
var slot1=googletag.defineSlot('/XXXXXXX/tp_home_topboard', size, 'div-gpt-ad-1380075538670-3').addService(googletag.pubads());
var slot2=googletag.defineSlot('/XXXXXXX/tp_home_skyscraper', size2, 'div-gpt-ad-1380222668349-0').addService(googletag.pubads())
googletag.pubads().enableSingleRequest();
googletag.enableServices();
$(window).resize(function(){googletag.pubads().refresh([slot1, slot2])});
});
</script>
You can now build responsive ads natively using DFP.
var mapping = googletag.sizeMapping().
addSize([1024, 768], [970, 250]).
addSize([980, 690], [728, 90]).
addSize([640, 480], [120, 60]).
addSize([0, 0], [88, 31]).
// Fits browsers of any size smaller than 640 x 480
build();
adSlot.defineSizeMapping(mapping);