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!!!!

*The information contained in this post is for general information purposes only. The information is provided by How to Create Responsive Tags in GPT without SizeMapping? and while we endeavor to keep the information up to date and correct, we make no representations or warranties of any kind, express or implied, about the completeness, accuracy, reliability, suitability or availability with respect to the website or the information, products, services, or related graphics contained on the post for any purpose.

Leave a Reply

Your email address will not be published. Required fields are marked *

Enable Notifications    OK No thanks