Using Adsense Ads On Responsive Sites
By: John Elder posted in Adsense
Hello good people!
Wow what an amazing response to my new eBook!
I want to thank everyone who’s already picked up a copy. If you haven’t yet, you might want to now because I’ll be raising the price soon. I like to offer my eBooks to you guys at a lower price first before I start marketing it to the world.
It’s been a busy week and there’s lots to talk about…
First, my thin adsense sites are really starting to bounce back and gain traffic and adsense income (and amazon and shopzilla income too). I’ve designated 100 of them and I’m going to start reporting daily revenue for them, starting next week.
They aren’t at the same level as before Panda and Penguin, but to give you an idea…they brought in $25 yesterday and $20 the day before that just in adsense income alone. So I’m excited about that.
Second, my new member’s only adsense website is very close to being done…more on that soon.
Today though, I want to talk about adsense ads on responsive websites.
Basically, a responsive website is one that adapt to the size of the screen or device the user is using. For instance, a website might look one way in a regular web browser on a PC, and another way on an iphone and another way on an ipad or kindle fire.
These days, it’s becoming more and more important to design your sites so that they’ll automatically change (respond) to look good on any device.
What happens if you use a big block of adsense ads on a website but need to show a smaller block on a mobile device? I hadn’t really thought about it until today when I read this article by Amit Agarwal.
He suggests you simply use this bit of javascript:
<script type="text/javascript">
google_ad_client = "ca-publisher-id";
if (window.innerWidth >= 800) {
google_ad_slot = "ad-unit-1";
google_ad_width = 728;
google_ad_height = 60;
} else if (window.innerWidth < 400) {
google_ad_slot = "ad-unit-2";
google_ad_width = 300;
google_ad_height = 250;
} else {
google_ad_slot = "ad-unit-3";
google_ad_width = 468;
google_ad_height = 60;
}
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
And that's really all you have to do. There are a few lines that you'll need to fiddle with in that code:
- google_ad_client = "ca-publisher-id"
- google_ad_slot = "ad-unit-1";
- google_ad_slot = "ad-unit-1";
- google_ad_slot = "ad-unit-1";
You'll just need to change the values in those to your own adsense values. Replace the things between the quotation maks with your own ad client ID and replace the ad_slot's with your own...you can find those values in the javascript that your regular adsense code uses.
That code is very straight forwards and simple. Basically it says, if the size of the screen is big (greater than or equal to 800) then show the 728x 60 sized adsense ad. If the screen size is small (less than 400) then show the 300x250 sized adsense ad. And if the screen size is between 400 and 800, then show the 468x60 sized adsense ad.
You can change the sizes to whatever you prefer based on your site design by just fiddling with those values.
Responsive design is the wave of the future, so even if you aren't doing it now, be sure to write down that snippet of code...it may come in handy!
In case you haven't heard yet...my new Adsense Empire Thick Site Guide eBook is out! It's 164 pages of step by step info that teaches you exactly how I built one thick adsense site over the course of one week that earned right at $3,200 on autopilot over the course of the year.
I literally teach you everything you need to build sites just like that. I even show you the site so that you can really dig around and understand how to build them.
$3,200 on autopilot...Imagine if you built just 10 websites just like it. Do the math...now imagine if you built 50 of them.
My new ebook costs just $37 and you can read about it and order it here. I promise I won't raise the price until after this weekend...but if you want to take advantage of that special early bird discount price...you should really grab a copy today.
As with everything I create, it comes with a no questions asked money back guarantee.
Check it out, and...
Keep on building!
- John Elder
The Marketing Fool!
