How to Serve Responsive ads on Window resize by Dynamically?

Everyone knows the size mapping function will allow the browser to serve ads based on the browser or screen width. But size mapping not serve the responsive ads when the user resize the screen or browser width without refreshing the page after resize.

What is the solution to make the ad slot responsive?

Publisher need to trigger the refresh function when the user resize the screen or browser width.

I’m not an developer, How to do that?

Yeah, that is okay. We will give you the simplified solution here.

Here is my sample Tag without custom resize script.

HEAD Tag

<!-- Start GPT Tag -->
<script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>
<script>
 var TopLeaderboard;
  window.googletag = window.googletag || {cmd: []};
  googletag.cmd.push(function() {
    var mapping1 = googletag.sizeMapping()
                            .addSize([970, 0], [[728, 90], [970, 90]])
                            .addSize([728, 0], [728, 90])
                            .addSize([468, 0], [468, 60])
                            .addSize([0, 0], [320, 50])
                            .build();

    TopLeaderboard = googletag.defineSlot('/200894144/Responsive', [[728,90]], 'div-gpt-ad-9062347-1')
             .defineSizeMapping(mapping1)
             .addService(googletag.pubads());

    googletag.pubads().setTargeting('Test_Mode', ['ON']);
    googletag.enableServices();
  });
</script>
<!-- End GPT Tag -->

BODY Tags

<!-- GPT AdSlot 1 for Ad unit 'Responsive' ### Size: [[728,90]] -->
<div id='div-gpt-ad-9062347-1'>
  <script>
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-9062347-1'); });
  </script>
</div>
<!-- End AdSlot 1 -->

How the refresh script looks like?

<script>
if (window.addEventListener) {              
    window.addEventListener("resize", browserResize);
} else if (window.attachEvent) {                 
    window.attachEvent("onresize", browserResize);
}
var InitialResize = window.innerWidth;

function browserResize() {
    var afterResize = window.innerWidth;
    if ((InitialResize < (970) && afterResize >= (970)) || (InitialResize >= (970) && afterResize < (970)) ||
        (InitialResize < (728) && afterResize >= (728)) || (InitialResize >= (728) && afterResize < (728)) ||
        (InitialResize < (468) && afterResize >= (468)) ||(InitialResize >= (468) && afterResize < (468))) 
        
        {
        InitialResize = afterResize;
              
        googletag.cmd.push(function() {
            googletag.pubads().refresh([TopLeaderboard]);
        });

        }
        
    }
</script>

How to link the resize script with my actual GPT tag?

The only thing you have to consider is ad slot ID. Most of the publisher declaring each slot as “gptadslots[0]“. In my example I used custom declaration as “TopLeaderboard“. So the refresh function to be added with this adslot name.

Syntax for refresh function

googletag.cmd.push(function() {
            googletag.pubads().refresh([TopLeaderboard]);
        });

Now you can correlate all together. See the working example below.