How Do I Create Responsive Ad Units for my Website?

Owned by Steve Ulrich (Deactivated)
Last updated: Sept 03, 2020 by Kat Harlton
3 min read

This article users with the following permissions:

  • Manage Website Settings

  • Manage Advertising Settings

  • Access to Google Ad Manager

  • This article is based on using Google Ad Manager for ad serving. If you do not have Google Ad Manager you can apply here

  • Additionally, this article recommends the use of a simplified, third-party ad code creator to create your mobile responsive ad code: https://dfpgpt.appspot.com/

  • Please Note- SoCast cannot guarantee the stability, nor can we support the third party tool, it is merely suggested as a way of creating mobile responsive ad code.

  • If you opt to create your own mobile responsive Ad Code, please refer to Google Ad Manager Help or Google Support Forums for more detailed information on creating mobile responsive ad units.

From this article, you will learn how to create Ads that will change based on the device screen size used. For example, desktop users will see 728x90 banner, meantime mobile or tablet users will be displayed with 320x50 banner. 

This article consists of 3 main blocks:

  • Delivery 

  • Inventory

  • Ad Manager Tag

Instructions

In Google Ad Manager Delivery: 

  1. Create an Ad Unit for each Ad that you want to appear. 

  2. Make sure to specify the size for the Ad Unit for each Ad

In Google Ad Manager Inventory:

  1. Create an Order

  2. Create a Line Item for each ad that you want to display and input the size for each one

  3. Assign a Line Item to the Ad Unit with the corresponding ad size.

  4. Add creatives 


Create your Responsive Ad Manager Tag:

  1. Open https://dfpgpt.appspot.com/

  2. Select the Tag Type: GPT

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

  4. Turn on “Advanced Options” and “Size mapping (responsive Design)”

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

.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

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

6. 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. For example, if you have 2 variations of ads (728x90 and 320x50), you should add 2 mapping elements.

7. Add the ad unit code created in your account.
8. Enter your ad size. Eg: 728x90.
Note: If you use size mapping, then ad request will be taken from the mapping code not from the actual ad size in the ad slot.

9. Select the corresponding Size mapping from the drop-down. So that ad will behave as responsive otherwise it won’t.

Add multiple ad slots as per your requirements. 

10. Click the “Generate Tag” button. The responsive tag is ready to deploy on your site.

Sample Tag: 

Note: The will be two parts: Header Tag and Body Tag.

SAMPLE 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 -->

SAMPLE BODY Tags - Place where you want to display the ad using the RAW HTML Element

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

11. Place the Head Tag under Website Settings > Advertising > Configure Website Advertising > Ad Setup Code.
12. Place the Body Tag under Website Settings > Advertising > Configure Website Advertising > Ad Units > Select the Ad Unit that suits your request. Alternatively, you can create a Raw HTML widget on the webpage and paste the body tag there.