head_ad

Building a ‘Responsive’ Adsense Widget for the Twenty Twelve Theme

UPDATE 07/31/2013: Google has finally offered up the beginnings of a solution – quite similar to what we have been using. You can check out my article here!

NOTE: My adsense account has been deactivated. And the fine folks at Google simply don’t bother explaining why they deactivate accounts – they just do it. If I ever find out why I will forward that info on. For now, I would recommend you do not use the guide I have below – in case that is the problem.

Over the past two days, I’ve put up a couple articles relating to widgetizing the twenty twelve header and guidance for adding multiple items up there while accounting for 2012′s responsive nature. I wanted to finish up today by showing my solution for running Google Adsense ads to the header while still maintaining the responsive nature of the theme as best we can, let’s dig in!

You’ll notice I have responsive in the title of this article in quotes. I want to emphasize that we are going to perform a little trickery in our widget. Currently, Google doesn’t feed out responsive ads. I don’t know of any way to make the ads truly responsive. But I have come across a little technique to keep your advertising from looking horrible and busting completely out of your theme. Now if you aren’t looking to make a widget, you can still use this technique for adjustable ads – but throughout this series of articles I have been hinting at my functionality plugin. I’ve shown how to add code to your theme of course, but I also stress the plugin route.

Here’s my thoughts on the plugin. I change themes on VoodooPress each time a new default theme is released with WordPress. On my personal blog, I change themes annually. Certain functionality I like to keep regardless of what theme I have. This header widget area with Google Ads is one of those things. So I register my sidebar in the plugin, and I build my widget. Then – each time I change themes all I need to do is insert a small piece of code to add my widget area and maybe adjust a little CSS and I’m done. It’s all up to you of course! This all works in a theme, or a plugin!

Now, on to the setup. Before we get into the code, you need to take some time over on Google Adsense. You will need to register 3 different ads. You need a full sized ad, a medium sized ad, and a mobile friendly sized ad. You can pick what sizes you want – I personally went with 728×90, 468×60, and 320×50. Remember I told you we couldn’t make things truly responsive? Instead, we load an appropriate sized ad for the screen size. The tradeoff here is that the ads don’t behave responsively – they don’t flex. If you load up your site on a computer monitor, you get the full size ad – if you then adjust the browser window, the rest of the theme responds and looks great – the ad however, won’t do that. It just loads the proper size ad at load time. It seems to work well enough for me for handling computers, tablets, and phones. Now after registering those three ad sizes, here is some code for you:

<script type="text/javascript">
    google_ad_client = "ca-pub-XXXXXXXXXXXXXXXX";
    if (window.innerWidth >= 800) {
        google_ad_slot = "XXXXXXXXXX";
        google_ad_width = 728;
        google_ad_height = 90;
    } else if (window.innerWidth < 400) {
        google_ad_slot = "XXXXXXXXXX";
        google_ad_width = 320;
        google_ad_height = 50;
    } else {
        google_ad_slot = "XXXXXXXXXX";
        google_ad_width = 468;
        google_ad_height = 60;
    }
</script>

<script type="text/javascript" 
 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

The code should look a little familiar, It’s just a combination of the code Google gives us for inserting ads, combined together and conditionalized for the window size. Of course you need to replace the XXXX for publisher ID and ad slot with your own numbers from Google. Now, you could just set up your ads, and use this code in a text widget and you’d be all set. I just wanted a widget so I could drag my ad to my new header sidebar and be done with it. A little bit of work for fun, and simplicity down the road. Here’s the rest of the code for that simple widget, just like everything else we’ve done, this works in functions.php or in your functionality plugin:

// BUILD OUR WIDGET TO SHOW OUR GOOGLE SIDEBAR RESPONSIVE HORIZONTAL BANNER AD
function voodoo_google_horizontal() { ?>

<div class="googleAdH">

<script type="text/javascript">
    google_ad_client = "ca-pub-0680124360712957";
    if (window.innerWidth >= 800) {
        google_ad_slot = "2557092311";
        google_ad_width = 728;
        google_ad_height = 90;
    } else if (window.innerWidth < 400) {
        google_ad_slot = "1144604036";
        google_ad_width = 320;
        google_ad_height = 50;
    } else {
        google_ad_slot = "1268080398";
        google_ad_width = 468;
        google_ad_height = 60;
    }
</script>

<script type="text/javascript" 
 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<?php }

function widget_voodoo_google_horizontal($args) {
	extract($args);
	echo $before_widget;
	voodoo_google_horizontal();
	echo $after_widget;
}

function voodoo_google_horizontal_init() {
	register_sidebar_widget(__('Voodoo Horizontal Google Ad'), 'widget_voodoo_google_horizontal');
}
add_action("plugins_loaded", "voodoo_google_horizontal_init");

That is it! This isn’t the way you would go about building a fancy, in-depth widget of course. This widget has absolutely no settings or anything. I don’t even set it up so the title can be changed, there is no need. All I want is a drag and drop ad widget.

That’s it for this little mini-series, nothing mind-blowing here. I really just wanted to help you get started with thinking about how you are gonig to modify the twenty twelve theme, because very soon it’ll be the new default look for WordPress. As always, when you get ready to modify that theme – DO NOT TOUCH IT! Friends don’t let friends modify themes improperly! And you know VoodooPress is your friend! Instead, make a child theme for all your modifications! Everyone will be much happier!

14 thoughts on “Building a ‘Responsive’ Adsense Widget for the Twenty Twelve Theme”

  1. Will this script work to actually stop loading an ad all together? I am working on a site that (sigh) will have a ton of ads, but if you look at mobile users, they are in action mode, and for my purposes some of the ads aren’t necessary on a mobile phone, and will be taking up far too much real estate and load time. Can you use something like: else if (window.innerWidth < 400) {don't load the script!} ?

      1. Yeah… that’s what I’ve been doing. If you go to Google forums etc. there’s no clear cut solutions. Hiding still loads the script, which means it’s technically against the TOS and bugs up your click through ratio. I haven’t had any issues from them yet…

        1. Yeah, my account was just deactivated – let me tell you, they sure don’t like to give you any information as to why it happened! If it has to do with this technique I was using, I will immediately update my post to let everyone know. This is a bit of a pian.

          1. Noooooo! Sorry to hear that. I bet it does have something to do with this post. Whereas Googler “A” says this method is OK, Googler “B” says nuh huh and hits the kill switch. I’m still not seeing a valid solution from them besides just using their 320px ad code for everthing…

          2. Yeah, I deactivated that part of my code and resubmitted, and threw a disclaimer on the post. It’s a shame that Google doesn’t help us to be just a bit more flexible with our advertising to keep our sites looking good.

          3. Well, as a follow up… they have reactivated my account. But they never offered any sort of explanation as to what the problem was. So I can’t be sure if it was this or not. They sent me a big long list of things not to do, a form letter. It was pretty much centred around not clicking your own ads or enticing others to do it. Neither of those things have ever happened on VoodooPress…. so I guess I’ll never be sure, but now I have to figure out what else to do instead to keep my site looking decent at smaller sizes.

          4. Well, I’m happy to hear you’re back up and running. Here is a link with “confirmation” from google that this method is acceptable: http://www.labnol.org/internet/responsive-google-ads-approved/27872/

            I have posted a comment there asking for a google link… anything to confirm this…

            Many other bloggers are offering this solution javascript via blog spam (also linking to labnol)

            I am still wondering (not sure how it works) if using a combination of media screen and “if” argument will work (sorry, I’m new with scripts and some php) but if we look at say, our loop, it could read “if is home” or “if is category, and loads the proper block. Couldn’t we do the same thing with a media screen? This way, it will only load what you WANT it to load. For instance, using a php “if is @media screen 600 *load this ad div* and “if @media screen 960 *load this ad div*. No google code has been altered. I have no clue on the arguments, and now we’re dealing with not simply pasting a code into a widget, but I’m wondering if this would work, and ONLY load the ad we desire?

            All this $h*t makes me want to go back to non-responsive…

          5. I’ll have to check that out later and try to follow up a bit. I can’t see that site right now, I’m stuck on old IE at work and the site doesn’t seem to load up at all. Anyway, I don’t know of a way to accomplish the conditional logic using php. The JS is really the only way. As you stated, CSS won’t work – all 3 ads load which is definitely a violation of the TOS. With the JS, the ad code will appear in the source code but only the appropriate ad loads. Seems like it should be OK in terms of the TOS – but again, that’s the only reason I can see for my account being deactivated. I definitely don’t have anything goofy going on with my ads. As for the php, there is no way to query based on screen size that I know of. CSS and JS are both browser side, they parse and render in the browser and are aware of the happenings in the browser. PHP is server side, it is agnostic of and unaware of the browser – at least in terms of viewport size. You can’t even use JS to determine browser size and pass that to the PHP because the PHP runs on the server before the page loads and the JS runs in the browser after the page loads. So by the time JS gets the browser info, the php is done running.

          6. Well, thanks for the follow up answer. If I ever come across another solution, I’ll let you know. What I’m trying now (somewhat unsuccessfully) is to create fixed sidebars and fluid content, creating an environment that allows for ads. Cheers!

  2. Great post. I don’t see how this would get your account banned, it’s not hiding any ads, it’s displaying different ads based on the window size. Google can be really picky when it comes to Adsense though. I use something the same for my site http://pastebin.com/bFqbEzyz
    They really need to come out with responsive ads.

      1. Sure thing! I set up one of my ads to test on my wife’s site, ankhjii.com – it works just like what we had set up here. I’m going to get everything switched over so that I’m using their code. It works just as well.

Leave a Reply