In this tutorial, you will learn how to display ads for mobile devices or specific browser sizes in your WordPress site using Advanced Ads.
Table of Contents
One of my main reasons for developing Advanced Ads was the lack of optimization options in other ad plugins. One of the most important features I missed was enabling or disabling ads for desktop or mobile devices only. Before Advanced Ads, I did a lot of hacking and testing.
After I understood that ad setups on mobile sites might be completely different from desktop sites, I could reach almost the same ad performance on smartphones as on desktops.
I’ve learned that the device is relatively easy to check but not always trustworthy. New devices hit the market, and also, on smartphones, there are a lot of display sizes available.
When using a responsive layout, on some smartphones, there might be enough space for a full banner (468×60). On others, only a mobile banner (320×50) or medium rectangle would fit (300×250). Therefore, for Advanced Ads, I developed methods to either check the device (mobile or desktop) or the browser size before displaying a specific ad.
1. Mobile Ads – ads for mobile or desktop
This method uses
- WordPress 5.6
- Advanced Ads 1.22.2
This method makes use of the mobile/desktop visitor condition feature.
First of all, you need an ad to inject into the content. If you don’t have one already, just create it in your WordPress dashboard under Ads > Add New. Choose a custom title and the plain text ad type.
For test purposes, you can use the following ad content.
<div style="display: inline-block; background: #ddd; width: 468px; height: 60px; line-height: 60px; text-align: center;">DEMO FULL BANNER</div>
Visit the Visitor Conditions meta box to define some additional settings regarding the device that users, who should see the ad, are using.
To display an ad on mobile devices only select the “Device” condition like on the screenshot.
To hide an ad from mobile devices, check the Desktop option. The default option is Mobile (including tablets). This is it. Your ad will now be displayed only on mobile devices, including tablets, or only on desktops.
To target tablets and mobiles separately, you can additionally use the “Tablet” condition provided by Responsive Ads.
What else you need to know about mobile ads by device
Unfortunately, it is impossible to distinguish between mobile, desktop, and tablet devices, since the
wp_is_mobile() method used here does not support tablets. Most tablet users will currently be matched as mobile traffic.
As mentioned above, enabling ads by a device is suitable to distinguish between mobile and desktop users. This can be used to display ads for mobile-specific ad networks or content that should only be visible for desktop or mobile users.
To position ads only on big enough devices to fit the ad, you should use the following method.
2. Responsive Ads – ads by browser size
This is the best solution for sites with responsive layouts that want to make sure the ad size really fits.
This method uses
Since Responsive Ads works by browser size. You could define specific ranges the browser or device must have before an ad is visible.
Your setup might, for example, look like this:
|Mobile Banner (320×50)||320px||500px|
|Full Banner (468×60)||500px||1060px|
|Large Banner (Custom size: 700×90)||1060px||…|
See the video of the Responsive Add-On to get a better idea of this feature:
Click on the preview image to load and start the video from YouTube. By clicking you agree that your information will be sent to and processed by YouTube, LLC, 901 Cherry Avenue, San Bruno, CA 94066, USA. Read more
You can use the dummy banner code I already mentioned in the first method above for test purposes.
After installing the Responsive Ads add-on, you can see the Browser Width section in your Visitors Conditions meta box.
The mobile ads settings consist of three settings:
- enable check for device size
- set the range of width the browser must have to display the ad
- choose a fallback method in case the browser width is still unknown
Enable responsive ads
To use the options provided by Responsive Ads, you need to enable the field Display ad by browser size.
Set browser width range
Next, you can choose the range of the browser width for which the ad should be displayed.
If your site has a responsive layout, you might want to check in the frontend for which browser sizes which ad size matches. Often, layouts have some margins and patterns, so that a mobile ad with a width of 320 pixels might actually not fit in a browser with 320 pixels width. Different browser tools, image editing software, or ruler software might help you determine the right width.
You can leave the second field (max. width) empty or at 0 if you don’t want to limit the maximum browser width.
Be aware that this option is indeed for the browser and not the device width. So you can even test it by making your current browser window a bit smaller.
Responsive ads process the browser width after the first page view. To distinguish whether to display or hide the ad on the first page view, you can define a fallback width.
You can find this option in Advance Ads > Settings > General > Responsive Ads.
What else you need to know about responsive ads
Responsive Ads comes with 1 year of support, including help to correctly set up ads on responsive layouts.