How to Create Responsive Tags in GPT without SizeMapping?

Few of the CMS are not allowing the sizemapping function on the publisher sites. For those sites how to create responsive tagging. This issue exists in Wix CMS. I’m sure plenty of new users experiencing this issue.

What requires for responsive Tagging?

In general, responsive design requires screen width, based on the ad request to be called. First step is to write a code to determine screen width.

Can we use CSS?

Yes, but it will cause additional impressions counted every time even when we hide or show ads.

What is the best way to do it?

Calling CSS via JavaScript using ‘matchMedia’ and ‘matches’ function.

Sample code

var Responsive = window.matchMedia( "(min-width: 970px)" );

if (Responsive.matches) {
 // do something 
}
else
{
// do something 
}

How to define GPT in Match Media?

Declare variable inside the “cmd.push” function and add the ad slot declaration inside the “if” conditions. Please see the example code below,

Responsive GPT header Code:

<script>
  window.googletag = window.googletag || {cmd: []};
  
googletag.cmd.push(function() {

    
    var Responsive = window.matchMedia( "(min-width: 970px)" );

if (Responsive.matches) {
      // alert("window width >= 960px");
  
  googletag.defineSlot('/200894144/Responsive', [[970,250]], 'div-gpt-ad-6160356-1')
             .addService(googletag.pubads());
} else {
     //alert("window width < 960px");
  googletag.defineSlot('/200894144/Responsive', [[320,50]], 'div-gpt-ad-6160356-1')
             .addService(googletag.pubads());
}
 
     googletag.pubads().setTargeting('Test_Mode', ['ON']); 
    googletag.enableServices();
  });
</script>

Live working example

See the Pen GPT Responsive without Mapping) on CodePen.

Send your feedback and ask questions if you have any.

Hope this article helps.

Thank you!!!!