Google DFP and Responsive Design

Douglas Taylor

Douglas Taylor

Active member
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
 
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 said:
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 -->
Click to expand...

Woody would you mind sharing an example of the actual ad placement/unit code?
 
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.
 
You must log in or register to reply here.

Similar threads

parafly9
Responsive Google DFP Ads?
Replies
1
Views
342
parafly9
parafly9
Douglas Taylor
Responsive Design and DFP
Replies
9
Views
4K
Douglas Taylor
Douglas Taylor
puterfixer
Migrating from vBulletin 4 to xenForo 1.3 - personal experiences
Replies
6
Views
3K
puterfixer
puterfixer
Top Bottom