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

Discussion in 'Forum Management' started by Douglas Taylor, May 14, 2015.

  1. 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
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

  3. woody

    woody Member

    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 -->
     
  4. AzzidReign

    AzzidReign Well-Known Member

    You can check out my guide in the resource center :) Link in the sig.
     
  5. RoyalRumble

    RoyalRumble Active Member

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

    woody Member

    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.
     

Share This Page