Responsive: Showing ads conditionally

[bdamage]

On my responsive site the appropriate CSS is selected based on media-querys to show either the mobile-only zone or the desktop-only zone. I did this using a wrapper appropriately with "display:none" set for the hidden one. But this means 2 ads are always pulled from the server. When I'm using Adsense are they being counted as 2 separate ads each time? Won't Google forbid this?

I suppose what I'm asking is - is there a smarter way to set this up so only the zone which will appear is loaded, based only on the CSS media-query (or other) way ?

[andrewatfornax]

Hi @bdamage,

Yes, I think you will want to do this another way - if you're always loading the banners, but then just hiding one, then that will probably record an impression for each banner, and probably Google (and most other services) won't approve of you loading, but hiding, their banners.

Presumably, your wrapper can determine (using JavaScript?) if you're showing the page to a mobile user or a desktop user, and currently sets the display property based on this? If so, rather than setting a display property, why not either load or not load the invocation tag?

That way, you will only load the zone that's appropriate.

[bdamage]

Yes, that's it. A vastly simplified, but still non-working, version of what I'm trying:

<style>
	/* Desktop */
	@media screen and (min-width: 600px) {
		.desktop {
			display:block;
		}
		.mobile {
			display:none;
		}
	/* Mobile */
	@media screen and (max-width: 600px) {
		.desktop {
			display:none;
		}
		.mobile {
			display:block;
		}
	}	
</style>

<div class="desktop">
	<ins data-revive-zoneid="1" data-revive-id="999999999"></ins>
</div>				

<div class="mobile">
	<ins data-revive-zoneid="2" data-revive-id="999999999"></ins>
</div>				

Any tips on how to just execute the relevant <ins ...> part greatly appreciated. Thanks.

[andrewatfornax]

Can you just leave the divs empty, and then write the invocation tags into them if you want them to be there?

[bdamage]

Sounds interesting ... any more clues please? ;-)

[Matt Glover]

I think what it being suggested here is that you make a decision about which div to include - perhaps server side. So if you are using PHP you would make a decision about which div to render and only render the one you want to use based on the user device.

Alternatively you could do it client side with javascript - make the decision at run time, inline, and append the chosen invocation code. Something like $("#myad").append('<ins blah blah blah'>);

The trick would be to do that BEFORE the async call executes and looks for active zones.