How to fix inflated display ad impressions?

[Sutra]

I'm using the AdInserter plugin to control placement of my display ads. I have it set to use client-side detection, that way it uses media queries to hide certain ads based on viewport size. i.e. Desktop should show a 728x90 ad but when viewed on mobile that ad spot should show a 300x250 ad.

When looking at my Adsense reports, I noticed that my desktop ad impressions are almost the same as the mobile impressions. Which seems way off to me, considering that 85% of my traffic is mobile. So it appears to me that all ads are being counted, regardless of device, which is inflating the impressions. Does that seem correct? How do I fix it?

 

[Ryuzaki]

That's actually against Adsense TOS. You can't use media queries to hide ads because they still execute and load, but don't display on the screen. It's basically a CSS "hide" attribute, basically "display: none;" Essentially they are hidden ads. Your best move with Adsense is to use the responsive ads, which work fantastically in my opinion.

That's not a good thing to do with any ads where impressions matter, such as CPM's or any network that attempts to optimize in their end. I can't really say there's a way to "fix" it because that's how the technology works.

Sounds like that's how Ad Inserter works.

I think there are systems that do client-side viewport size detection after the browser is loaded using javascript, then feed that back to the server-side and requests the appropriate ad. It's not anything I've messed with though.

 

[Sutra]

@Ryuzaki I just got done doing about a couple hours of research and yeah, I've basically found out exactly what you said, hah.

I use WP-Rocket for Caching and just found out they have an option to serve mobile specific pages that are separate from desktop, so desktop content will never mix with mobile, and vice versa. Sounds like that option might the type of thing you're mentioning regarding client-side viewport back to server-side. I just turned that on. Will see if that works. If not, I'll use the Adsense responsive.

Question though, if that doesn't work, and I go to Adsense responsive...what do we do about CPM ads, such as Amazon?

 

[Ryuzaki]

Question though, if that doesn't work, and I go to Adsense responsive...what do we do about CPM ads, such as Amazon?

The proper way would be to set up the client-side viewport detection. I think DoubleClick For Publishers can handle this now that I think about it. I don't mean serving a mobile version versus a desktop based on user-agent, but actual browser width checking. You would know how your website looks at that width and tell the system which ad is appropriate for each slot.

What I did, since CPM ads aren't a huge part of my operation, was to use them in areas that I designed to always be able to accommodate the best sizes. For instance, my sidebar is always 300px wide. On mobile it drops under the main content area and remains 300px but centered. So their width and their position on the page is static, but the wrapper (sidebar in this example) moves around as a whole.

I did some other things like side-by-side ads in a horizontal orientation that become vertically stacked on top of each other when the viewport gets too small. I abandoned this in the end, but it's another option.

I'd say if you have the time to sort it out, DoubleClick for Publishers might be a good option, with waterfall management, and even better - header bidding, adding in your own self-sold ads into the bidding, viewport width detection.

 

[Sutra]

@Ryuzaki

Well then, I'm confused, hah. I have Adinserter set up to use Client-Side detection using Viewport settings. So when when a screen is mobile width, the desktop ads don't show.

Here are the settings:

<style id='ai-frontend-inline-css' type='text/css'>.ai-viewport-3{display:none !important}.ai-viewport-2{display:none !important}.ai-viewport-1{display: inherit !important}.ai-viewport-0{display:none !important}@media (min-width: 768px) and (max-width: 979px){.ai-viewport-1{display:none !important}.ai-viewport-2{display: inherit !important}}@media (max-width: 767px){.ai-viewport-1{display:none !important}.ai-viewport-3{display: inherit !important}}

However, the units hidden by viewport still get impressions. Am I misunderstanding something?

 

[Ryuzaki]

Am I misunderstanding something?

Yeah. This CSS attribute:

display:none;

Is one of two ways to visually hide something from the screen. Your options are:

• visibility: hidden;
• display: none;

Visibility: Hidden will make an item invisible and leave an empty "block" where the thing would have loaded. It's there, takes up space, but it's just invisible. It's still in the "flow" of the viewport.

Display: None will make an item invisible and will NOT leave an empty block where the thing would have loaded. It collapses that space as if nothing was there by removing it from the flow of the design.

The thing is, it's only visual. The HTML is still there and still renders. It's just made invisible. That means the JS for the ads is still there and executing too.

The method I'm describing injects the chosen JS script for the ad into an HTML section AFTER the page has loaded. It has nothing to do with media queries and CSS. It's a Javascript method of detecting viewport size and THEN fetching the proper ad code.

What you have going on is 1) All ad codes are present at once and executing. 2) All are made invisible except the one based on CSS, not JS.

This would be good for affiliate banners and things like that, but not ad network ads.

What you want is 1) The Page loads with no ads. 2) JS script detects the viewport size and tells the ad server "okay, this is the width and I've told you to only send me this specific ad at this width" 3) It sends the ad and loads it in the designated spot 4) Only one ad ever executed for than spot, all after the fact instead of before.

It's like the ads are hunters in the woods. The deer are the ad networks. They don't want the hunters to put on camouflage and pretend to not be there. They want them to actually not be there, otherwise they are getting shot (sending wrong data to the clients and themselves, making it impossible to optimize).

 

[Sutra]

Ah ok, that makes sense. I get it now. Thank you.

 

[Ryuzaki]

Found an article that explains the various approaches with Doubleclick For Publishers:

• How to Use Google DFP and Adsense on a Responsive Website

That article also links to this:

• https://github.com/madgex/lazy-ads

Which seems like an easy Non-DFP option.