Skip to main content

How To Make Responsive Ads in DFP

Why You Need Responsive Ads units ?

  • So you have the responsive site and You have created the DFP ad units. You are running the Direct Campaign or Adsense/Adx display ads.
    Now you have the campaign to run on Desktop/Tablet/Mobile, Client have provided the assets.
  • But when you have setup the campaign with all the ad sizes like 728×90,970×250,320×50. But When you are checking the sites, You have noticed that 320×50 ad which is supposed to preview on mobile only is previewing on Desktop and tablet also.
    Same case with 728×90/970×90 which is previewing on mobile sites, Breaking the site structure.

How Can You Solve The Issue & Make The DFP Ad Units Responsive ?

Test Desktop float_inread DFP

Step 1) Pull the tags for the display tags with all sizes, Indicated below

dfp small business responsive ads

Step 2) Before implementing anything on site, First Create the DFP sponsorship Line item, Target the DFP Ad unit for which you have pull the tags in Step 1.

DFP Line Item

Step 3) Now Coming to Implementation Part, Below is the Code which we will place inside the head section of the webpage

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
</script>

<script>
  googletag.cmd.push(function() {
    googletag.defineSlot('/31617403xx/Technology_blog_DFP', [[728, 90], [970, 90], [320, 50]], 'div-gpt-ad-1500060708463-0').addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.pubads().collapseEmptyDivs();
    googletag.enableServices();
  });
</script>

Modification in The code, So The Final Code will be as Below

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
</script>
<script>
// GPT slots
 var gptAdSlots = []; // Created the Array To Get BrowserSize,Ad Size
  googletag.cmd.push(function() {
  var mapping = googletag.sizeMapping().
  //addSize is the browser size and each subsequent dimension is an ad size addSize([Browser Width,Browser Height],[Ad Width,Ad Height]).
  // Screens of any size smaller than infinite but bigger than 1024 x 768
  addSize([1024, 768], [970, 90]). 			
// Screens of any size smaller than 1024x 768 but bigger than 980 x 690
  addSize([980, 690], [[728, 90],[970,90]]).
// Screens of any size smaller than 980 x 690 but bigger than 320 x 480	
  addSize([320, 480], [320, 50]).
 // Fits browsers of any size smaller than 320 x 480				
  addSize([0, 0], [88, 31]).                 
  build();
 
    gptAdSlots[0]=googletag.defineSlot('/31617403xx/Technology_blog_DFP', [[728, 90], [970, 90], [320, 50]], 'div-gpt-ad-1500060708463-0').
    defineSizeMapping(mapping).
    
    addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
  });
</script>

Step 4) Implement the Code As Provided in The Body Section of the Page

<div id='div-gpt-ad-1500060708463-0'>
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1500060708463-0'); });
</script>
</div>

Check the live example here

DFP Responsive Ads Example

DFP Responsive Ads Example

Also Check below Full Code Preview: Just Replace the ad unit code/Network code present in Head and Div id in Body

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Ad Tag Macros</title>
       <!-- Start: GPT Async -->
        <script type='text/javascript'>
            var gptadslots = [];
            var googletag = googletag || {};
            googletag.cmd = googletag.cmd || [];
            (function () {
                var gads = document.createElement('script');
                gads.async = true;
                gads.type = 'text/javascript';
                var useSSL = 'https:' == document.location.protocol;
                gads.src = (useSSL ? 'https:' : 'http:') + '//www.googletagservices.com/tag/js/gpt.js';
                var node = document.getElementsByTagName('script')[0];
                node.parentNode.insertBefore(gads, node);
            })();
        </script>
<script>
    // GPT slots
    var gptAdSlots = [];
    googletag.cmd.push(function () {
        var mapping = googletag.sizeMapping().
                addSize([1248, 0], [970, 90]).
                            addSize([1000, 690], [[728, 90], [970, 90]]).
                            addSize([320, 0], [320, 50]).build();
                
                
                var mapping1 = googletag.sizeMapping().
addSize([1248, 0], [970, 90]).
                            addSize([1000, 690], [[728, 90], [970, 90]]).
                            addSize([320, 0], [320, 50]).build();
                
                
                var mapping2 = googletag.sizeMapping().
               addSize([1248, 0], [970, 90]).
                            addSize([1000, 690], [[728, 90], [970, 90]]).
                            addSize([320, 0], [320, 50]).build();
                
                
                var mapping3 = googletag.sizeMapping().
            addSize([1248, 0], [970, 90]).
                            addSize([1000, 690], [[728, 90], [970, 90]]).
                            addSize([320, 0], [320, 50]).build();

        // Fits browsers of any size smaller than 640 x 480

        gptAdSlots[0] = googletag.defineSlot('/31617403xx/Technology_blog_DFP', [[320, 50], [728, 90], [970, 90]], 

'div-gpt-ad-1503908220016-0').defineSizeMapping(mapping).addService(googletag.pubads());
        
        gptAdSlots[1] = googletag.defineSlot('/31617403xx/Technology_blog_DFP', [[728, 90], [970, 90], [320, 50]], 

'div-gpt-ad-1503908809228-0').defineSizeMapping(mapping1).addService(googletag.pubads());
        
        gptAdSlots[2] = googletag.defineSlot('/31617403xx/Technology_blog_DFP', [[728, 90], [300, 50], [320, 50], [970, 

90]], 'div-gpt-ad-1503909061583-0').defineSizeMapping(mapping2).addService(googletag.pubads());
        
        gptAdSlots[3] = googletag.defineSlot('/31617403xx/Technology_blog_DFP', [[728, 90], [970, 90], [320, 50], [300, 

50]], 'div-gpt-ad-1503909387700-0').defineSizeMapping(mapping3).addService(googletag.pubads());
        googletag.pubads().enableSingleRequest();
        googletag.pubads().collapseEmptyDivs();
        googletag.enableServices();
    });
</script>

    </head>
    <body>
        
Ad Unit 1
        <div id='div-gpt-ad-1503908220016-0'>
            <script>
            googletag.cmd.push(function() { googletag.display('div-gpt-ad-1503908220016-0'); });</script>
        </div>

Ad Unit 2
        <div id='div-gpt-ad-1503908809228-0'>
            <script>
            googletag.cmd.push(function() { googletag.display('div-gpt-ad-1503908809228-0'); });</script>
        </div>

Ad Unit 3
        <div id='div-gpt-ad-1503909061583-0'>
            <script>
            googletag.cmd.push(function() { googletag.display('div-gpt-ad-1503909061583-0'); });</script>
        </div>

Ad Unit 4
        <div id='div-gpt-ad-1503909387700-0'>
            <script>
                        googletag.cmd.push(function() { googletag.display('div-gpt-ad-1503909387700-0'); });
            </script>
        </div>
    </body>
</html>

Facebook Comments

 
 
   
   
     
   
       
 
   

Admin

My name’s Sachin, and I am Blogger and tech geek, currently working in Digital Advertisement Domain having work experience of more than 3 years.
Ad-Tag Macros is the professional association dedicated exclusively to online advertising operations and technology.
We focus primarily on topics such as ad serving and related technologies, yield management, policies, procedures, and standards.
Experience
Platform
DFP Small Business
Google Analytics
Native Ads
Mgid
WP
ComScore
Blogspot
AdSense
Skills
HTML/CSS
Javascript
Yield optimization
Trafficking
Mobile web ads
Display, video ads
Troubleshooting creative issue
SEO and Blog revenue Optimization
For Any Queries Please Contact Me
Contact@adtagmacros.com

Leave a Reply

%d bloggers like this: