• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Google DFP and Responsive Design

#1
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
 

woody

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

Code:
<!-- 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 -->
 
#5
The process for AdSense is not the same as that for DFP responsive. Mine is extensive, and works quite well.

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

Active member
#6
There is no difference in the unit code

current head code:

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:

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.