Jquery Mobile and Google Adsense – Working!

October 5, 2011 · 17 comments

I absolutely love using Jquery Mobile on my Vbulletin forum, however, not being able to monentize the traffic was a real disappointment. Typically, the issue in the earlier version of Jquery Mobile, is that upon a ajax page load, the Google Adsense script would be executed and the user would only see the ad and not the page. Then on the later version, the script itself wouldn’t be executed at all.

So, after much looking around, I finally found this posts that started me in the direction to sucess.

http://stackoverflow.com/questions/1142861/jquery-append-google-adsense-to-div

Here is how I’m accomplishing it. Try it out!

JS Code:

$(window).load(function(){
   var ads_top = $("#adsense_top").find("iframe");
   //This is where the ads will show when the page is first loaded
   $(ads_top).appendTo("#google_ads_top div");

   $("#adsense_top").remove();

   $('div').live('pagehide',function(event, ui){
      //Display the ad
     $(ads_top).appendTo("#google_ads_top div");
   });
});

Now, here is a sample page structure.

<!DOCTYPE html>
<html> 
	<head> 
 	</head> 

	<body>
 		<div data-role="page" data-theme="d">
	 	<div id="header">
	 	</div>

		<div data-role="navbar">
		</div>

		<div id="google_ads_top">
		    <div align="center">
		    </div>
		</div>

		<div data-role="content">
		</div>

		<div id="footer">
		</div>
	</div>

	<div id="adsense_top" style="display:none;">
		<!--Insert adsense Code-->
	</div>
	</body>
</html>

Let me know how it works out for you!

Update: After reading through the comments, it looks like some of the users are having issues getting this to work. I just updated one of my sites that has this method implemented to the latest version of JqueryMobile 1.1.1, and ajax refreshing with Google Adsense is still working.

If you like, you can view my site that has this implemeneted, just make sure you have your user agent set to a mobile device: http://politicalwind.net

Trackback URL:

{ 17 comments… read them below or add one }

benoit December 13, 2011 at 2:51 pm

hi,

where do you put the JS code and how do you annunce it ?

thx ;)

Reply

James January 20, 2012 at 10:49 am

Put your adsense mobile script code, inside the div #adsense_top

Reply

Mahbub Alam Khan December 15, 2011 at 7:25 am

I’m not clear where I need to put adsense code in this script. Would you like to elaborate your scripts?
I’d found you add and remove adsense containing DIV. But I’m confused where you exactly wrote your adsense scripts.

Waiting for your reply.
Have a great day!
Cheers!

Reply

James January 20, 2012 at 10:49 am

See the top comment, basically, just put the code in the div #adsense_top

Reply

Eric March 13, 2012 at 9:44 pm

Hey James,

This code worked for me. Thank you. Unfortunately, ads are being placed at the very top of the page on top of the header. Have you seen this or know of a fix?

-Eric

Reply

hamen May 5, 2012 at 3:14 am

Same here: adsense is just at 0,0 position.
Any way to fix it?
Thanks

Reply

Jeremy March 29, 2012 at 5:33 pm

I’m concerned that this will break Google’s TOS. Is Google okay with this method?

Reply

James April 21, 2012 at 7:16 pm

That’s a great question, I’ve looked over their TOS, i’m not 100% sure this is safe, but I am using on a few of my sites that I’m running adsense on. Been almost over a year now.

Reply

Johnny5 June 5, 2012 at 8:42 am

Doesn’t work for me (so far). . .

First off, I’m wondering why there’s a tag at the end of the javascript line that assigns a variable to ads_top.

I put the adsense code inside the adsense_top div, however there’s no mention in the HTML as to where your javascript (file) goes. I copied your code and made an ‘adfix.js’ file and put a ‘<script src=. . .. " tag for it in the header.

Made sure I included the google_ads_top div as well as the adsense_top div with the adsense code in my HTML.

Also added an alert("Hi"); in my adfix.js file, which never popped up inside the $(window).load function, but DID work outside of that function.

— Then there's your 'theirs' spelling mistake in the JS comments. Sorry, but it just looks unprofessional.

Reply

JoshN June 19, 2012 at 9:43 am

I think it’s sort of obvious that the “” is just a typo… probably caused by the CMS or blogging software used to create this website. Just ignore it (and delete it in your code).

I would imagine the target audience of this article is people currently running websites that are using the jQueryMobile framework. If you are indeed using jQueryMobile on your own website, then you probably know where to put the author’s example Javascript. Put it anywhere in the page, in the , or in an external JS file (like you did.. “adfix.js”). Just make sure the author’s provided Javascript is placed after the calls to include the jQueryMobile library.

If you’re not seeing any results (and your test of alert(“Hi”) is not working), then it’s probably because you’re either not using jQuery and jQueryMobile libraries OR you didn’t include your adfix.js file AFTER you included the above mentioned libraries.

I followed the author’s instructions and everything worked perfectly fine. Just make sure you’ve included both jQuery and jQueryMobile javascript libraries, and the Javascript that the author provided is included in your page AFTER you include the 2 jquery libs.

And yes, it annoys me too when people can’t spell. It’s a bit unprofessional. But this article is a GREAT example (that works fine) and this fact far outweighs the spelling mistakes, imho.

Reply

James August 13, 2012 at 12:17 pm

Sorry about that typo guys, didn’t notice that Wordpress added that garbage. Just edited the post and cleaned it up.

Reply

JoshN June 19, 2012 at 9:44 am

I mean to say that the “code” tag was a type that you should delete.

Reply

James August 13, 2012 at 12:21 pm

Johnny5, sorry about the typo, Wordpress added the garbage at the end of the tag.

Reply

Lon Hosford July 6, 2012 at 6:12 pm

Same problem as Eric and Hamen. The ads are at 0,0 and moreso are layered over all content the google_ads_top div follows.

Reply

Lon Hosford July 6, 2012 at 6:13 pm

Forgot to mention, the article and posters do not mention JQM version. I am using 1.1.0.

Reply

leron March 7, 2014 at 6:49 am

Thank you very much my brother it work for my caribbean music site, I had so much headache trying figure this crazy thing out, but you article help, now I can make some money lol

Reply

Descargar MP3 August 21, 2014 at 4:15 pm

I am trying this, but I do not know if I have to create a JS file for this please explain.

Reply

Leave a Comment