How to Design Responsive ad in DFP? – Step By Step Tutorial

What is Responsive Design in DFP?

Ads will fit to the browser based on the screen size. This will provide better user experience on different devices like Mobile, Tablet and Desktop

How to implement Responsive design in GPT tag?

In General, .sizeMapping function is used to design responsive design for GPT tags.

.sizeMapping to map the ad sizes to browser sizes and then call .defineSizeMapping to implement the mapping:

Sample size mapping function:

var mapping = googletag.sizeMapping().

addSize([1024, 768], [970, 250]).  // addSize([screensize], [Creative Size]).

addSize([980, 690], [728, 90]).

addSize([640, 480], [120, 60]).

addSize([0, 0], [88, 31]).

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

build();


This is called in adslot declaration part:

adSlot.defineSizeMapping(mapping);

How to use mapping functionality from External Tag Generator:

Manual method requires codding skill set and sometimes it will result in big bug, if we miss any coding.

So we can use external tool to design responsive GPT tags.

Link: https://dfpgpt.appspot.com/

Steps to follow:

  1. Once you navigate to the https://dfpgpt.appspot.com/ page
  2. Select Tag Type: As required (Async or Sync)
  3. Provide Network id: eg: 1234
  4. If you need to pass any “Page Level” key value?. Add key-value in Custom targeting
    1. Eg: Category=homepage
  5. Enable/Disable : SRA(Single Request Architecture) – Recommended setting is Disable
  6. Turn ON “Advanced options”
  7. Once you turned ON “ Advanced options”, Then Turn ON “Size Mapping”
  8. Leave Advanced Setting options and navigate to Size mapping column,
  9. There you need to provide viewport size (Screen Resolution in WxH) and Request size (Creative size in WxH)
  10. Use the below customized mapping for Different devices
    1. 1024×500 – Desktop
    2. 768×400 – Tablet Landscape
    3. 470×400 – Tablet Portrait
    4. 360×400 – Mobile
    5. 0x0 – Smaller screen size
  11. While providing request size, make sure to add creative size lesser than screen size so that ad will looks good on different screen width otherwise responsive design is invalid. Example below
    • 1024×500 screen width provide request size as 970×250, 728×90
    • 768×90 screen width provide request size as 728×90
  12. Once you defined the Size Mapping, call the mapping function on ad slot declaration
  13. If you click the drop down at size mapping, you can assign the mapping name to the ad slot
  14. Custom targeting is ad slot declaration is used for “Ad unit” level targeting. Mainly used for targeting ads based on position.
    1. Eg: POS=ATF
  15. Finally Generate tag.

Sample Tag:

HEAD Tag

<!-- Start GPT Async Tag -->

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>

<script>

var gptadslots = [];

var googletag = googletag || {cmd:[]};

</script>

<script>

googletag.cmd.push(function() {

var mapping1 = googletag.sizeMapping()

.addSize([1024, 500], [[970, 90], [970, 250], [728, 90]])

.addSize([768, 400], [[728, 90]])

.addSize([470, 400], [[300, 250]])

.addSize([360, 400], [[320, 50], [320, 100]])

.addSize([0, 0], [[320, 50], [320, 100]])

.build();




//Adslot 1 declaration

gptadslots.push(googletag.defineSlot('/1234/Test_728x90', [[728,90]], 'div-gpt-ad-8750488-1')

.setTargeting('POS', ['ATF'])

.defineSizeMapping(mapping1)

.addService(googletag.pubads()));




googletag.pubads().enableSingleRequest();

googletag.pubads().setTargeting('Category', ['homepage']);

googletag.enableServices();

});

</script>

<!-- End GPT Async Tag -->




BODY Tags

<!-- Async AdSlot 1 for Ad unit 'Test_728x90' ### Size: [[728,90]] -->

<!-- Adslot's refresh function: googletag.pubads().refresh([gptadslots[0]]) -->

<div id='div-gpt-ad-8750488-1'>

<script>

googletag.cmd.push(function() { googletag.display('div-gpt-ad-8750488-1'); });

</script>

</div>

<!-- End AdSlot 1 -->