Delivering ads that “fit” is a primary challenge when optimizing ad income on responsive websites. For example, a leaderboard banner 728 pixels wide isn’t suitable for a smartphone screen, potentially confusing visitors. Conversely, using small banners on large screens can unnecessarily reduce your potential earnings.
Advanced Ads allows you to define a range of browser sizes for optimal ad display. This enables you to hide larger ads on smaller devices, focusing on delivering high-performing premium sizes on larger screens. Using the Browser width Visitor condition, you can precisely target your ads based on a fixed, minimum, or maximum screen size.
For instance, you might opt for a compact mobile banner for narrower browser widths and a more detailed, larger banner for wider browser widths. This meticulous level of customization ensures that your ads harmonize with the design and layout of the website, irrespective of the user’s device or screen size.
Table of Contents
Adding the Browser Width condition to ads or placements
The Browser Width condition is a feature within Advanced Ads Pro that allows precise control over ad delivery. Applying it is straightforward; it operates like any other condition for ads and placements. Once activated, you can define the minimum and/or maximum browser width for which the ad will display.
The condition settings offer three distinct modes:
- equal
- equal or higher
- equal or lower
To implement the Browser Width condition for a single ad unit, navigate to the Edit Ad screen. Look for the Targeting meta box and select the condition from the dropdown menu.
Conversely, if you intend to apply this condition to an entire placement—perhaps targeting a sticky footer only for mobile devices with a small browser window—proceed to the placement page. Add the Browser Width condition to the respective placement.
It’s essential to note that when utilizing the Browser Width visitor condition on cached websites, you should enable the Cache Busting in Advanced Ads > Settings > Pro for optimal functionality.
Setting up more complex responsive setups
Just like any other condition, you have the flexibility to apply multiple Browser Width conditions and to combine them . This approach enables you to accurately specify the ranges in which Advanced Ads will load distinct ads.
Consider a hypothetical scenario illustrated in the table below. Picture that you want to showcase one of several ads for the same position, depending on your user’s screen size.
For instance:
- A mobile banner caters to smaller devices, like mobile phones held in portrait mode.
- A full banner suits slightly larger screen widths, like tablets in landscape mode.
- A leaderboard banner fits larger resolutions, e.g., desktop screens.
Presuming you have already crafted these three ads, let’s proceed.
| from | to | |
| Mobile banner (320×50) | 320px | 499px |
| Full banner (468×60) | 500px | 1059px |
| Leaderboard banner (728×90) | 1060px | … |
Now, let’s proceed with implementing this setup:
- Create a placement where you intend to embed these ads on your website.
- Form an ad group dedicated to these ads. Add each of the three ads within this group and select the “Random” group type.
- Apply Browser Width conditions to each ad, configuring them as follows:
- Mobile banner: Displayed when the browser width is equal to or higher than 320px and equal to or lower than 499px.
- Full banner: Displayed when the browser width is equal to or higher than 500px and equal to or lower than 1059px.
- Leaderboard banner: Displayed when the browser width is higher than 1060px.
Advanced Ads will now ensure the appropriate ad is displayed based on the visitor’s screen size for this placement.
Fallback width
If you enable Cache Busting, Advanced Ads can accurately determine the browser width during the initial page visit and deliver the right ad accordingly.
However, when Cache Busting is not enabled, the condition necessitates a cookie. This cookie is set during the first page view, making precise targeting effective from the second page view onward. In cases where Cache Busting is not utilized but you still want to ensure optimal ad embedding, you can establish a fallback width. This fallback width serves as the default value for the visitor when the exact browser width isn’t yet determined.
To set this fallback width, navigate to Advanced Ads > Settings > Pro > Responsive Ads. This option allows you to define a reliable default width for situations with unknown browser width.
Now, if the visitor’s browser width cannot be determined, Advanced Ads will serve the ad size whose Browser Width values cover the fallback width value. In our example and with a fallback width of 768px, this would be the “full banner” (from 500px to 1059px).
Conclusion
Craft ad sizes to precisely suit different browser widths, tailoring the viewing experience to perfection. Whether on mobile, tablet, or desktop, your ads will harmonize with the layout, offering users a cohesive and engaging encounter.
With the Browser Width condition in Advanced Ads Pro, you can ensure your ads shine on every screen. It’s all about delivering a tailored and compelling experience to every visitor, maintaining design integrity, and maximizing engagement as they browse your site.