How to create responsive Ads in Google Ad Manager (DFP)? Step by Step tutorial.

The term responsive is little tricky because site layout will change based on the device width or site width. Each site layout appears to be different on the each devices. So, publishers cannot use the same ad size to serve on all the device.

What is the solution to serve ads based on device width?

Do you think creating responsive creative to fit on all device?. If yes, it is not possible on all circumstances.

You can ask me why?.

Here is your answer, creating responsive creative will be complex in designing and also, the ad slots which you are using is not a responsive one on your site. So , it will not suit for this scenario. Most of the publisher using fixed size banner on their ad slot declaration.

What is the solution to fix this?

Google Ad manager have custom solution to serve ads based on the device width. While creating ad tags, publisher should use the “sizemapping” function on the Google publisher Tags (GPT) tags.

Do I need to hire a developer or complex to create the Ad Tags?

No, it’s really very simple. All you need is to understand the concepts here. See the steps to create responsive ad tag.

Step 1: Goto the external Ad manger tag generator: https://dfpgpt.appspot.com/

Step 2: Tag Type: GPT and enter your network code from the Google Ad manager.

The Network ID is required and can be found in the Admin Tab under:
Global Settings -> All Network Settings -> Network Code.

Step 3: Turn on “Advanced Options” and “Size mapping (responsive Design)”

Step 4: This part is important to design the responsive ads. Before going to the settings. Understand the syntax of the responsive design.

Syntax for size mapping:

.addSize([Screen WxH], [[Ad request Sizes]])	
	
.addSize([1024, 400], [[970, 90], [970, 250], [728, 90]])	//Desktop
.addSize([768, 400], [[728, 90]])	//Tablet Landscape
.addSize([470, 400], [[320, 50], [320, 100], [300, 250]])	//Tablet Portrait
.addSize([360, 400], [[320, 50], [320, 100], [300, 250]])	//Mobile
.addSize([0, 0], [[320, 50], [320, 100], [300, 250]])	Small Screen Devices

Syntax Explanation

Desktop : If the minimum width of the screen is 1024px then Google ad manager will request sizes which mentioned in the size mapping. So here as 970×90, 970×250 and, 728×90. Similarly for other devices.

Step 5: Add the Size mapping in the tag generator as per syntax mentioned above.

You can add multiple mapping as per your requirement and size needed for specific ad slots.

Step 6: Add the ad unit code which created in your account or create it after create it from here.

Step 7 : Enter the ad size. Eg: 970×90.
Note: If you use size mapping, then ad request will taken from the mapping code not from the actual ad size in the ad slot.

Step 8: Add the Size mapping from the drop down “Mapping1”. So that ad will behave as responsive otherwise it won’t.

Add multiple ad slots as per your requirement.

Step 9: Hit “Generate Tag” button. Responsive tag is ready to deploy on your site.

Sample tag: There will be two part – 1) Header tag 2) Body Tag

HEAD Tag - Place this tag before </head> on your site

<!-- Start GPT Tag -->
<script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>
<script>
  window.googletag = window.googletag || {cmd: []};
  googletag.cmd.push(function() {
    var mapping1 = googletag.sizeMapping()
                            .addSize([1024, 400], [[970, 250], [970, 90], [728, 90]])
                            .addSize([768, 400], [[728, 90]])
                            .addSize([470, 400], [[320, 50], [300, 250], [320, 100]])
                            .addSize([360, 400], [[320, 50], [320, 100], [300, 250]])
                            .addSize([0, 0], [[320, 50], [320, 100], [300, 250]])
                            .build();

    googletag.defineSlot('/1234/MyAdunit', [[970,90]], 'div-gpt-ad-5208044-1')
             .defineSizeMapping(mapping1)
             .addService(googletag.pubads());

    googletag.enableServices();
  });
</script>
<!-- End GPT Tag -->

BODY Tags - Place where you want to display the ad

<!-- GPT AdSlot 1 for Ad unit 'MyAdunit' ### Size: [[970,90]] -->
<div id='div-gpt-ad-5208044-1'>
  <script>
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-5208044-1'); });
  </script>
</div>
<!-- End AdSlot 1 -->

Hope this help!!!!!. Thank You