How Do I Create Responsive Ad Units for my Website?

How Do I Create Responsive Ad Units for my Website?

This article is for users with the following permissions:
  1. Manage Website Settings
  2. Manage Advertising Settings
  3. 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

  1. ​<!-- Start GPT Tag -->

  3. <script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>

  5. <script>

  7.   window.googletag = window.googletag || {cmd: []};

  9.   googletag.cmd.push(function() {

  11.     var mapping1 = googletag.sizeMapping()

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

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

  17. .addSize([470, 400], [[320, 50], [300, 250], [320, 100]])

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

  21. .addSize([0, 0], [[320, 50], [320, 100], [300, 250]])

  23.                             .build();

  25.  googletag.defineSlot('/1234/MyAdunit', [[970,90]], 'div-gpt-ad-5208044-1')

  27.              .defineSizeMapping(mapping1)

  29.              .addService(googletag.pubads());

  31.     googletag.enableServices();

  33.   });

  35. </script>

  37. <!-- End GPT Tag -->

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

  1. <!-- GPT AdSlot 1 for Ad unit 'MyAdunit' ### Size: [[970,90]] -->

  3. <div id='div-gpt-ad-5208044-1'>

  5.   <script>

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

  9.   </script>

  11. </div>

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



    • Related Articles

    • How Do I Create And Serve Ads In Google Ad Manager

      Who is this for? Anyone looking to get started in setting up and serving ads in their Google Ad Manager account. Note these are steps for Google Ad Manager only, and any issues with your Ad Manager account should be directed to Google Help Centre ...

    • How Do I Place An Ad On My Website?

      This Article Is For: Users who have: Advertising Permissions This is applicable to: All Themes Note: Please allow for up to 3 hours for ads to start displaying correctly before you contact Google Ad Manager's customer support asking them for help. If ...

    • How Do I Setup The Blog List Ad Code? (New)

      This Article Is For: Users who have: Advertising Permissions This is applicable to: All Themes Note: Please allow for up to 3 hours for ads to start displaying correctly before you contact Google DFP's customer support asking them for help. If it has ...

    • How Do I Setup A Blog Header Ad?

      This Article Is For: Users who have: Advertising Permissions This is applicable to: All Themes Note: Please allow for up to 3 hours for ads to start displaying correctly before you contact Google DFP's customer support asking them for help. If it has ...

    • Why Aren't My Ads Appearing On The Front End Of The Website?

      Please try the following troubleshooting steps: Log in to Google Ad Manager Go to Inventory, select the intended ad unit, open the 'Line Items' tab, check if the correct campaign is attached Open the Line Item, ensure that the priority is correct, ...