Google DFP and Responsive Design

[Douglas Taylor]

I looked through the tutorial for GoogleAds in order to customize ad delivery dimensions for a particular screen size.

However, has anyone had any recent success with Google DFP and responsive design where the code will produce 728x90 for large screens, 468x60 for medium, etc?

Thanks in advance

 

[Paul B]

What do you mean by recent success?

This guide explains how to serve specific sized ads at different viewport widths: https://xenforo.com/community/resources/responsive-adsense.2084/

 

[woody]

The process for AdSense is not the same as that for DFP responsive. Mine is extensive, and works quite well.

<!-- DFP -->
<script type='text/javascript'>
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 type='text/javascript'>
googletag.cmd.push(function() {

var mappingRCheader = googletag.sizeMapping().
            addSize([1100, 500 ], [728, 90]).
        addSize([750, 450 ], [468, 60]).
        addSize([320, 400 ], [[320, 50], [300, 50]]).
        build();
       
var mappingRCfooter = googletag.sizeMapping().
            addSize([1100, 500 ], [728, 90]).
        addSize([850, 450 ], [468, 60]).
        addSize([320, 1 ], []).
        build();
       
var mappingRCsidebarbottom = googletag.sizeMapping().
            addSize([1100, 500 ], [[300, 600], [160, 600], [300, 250], [120, 600]]).
        addSize([850, 450 ], [300, 250]).
        addSize([320, 1 ], []).
        build();
       
var mappingRCsidebartop = googletag.sizeMapping().
        addSize([850, 450 ], [300, 250]).
        addSize([320, 1 ], [300, 100]).
        build();
       
var mappingRCinline = googletag.sizeMapping().
            addSize([1100, 500 ], [728, 90]).
        addSize([850, 450 ], [468, 60]).
        addSize([320, 400 ], [[320, 50], [300, 50]]).
        build();   
       
googletag.defineSlot('/100xxxx/RC-Footer', [[468, 60], [728, 90]], 'div-gpt-ad-1414061648927-0').defineSizeMapping(mappingRCfooter).addService(googletag.pubads());
googletag.defineSlot('/100xxxx/RC_160-T1', [[300, 600], [160, 600], [300, 250], [120, 600]], 'div-gpt-ad-1414061648927-1').defineSizeMapping(mappingRCsidebarbottom).addService(googletag.pubads());
googletag.defineSlot('/100xxxx/RC_300-T1', [300, 250], 'div-gpt-ad-1414061648927-2').addService(googletag.pubads());
<xen:if is="{$contentTemplate} == 'member_view'">googletag.defineSlot('/100xxxx/RC_ad_member_view_below_avatar_180x150', [180, 150], 'div-gpt-ad-1414061648927-3').addService(googletag.pubads());</xen:if>
googletag.defineSlot('/100xxxx/RC_header728-T1', [[300, 50],[320, 50], [468, 60], [728, 90]], 'div-gpt-ad-1414061648927-4').defineSizeMapping(mappingRCheader).addService(googletag.pubads());
<xen:if is="in_array({$contentTemplate}, array('thread_view', 'forum_view'))">googletag.defineSlot('/100xxxx/RC_Inline', [[300, 50], [320, 50], [468, 60], [728, 90]], 'div-gpt-ad-1418919088194-0').defineSizeMapping(mappingRCinline).addService(googletag.pubads());</xen:if>
googletag.defineSlot('/100xxxx/RC_Wallpaper', [1, 1], 'div-gpt-ad-1414438252771-0').addService(googletag.pubads());

googletag.pubads().setTargeting("forumid", "{$forum.node_id}");
googletag.enableServices();
});
</script>
<!-- /DFP -->

 

[AzzidReign]

You can check out my guide in the resource center Link in the sig.

 

[RoyalRumble]

The process for AdSense is not the same as that for DFP responsive. Mine is extensive, and works quite well.

<!-- DFP -->
<script type='text/javascript'>
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 type='text/javascript'>
googletag.cmd.push(function() {

var mappingRCheader = googletag.sizeMapping().
            addSize([1100, 500 ], [728, 90]).
        addSize([750, 450 ], [468, 60]).
        addSize([320, 400 ], [[320, 50], [300, 50]]).
        build();
      
var mappingRCfooter = googletag.sizeMapping().
            addSize([1100, 500 ], [728, 90]).
        addSize([850, 450 ], [468, 60]).
        addSize([320, 1 ], []).
        build();
      
var mappingRCsidebarbottom = googletag.sizeMapping().
            addSize([1100, 500 ], [[300, 600], [160, 600], [300, 250], [120, 600]]).
        addSize([850, 450 ], [300, 250]).
        addSize([320, 1 ], []).
        build();
      
var mappingRCsidebartop = googletag.sizeMapping().
        addSize([850, 450 ], [300, 250]).
        addSize([320, 1 ], [300, 100]).
        build();
      
var mappingRCinline = googletag.sizeMapping().
            addSize([1100, 500 ], [728, 90]).
        addSize([850, 450 ], [468, 60]).
        addSize([320, 400 ], [[320, 50], [300, 50]]).
        build();  
      
googletag.defineSlot('/100xxxx/RC-Footer', [[468, 60], [728, 90]], 'div-gpt-ad-1414061648927-0').defineSizeMapping(mappingRCfooter).addService(googletag.pubads());
googletag.defineSlot('/100xxxx/RC_160-T1', [[300, 600], [160, 600], [300, 250], [120, 600]], 'div-gpt-ad-1414061648927-1').defineSizeMapping(mappingRCsidebarbottom).addService(googletag.pubads());
googletag.defineSlot('/100xxxx/RC_300-T1', [300, 250], 'div-gpt-ad-1414061648927-2').addService(googletag.pubads());
<xen:if is="{$contentTemplate} == 'member_view'">googletag.defineSlot('/100xxxx/RC_ad_member_view_below_avatar_180x150', [180, 150], 'div-gpt-ad-1414061648927-3').addService(googletag.pubads());</xen:if>
googletag.defineSlot('/100xxxx/RC_header728-T1', [[300, 50],[320, 50], [468, 60], [728, 90]], 'div-gpt-ad-1414061648927-4').defineSizeMapping(mappingRCheader).addService(googletag.pubads());
<xen:if is="in_array({$contentTemplate}, array('thread_view', 'forum_view'))">googletag.defineSlot('/100xxxx/RC_Inline', [[300, 50], [320, 50], [468, 60], [728, 90]], 'div-gpt-ad-1418919088194-0').defineSizeMapping(mappingRCinline).addService(googletag.pubads());</xen:if>
googletag.defineSlot('/100xxxx/RC_Wallpaper', [1, 1], 'div-gpt-ad-1414438252771-0').addService(googletag.pubads());

googletag.pubads().setTargeting("forumid", "{$forum.node_id}");
googletag.enableServices();
});
</script>
<!-- /DFP -->

Woody would you mind sharing an example of the actual ad placement/unit code?

 

[woody]

There is no difference in the unit code

current head code:

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

<script type='text/javascript'>
googletag.cmd.push(function() {

var mappingRCheader = googletag.sizeMapping().
            addSize([1100, 0 ], [728, 90]).
        addSize([750, 0 ], [[468, 60], [320, 50], [300, 50]]).
        addSize([0, 0 ], [[320, 50], [300, 50]]).
        build();      
var mappingRCfooter = googletag.sizeMapping().
            addSize([1100, 0 ], [[728, 90], [970, 90], [970, 250]]).
        addSize([850, 0 ], [[468, 60], [300, 100], [320, 100], [320,50], [300, 50]]).
        addSize([0, 0 ], [[300, 100], [320, 100], [320,50], [300, 50]]).
        build();      
var mappingRCsidebarbottom = googletag.sizeMapping().
            addSize([1100, 0 ], [[300, 600], [160, 600], [300, 250], [120, 600]]).
        addSize([850, 0 ], [300, 250]).
        addSize([0, 0 ], []).
        build();      
var mappingRCsidebartop = googletag.sizeMapping().
        addSize([850, 0 ], [300, 250]).
        addSize([0, 0 ], [[300, 250], [300, 100]]).
        build();  
var mappingRCinline = googletag.sizeMapping().
            addSize([1100, 0 ], [728, 90]).
        addSize([850, 0 ], [[468, 60], [320, 50], [300, 50]]).
        addSize([0, 0 ], [[320, 50], [300, 50]]).
        build();      
googletag.defineSlot('/100xxxx/RC-Footer', [[320, 100], [300, 100], [320,50], [300, 50], [468, 60], [970, 250], [970,50], [728, 90]], 'div-gpt-ad-12345678-0').defineSizeMapping(mappingRCfooter).addService(googletag.pubads());
googletag.defineSlot('/100xxxx/RC_160-T1', [[300, 600], [160, 600], [300, 250], [120, 600]], 'div-gpt-ad-12345678-1').defineSizeMapping(mappingRCsidebarbottom).addService(googletag.pubads());
googletag.defineSlot('/100xxxx/RC_300-T1', [[300, 250], [300, 100]], 'div-gpt-ad-12345678-2').addService(googletag.pubads());
<xen:if is="{$contentTemplate} == 'member_view'">googletag.defineSlot('/1004256/RC_ad_member_view_below_avatar_180x150', [180, 150], 'div-gpt-ad-12345678-3').addService(googletag.pubads());</xen:if>
googletag.defineSlot('/100xxxx/RC_header728-T1', [[320, 50],[300, 50], [468, 60], [728, 90]], 'div-gpt-ad-12345678-4').defineSizeMapping(mappingRCheader).addService(googletag.pubads());
<xen:if is="in_array({$contentTemplate}, array('thread_view', 'forum_view'))">googletag.defineSlot('/100xxxx/RC_Inline', [[300, 50], [320, 50], [468, 60], [728, 90]], 'div-gpt-ad-12345678-0').defineSizeMapping(mappingRCinline).addService(googletag.pubads());</xen:if>
    googletag.pubads().setTargeting("VisitorID", "{$visitor.user_id}");
    googletag.pubads().setTargeting("Template", "{$contentTemplate}");
    googletag.pubads().setTargeting("ForumID", "{$forum.node_id}");
    googletag.pubads().setTargeting("ParentID", "{$forum.parent_node_id}");
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>

current unit code:

<div id='div-gpt-ad-12345678-9' align='center'  style='padding: 10px 0px 5px;'>
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-12345678-9'); });
</script>
</div>

I'm now using Header Bidding, and SingleRequest is required for implementation.