Creating and Optimizing Responsive Ads with Google Ad Manager

With users accessing your content on everything from smartphones to tablets to a 15-inch laptop screen, ensuring that ads look great and perform well on every device is a critical aspect of any publisher’s strategy. Responsive ads are more than just a trend – it is a dynamic solution that adjusts ads automatically to different screen sizes and delivers a cohesive, high-quality user experience.

However, simply enabling responsive ads isn’t enough. You need to know how to set them up properly in Google Ad Manager, optimize their placement, add breakpoints wherever necessary, and avoid mistakes for maximum impact. If it is done right, responsive ads can elevate user engagement and significantly boost your ad revenue.

Whether you’re looking to refine your existing setup or starting from scratch, we have listed practical insights and strategies that will help you navigate through the complexities of responsive ad setups. But before we get into it, here’s a refresher for beginners:

What are Responsive Ads?

Responsive ads are designed to automatically adjust their size and appearance to fit the screen of any device – be it desktop, mobile, or tablet. 

This ensures that users experience a seamless and consistent ad experience, regardless of their device. For instance, imagine you have a display banner ad with dimensions of 970×90 or 728×90. If a user switches from a desktop to a mobile device, the ad will automatically resize to fit the smaller screen.

The magic of responsive ads lies in their adaptability. Google Ad Manager helps to adjust the size and appearance of the ad creative to fit the available ad space on a given device. This means a responsive ad could appear as a native ad on one page and a dynamic text ad on another.

Responsive ads also offer flexibility in terms of ad unit sizes. For example, if a browser’s size is larger than 1024x768, an ad with dimensions of 970×90 or 728×90 may be served. If the browser’s size is smaller than 1024x768, a 468x60 ad might be displayed instead.

How to Create Responsive Ads with Google Ad Manager

Step 1: Setting Up a Campaign

To learn how to create responsive ads, let’s begin from the top.

• Firstly, log in to your Google Ad Manager account and navigate to the ‘Campaign’ section.
• Click the Campaigns drop-down in the section menu, and click on ‘ads.’
• Click the ‘+’ button, and select Responsive Display Ad.
• Select the type of campaign that aligns with your goals, and clearly define your campaign’s objectives, such as driving traffic, increasing conversions, or boosting brand awareness.

Step 2: Generate Google Publisher Tags

The next step is to integrate Google Publisher Tag (GPT), as this JavaScript tag enables you to manage ad slots and build responsive ads that adapt to the user’s device screen size efficiently. Moreover, it supports rich media ads dynamically and helps swap out ad tags based on the device’s screen size.

To get started, generate GPT for ad units while creating line items. Here’s a sample GPT head tag and body tag:

A simple GPT Head tag looks like the following:

And a sample of the body tag is given below:

Note: When creating ad units in Google Ad Manager, ensure they are configured to work with GPT. This includes defining the ad sizes that will be used in the responsive setup.

Step 3: Create the Ad Size Mapping

It is one of the most crucial steps in setting up responsive ads on your website, as Ad size mapping defines a set of rules that determine which ad size should be served based on the user’s screen size. By mapping ad sizes to screen dimensions, you can ensure your ads are displayed in the best possible format for each device.

Ad Size Mapping is the process of designing responsive ads for Google Publisher Tags. It involves two main steps:

1. `.sizeMapping()` function maps ad sizes with the browser’s size.
2. `.defineSizeMapping()` function implements the mapping defined by the `.sizeMapping()` function, instructing Google Ad Manager where the defined ad sizes will be served.

Here’s an example of what sizeMapping snippet looks like, and we will use this example to create ad size mapping below.

Here, the first block of addsize( ), i.e., [1024, 768], displays the browser’s size, and the second [970, 250] displays the ad size. 

This mapping implies that if a browser’s size is equal to or smaller than 1024×768, then the size of the ad will be 970×250. 

Sidenote: Use Google Publisher Console’s Page Request tab to find out the browser’s size of the device (Browser viewport width and height). 

Google Publisher Tags detects the browser size automatically and uses the size mapping that makes the ad fit into the viewport of the browsers. 

In case you want to create a default mapping, then [0,0] is the size that tells the server the ad size can be fit for any browser. 

Consider a situation where you forgot to mention what size of an ad should serve if the browser’s viewport is smaller than 640×480. 

In such a case, [0,0] mapping serves the default ad size that makes the ad fit into any device the size is not mapped.

Set up Breakpoints:

1. Define Breakpoints: Before setting up GPT with your responsive ads, you also have to define breakpoints. This step is essential because it enables the Google Ad Manager to determine specific screen widths at which your website's content (including ads) will adjust to provide the best user experience. These breakpoints are thresholds that decide how the content will adapt when the user's screen size changes. For example, you can define a breakpoint at 768 pixels, which is a common width for tablets, so that your website knows to display a different layout when the screen width is at or below this size.

Some of the common breakpoints include:

• Desktop: 1024px and above
• Tablet: 768px to 1024px
• Mobile: Below 768px

2. Assign Ad Sizes to Each Breakpoint: In Google Ad Manager, go to your ad units and set up ad size mapping. Here, you can assign the appropriate ad sizes to each breakpoint, ensuring that the ads scale correctly across all devices. For example, you can assign a 728x90 ad for desktops and a 320x50 ad for mobile devices.

GPT with ad size mapping:

//If the browser viewport is more than 1024×768 show creative banner 970×250. 

If the browser viewport is more than 980×690, show the creative banner 728x90. If the browser viewport is less than 640x480, show a creative banner 120×60

Further, if you do not want to show ads on a particular device, you can suppress the ads for other formats. However, you need to make a few changes in the code that are given below.

Step #2A: Add the script to display ads to desktop visitors only.

//This mapping will only display ads when the user is on a desktop-sized viewport

Step #2B: Add this script to display ads to mobile or tablet users only.

//This mapping will only display ads when the user is on a mobile or tablet-sized viewport

After setting up ad size mapping, thoroughly test how the ads appear on different devices. Use browser developer tools or physical devices to ensure that the ads are displayed optimally. Adjust the mappings as necessary based on your findings.

Step 4: Link the Size Mapping to Google Ad Manager Ad Units

Now that you have mapped the ad sizes and implemented GPT on your site, it’s time to link the mapping to the ad slots in Google Ad Manager. Add the following code to the GPT header tag:

After completing the steps, a GPT that can serve responsive ad units should look like the one below:

//If the browser viewport is more than 1024×768 show creative banner 970×250. 

If the browser viewport is more than 980×690, display the creative banner 728x90 if the browser viewport is less than 640x480 display the creative banner 120×60.

In summary, creating responsive ads with Google Ad Manager involves three main steps: generating Google Publisher Tags, creating the ad size mapping, and linking the size mapping to Google Ad Manager ad units. By following these steps, you can ensure a seamless ad experience for users across different devices and screen sizes.

Tips for Optimizing Responsive Ads

Optimizing responsive ads is crucial to ensure a seamless user experience and increase ad revenue. This section will discuss some best practices for designing and implementing responsive ads and the importance of testing ads on various devices and screen sizes.

Keep ad sizes consistent with industry standards: Using standard ad sizes such as 300×250, 728×90, and 160×600 can improve fill rates and increase the likelihood of your ads being displayed across various ad networks.

Prioritize mobile-first design: With a significant percentage of users accessing content on mobile devices, it’s essential to prioritize mobile-first design when creating responsive ads. This means designing great ads on small screens and scaling up for larger devices.

Use responsive design techniques: To ensure your ads adapt well to different devices and screen sizes, utilize responsive design techniques such as fluid grids, flexible images, and media queries. These techniques help create ads that adjust seamlessly to varying device sizes.

Test ads on various devices and screen sizes: It’s important to test your responsive ad units on various devices and screen sizes to identify any issues and ensure a consistent user experience. Use device emulators, browser resizing tools, and real devices to verify your ads render correctly across different environments.

Monitor ad performance and optimize accordingly: You can regularly track and review the performance of your ads using report metrics. It will provide you insights on how to optimize your performance, adjust the placement of ads, experiment with different ad formats and size, and refine targeting options to enhance user engagement and maximize revenue.

By following these best practices and emphasizing the importance of testing, you can optimize your responsive ads and enhance the user experience across different devices and screen sizes.

Common Mistakes to Avoid in Google Ad Manager Responsive Ads

Responsive ads are the must-haves for both publishers and advertisers, and it is up to you to make the most of it. 

With several benefits like higher fill rate, improved user experience, and attracting premium advertisers, you have the opportunity to maximize the results for responsive ads in Google Ad Manager by simply avoiding these few mistakes:

1. Incorrect ad unit sizes: Ensure that the ad unit sizes you define in Google Ad Manager align with the actual dimensions of the ad spaces on your website, as mismatched sizes can lead to poorly displayed ads.
2. Overlooking fallback sizes: If a responsive ad can't find a suitable size based on the available space, it's essential to specify fallback sizes. These alternative sizes will be used as a backup, ensuring the ad is always displayed.
3. Ignoring user experience: Responsive ads should seamlessly integrate into your website's design. So, you must avoid placing ads in a way that disrupts the user's experience.
4. Not utilizing ad testing: Before going live with responsive ads, thoroughly test them on various devices and screen sizes to identify any potential issues. This will help ensure a smooth user experience and optimal ad performance.
5. Do not forget to update ad units: If you make changes to your website's layout or ad placement, remember to update the corresponding ad units in Google Ad Manager. This will prevent mismatched ad sizes and ensure proper delivery.

Wrapping Up: Responsive Ads for Seamless User Experience

Navigating the world of digital advertising demands adaptability, strategic thinking, and a keen understanding of your audience’s behavior. In this blog, we’ve demystified the process of creating and optimizing responsive ads using Google Ad Manager.

The essence of responsive ads lies in their ability to provide a seamless and engaging experience across a variety of devices. Utilizing these adaptive ads ensures an optimal viewing experience and builds a robust connection with your audience, regardless of the device used. 

This is not just about compliance with modern digital standards; it’s a strategic move towards future-proofing your advertising efforts. The enhanced user satisfaction, improved ad performance, and potential for increased revenue underscores the pivotal role of responsive ads in the current and future digital advertising landscape.

In essence, the key to thriving in digital advertising lies in your ability to adapt and evolve. Responsive ads are not just a feature of this evolution; they are at the heart of it. Embrace this shift, and you’ll be well on your way to offering a superior ad experience that drives engagement and growth.