How Do I Create Responsive Ad Units for My Website Using Google Ad Manager?

This article is for 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.
• We recommend using a third-party ad code creator for mobile responsive ad code: https://dfpgpt.appspot.com/
• Please Note: SoCast cannot guarantee the stability or provide support for this third-party tool; it is suggested as a convenience for creating mobile responsive ad code.
• If you prefer to create your own mobile responsive ad code, refer to Google Ad Manager Help or the Google Support Forums for more information.

This article will guide you through creating responsive ads that automatically adjust based on the user's device screen size. For example, desktop users may see a 728x90 banner, while mobile or tablet users will see a 320x50 banner.

The process consists of three main steps:

• Delivery
• Inventory
• Ad Manager Tag

Instructions

Step 1: Set Up Delivery in Google Ad Manager

1. Create an Ad Unit for each ad you want to display.
2. Specify the size for each Ad Unit.

Step 2: Configure Inventory in Google Ad Manager

1. Create an Order.
2. Create a Line Item for each ad you want to display and enter the size for each one.
3. Assign each Line Item to the corresponding Ad Unit.
4. Add creatives to your Line Items.

Step 3: Create Your Responsive Ad Manager Tag

1. Go to https://dfpgpt.appspot.com/.
2. Select the Tag Type: GPT.
3. Enter your network code from Google Ad Manager.
   The Network ID is found under Admin Tab > Global Settings > All Network Settings > Network Code.
4. Enable “Advanced Options” and “Size mapping (responsive Design)”.
5. Understand the syntax for responsive design size mapping:

.addSize([Screen Width, Height], [[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

For example, if the minimum width of the desktop screen is 1024px, Google Ad Manager will request the sizes listed in the size mapping for that breakpoint (970×90, 970×250, 728×90). The same logic applies for other devices.

6. Add the size mapping in the tag generator as shown above.
   

You can add multiple mappings as needed for different ad slots. For example, if you have two ad variations (728x90 and 320x50), add two mapping elements.

7. Add the ad unit code created in your account.
8. Enter your ad size (e.g., 728x90).
   Note: If you use size mapping, the ad request will use the mapping code, not the actual ad size in the ad slot.
9. Select the corresponding size mapping from the dropdown to ensure the ad is responsive.

Add multiple ad slots as needed.

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

Sample Tag Structure

Note: There are two parts to the tag: the Header Tag and the Body Tag.

Sample HEAD Tag (Place 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 Tag (Place where you want to display the ad using a 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 -->

Deploying Your Tags in SoCast

1. Place the HEAD Tag under Website Settings > Advertising > Configure Website Advertising > Ad Setup Code.
2. Place the BODY Tag under Website Settings > Advertising > Configure Website Advertising > Ad Units > Select the Ad Unit that matches your needs. Alternatively, you can create a Raw HTML widget on your webpage and paste the BODY tag there.

By following these steps, your website will display responsive ads that automatically adjust to the user's device, maximizing both user experience and ad revenue.