How Can I display different Ad sizes for different resolutions

Hi Developers.

I have a wordpress site and I want to increase adsense revenue by putting the 336x280 ad for mobile platform. The 336x280 ad is against Adsense policy because for some small phones is too large and it can cause accidental clicks while for high resolution devices such as iPhone 5, 6, Galaxy S4, S5, LG G3, G4 and so on it fits perfectly.
Can anyone show me the code to show 336x280 ad for mobile with resolution from 480x800 on up.
I have zero knowledge in programming so please be clearer.

 

If you are using adsense, they have a new method for using ads in a responsive manner. Instead of the normal code you'd cut and paste in, you just use:

<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-123456789" data-ad-slot="123456789" data-ad-format="auto"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Code (markup):

Plugging in your publisher ID and ad-slot in the appropriate fields (where I have 123456789 as placeholders). The order of this snippet is REVERSE from the one they give you to address a bug in Googles code that makes the ads sometimes fail to show up in Firefox on sub-pages or when the page is already in the cache.

data-ad-format="auto" being the real magic. Basically if you use that code where you'd normally put the code for an advertisement, adsense will automatically choose an advertisement to fit the declared (or calculated) width of the parent element on the page. All you need to do is make sure the height of that parent element is dynamic (which it should be anyways, fixed heights are for fools) so it can adjust to fit whatever ad they feel like giving you.

MIND YOU, the advert will NOT change size if you resize the window, so it only loads the appropriate advert on pageload. I'm playing now to see if I can find a workaround for that. I only came up with that "bugfix" a few days ago as it is and I'm still playing with adsense as I've not really dealt with ads in a decade from an utter and complete lack of trust of the sleazeball scam artists shits known as advertisers.

I'm thinking on making a script that traps window.onresize, and sets a timer of like a second or two... if that timer elapses without another resize delete the existing ad on the page and insert a replacement, triggering their script again.

Honestly advertising scripts auto-detecting the size of what they are plugged into is a LONG overdue bit of functionality, finally dragging advertisements out of the "dark ages" of being measured strictly in pixels.

... since most things measured in pixels are a giant middle finger to users with accessibility needs.

 

Thanks man it's working perfectly.
Is it safe to use this code on my site I do not want to get ban from Adsense?

 

It's basically their code right off their page if you choose responsive, just with the script tag moved to the end. On their own pages they say you can actually put the script load anywhere in the document, so there's no reason for them to penalize you for it.

On my own sites, I put the script load for that right before </body> as you only need to load the script once even if you have multiple adds. it's the number of times you call that push({}) method that determines how many ads it looks for.

If it were unsafe, since I posted my "fix" to their code to their alleged forums I'd think they'd have mentioned it by now.

It loads the ads normally, doesn't impact their tracking, in fact because they load the script with that little "async" part means it's safe to place anywhere. All they check for is if the correct elements are present, not the order they are in.

 

I always like to have more control what sizes are thrown in. Been using this code for a while now (don't know who the author is):

<div id="google-ads-1"></div>
<script type="text/javascript">
ad = document.getElementById('google-ads-1');
if (ad.getBoundingClientRect().width) {
adWidth = ad.getBoundingClientRect().width;
} else {
adWidth = ad.offsetWidth; // for old IE
}
google_ad_client = "ca-pub-123456789";
google_ad_slot = "123456789";
if ( adWidth >= 1200 )
google_ad_size = ["728", "90"]; /* desktops */
else if ( adWidth >= 1024 )
google_ad_size = ["728", "90"]; /* ipads */
else if ( adWidth >= 640 )
google_ad_size = ["650", "90"]; /* various tablets */
else if ( adWidth >= 540 )
google_ad_size = ["620", "90"]; /* larger cell phones */
else if ( adWidth >= 200 )
google_ad_size = ["350", "200"]; /* smaller cell phones */
else if ( adWidth >= 180 )
google_ad_size = ["300", "200"]; /* smaller cell phones */
else
google_ad_size = ["200", "200"]; /* smaller cell phones */
document.write (
'<ins class="adsbygoogle" style="display:inline-block;width:'
+ google_ad_size[0] + 'px;height:'
+ google_ad_size[1] + 'px" data-ad-client="'
+ google_ad_client + '" data-ad-slot="'
+ google_ad_slot + '"></ins>'
);
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>

Code (markup):

That way I can change them to whatever sizes I want.

 

@qwikad, I would punch myself in the face before I'd deploy that script... though prior to them providing the "auto" size that was one of the few way to pull it off. Still, document.write deserves to be buried and forgotten since it forces a reflow and triggers the parser again.

Now? I wouldn't even think of going there.

 

You can kick yourself in the ass instead, but it's doing the job. Can your script show multiple lines of ads as in, let's say, 729x300 or 300x700 where Google HAS to show that many ads? This script can. Yours, can't. If you're in a business of making $$ (which, sometimes, I think you're not) you'd see the benefits of using that instead of what you're using.

Having said this, I also know you've been right on many occasions before, so, maybe what you're using there will prove to be more efficient, in a long run, compared to this script.

 

@deathshadow nailed it, this one was kind of a question that did not really need an answer. Since Adsense already has auto for size why would you still want to use that old code? That code was an option years back, I'm just saying I agree that these days I would never use all that code to do what google already provides us with less code.

The thing I noticed was what deathshadow mentioned, on resize of the browser the ad's do not adjust unless you reload the page when after you resize the browser. I honestly doubt many care about this, it does bug me a little bit but to be honest most people are not loading a website and resizing the browser.

 

Although it does automatically resize it, it's still problematic to use in cell phones. In a horizontal position the ad will fill up the screen, now if you flip the cell phone vertically your ad will start overflowing to the right of the screen (and it's quite an ugly scene). Same will be true for smaller tablets like kindle. I prefer my code because I can tell it what to show in cell phones, computers, tablets, etc. Now if DS comes up with a fluid solution to it, I will be the first one to switch.

 

Not quite sure why you think it can't... just make more <ins> tags and do another Array.push({}).

That said if I had more than two ads on a page, I'd say there's something wrong with the page and the developer was TRYING to make people not want to use it, or dive for the adblock -- but then I've not browsed without some form of adblocking (unless testing ads) any time over the last decade and a half. YMMV.

I'm not seeing how yours is any different than what they've built in with auto... but then I prefer portrait aspect ads to landscape since they translate into tall vertical easier... Neither of ours adjusts on window.resize, which IMHO is a hook they REALLY should work into their auto adverts. I'm trying to dig through their fugly codebase to see if I can somehow retrigger it. Unshifting elements off the array then doing new push() seems to force a refresh of them, but it doesn't work in Firefox at all since again, the script is already in place and their push() method hook seems utterly banjaxed there.

Though I still wonder what the **** they need a megabyte of scripttardery for just to show advertisements.

 

One other thing:

Usually if a website is legitimate for making money, it has a PRODUCT. Generally speaking the "advertising can pay for everything" or "advertising as a money making scheme" nonsense trips my scammy sense since that's the same type of BS that resulted in things like Bluelight, NetZero and Juno being colossal money-pit scams during the dotcom bubble. That advertising as a scam was SOP during the bubble and the prime contributor to the burst, it's hardly a surprise that many in the industry say we're operating in a second bubble and are on the edge of a second kablooey... one that will be far, FAR worse given that this time around there's little if any liquidity to fall back on.

I trust online advertisers about as far as I can throw the USS Iowa, and generally consider advertising on websites more of a "break even on for fun projects" method than a actual revenue stream -- since to be frank the time and effort it takes to establish, build client trust and generate unique original content -- well, you'd make more money flipping burgers for a living in terms of time invested... unless of course you can build a major company with multiple underpaid staffers churning out content en-masse.

For the most part it reeks of the same type of "get rich quick" scam as affiliate marketing or late night "make money fast in realty" infomercials. The only real way to make money with advertising -- where the "big bucks" are -- is to be the trafficker, the middle-man. Google makes a fortune off adsense, the people with it on their sites? Lucky if it covers hosting costs... particularly when users like myself NEVER see ads. (In fact I'm loving how Adblock Pro in Vivalid blocks youtube ads -- funny since it doesn't do that in Chrome, wonder why...)

Hence why my having ads on my new site is more experiment than reality, just to see if they're still as big a bunch of sleazeball untrustworthy shits as they were the last time I looked.

Again, it's a laugh for Cracked to be the source of such an enlightened view of it, but... this really hits the nail on the head:

 

Hm. I wonder a bit about this flipping the phone/tablet over. I usually (always) browse sites on my phone in portrait mode. Flipping it means I have to use both hands on the phone, which is a hassle. Only reason for me to do that would be if the site I'm visiting doesn't really work in portrait mode, hiding content or something like that, so I flip it to view more of the page - but in most cases this will just make me leave the site.

Ads... I haven't really seen ads for a long time... they're annoying, and never about anything I want or need. Hence, adblock. Regardless of platform.

 

I gotta say I switch between the aspects on my tablet too... less so on the phone, but definitely on the tab. Some content is just easier to digest with more width than height.

It gets worse if you compare your server log traffic to what something like adsense or Google Analytics is reporting -- it's why I pulled the plug on GA altogether and consider it a pointless redundancy. When your server logs are showing 40% more traffic and steadier traffic than GA, you know something's not kosher.

See how on my new site adsense right this second claims ~3400 or so page-views, while webalizer is reporting nearly 29k total, 20k once I delete known bots from the record. (I've really got to set up some iptables drops on my new VPS setup) -- yesterday it reported a whole whopping 5 views to 25K according to webalizer... how's that work exactly?

There's a reason I trust Google Analytics about as far as I could throw the big stick.

 

Thanks for your help, This code is very useful
But, I have a question, when I use this code with an ad size for example 300x250 in mobile the ad shows left and not in center. Do you know how to center the Ad?

 

I suppose you can do something like:

.css

.my_ads {
text-align: center;
}

Code (markup):

html

<div class="my_ads">

The code goes here...

</div>

Code (markup):

It should center your ads regardless of their width.