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:
{ 15 comments… read them below or add one }
hi,
where do you put the JS code and how do you annunce it ?
thx
Put your adsense mobile script code, inside the div #adsense_top
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!
See the top comment, basically, just put the code in the div #adsense_top
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
Same here: adsense is just at 0,0 position.
Any way to fix it?
Thanks
I’m concerned that this will break Google’s TOS. Is Google okay with this method?
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.
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.
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.
Sorry about that typo guys, didn’t notice that Wordpress added that garbage. Just edited the post and cleaned it up.
I mean to say that the “code” tag was a type that you should delete.
Johnny5, sorry about the typo, Wordpress added the garbage at the end of the tag.
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.
Forgot to mention, the article and posters do not mention JQM version. I am using 1.1.0.