jQuery Mobile and AdSense

You and your team create a beautiful and engaging mobile website. Your visitors, page views, and site duration numbers keep increasing, but how do you turn that into cash? Like it or not one of the easiest ways to turn page views into cash is ads. That’s right ads, those annoying things that all users seem to hate but are the most universal way to pay the bills.

In this post I show how to integrate Google AdSense into a jQuery Mobile web site. Please know that AdSense is not the only mobile web ad provider, there are others and I would highly recommend investigating them before committing to AdSense.

Like so many things Google there is a “Getting started” page. It is a little bit hard to find since most search queries for mobile ads will send you to AdSense’s cousin, AdMob which is intended for mobile device apps. Be sure to read all of the program policies. You and your site will be held responsible if you violate any policy. 

Next you will need to sign into AdSense with a Google Account, aka your GMail account. If you don’t have one you will need to get one which is relatively easy to do. Be aware that this account will need to be verified. Since AdSense will hopefully be sending you money, both your identity, address, and banking information will need to verified.

Once you are in AdSense do the following:

  1. Click the My ads tab
  2. Make sure that Ad units is selected in the left column
  3. Click the + New ad unit button
  4. Give the ad unit a name, I chose, BlogDemo
  5. Set the Ad size, choose 320 x 50 – Mobile Banner
  6. Make sure that Text & image/rich media ads is selected
  7. For Backup ads, just leave it set to Show blank space
  8. Don’t worry about Custom channels
  9. Leave the Ad style set to Google default
  10. Click the button Save and get code
  11. Copy the Ad code

The Ad code will look something like the following:

google_ad_client = “ca-pub-################”;
/* BlogDemo */
google_ad_slot = “6806436256”;
google_ad_width = 320;
google_ad_height = 50;

There are two parts to the Ad code, the first part should go in the header of each page which will display an ad. The second part should go where the ad will be displayed. In the first part is your Google Ad Client Publisher Id. You must replace the number shown with yours. The number shown above will not work in code.

To demonstrate how to plug the ad code in, let’s create a simple two page mobile website. If you’ve read this blog before, you might recognize this as our jQuery Mobile Skeleton. It makes a good place to start our coding.

Where should we display the ad? Since the ad is 320 x 50, it will stretch the width of the display on iPhones and many other smart phones. Obviously we don’t want an ad appearing over out content. It would be least bothersome either at the top or the bottom of the page. Or in jQuery Mobile parlance, it will be best if was in either in the header or the footer. And that is exactly what we will do.

First we place the first part of the Ad code in the head section of both pages:

        google_ad_client = “ca-pub-################”;
        /* BlogDemo */
        google_ad_slot = “6806436256”;

        google_ad_width = 320;
        google_ad_height = 50;

On page one we will place the ad in the footer like so:

        <script type="text/javascript"

Notice that we use the data-position=”fixed”. That will lock our ad at the bottom of the display.

On page two, we place the ad in the header like so:

        <script type="text/javascript"  data-ajax="false"

The last thing we need to do is force page loads. AdSense was created for websites which load pages the old fashion way. It uses the HTML tag to inject JavaScript and HTML onto the page. If the script tag is loaded via ajax, the magic doesn’t occur. To get this behavior in jQuery Mobile, we must turn ajax off via the data-ajax=”false” attribute.

Unfortunately, while the data-ajax allows AdSense to function correctly, it causes us to lose the jQuery Mobile transition effects. If anyone has found a way around this, please let me know.

The code for this post is on GitHub as always. Keep in mind that it won’t work until you put your publisher information in.


22 thoughts on “jQuery Mobile and AdSense

  1. I got excited when I saw the post. I thought you had figure a way to keep Ajax working while using Adsense.

    Google should really take a look at this problem and solve it.


  2. On the same topic, I was trying to do this globally so not having to edit all pre-existing links. I have found this:

    $(document).bind(“mobileinit”, function () {
    $.mobile.ajaxEnabled = false;

    I put in where include my JQ and JQM scripts, but it doesn't seem to work. Just wanted to throw this out also for another option (if it can be made to work).


  3. Follow Up: I did get the global disabling of ajax to work properly. It is the order of the inclusion of the JQ items in the page that mattered (in my case anyway). They had to be in this order:

    1. JQ CSS file
    2. JQ core library
    3. the script that disables ajax (see prior post)
    4. JQM library

    I guess the bind/initialization matters, not sure why. Hope this helps someone.


  4. I have no luck to get the second showed up. The only first one, in the header. I tried to add

    1. src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    in two places but only in the footer it works.
    2. I tried to add two parts that one from to footer, but none of this technique was not working. Any idea? Have you tried to display two ads on the same page? Probably you have code example. I am not sure where I am doing wrong.


  5. I will definitely take a look into this, but I have a lot on my plate right now with Code Camp this weekend and my Google+ Hangout on Tuesday. I will try to do a blog post next week about this next week.
    If you solve this before, please let me know.


  6. I made temporary fix:

    In the

    And second just mobile unit, it is being supported by google but won't be soon:

    And one code in the header and one in the footer to display ads respectively:


    At least it works for now, but will need to figure out “permanent” fix ))


  7. Hi JD,

    Thanks for taking the time read my blog. The post is about using AdSense with jQuery Mobile which is just a website which is AdSense's use case. For Cordova, you should use AdMob.


  8. Hello

    Unfortunately I'm unable to get my ads working in my jQuery site … I get this message from the error console:

    “Unsafe JavaScript attempt to access frame with URL http://googleads.g.doubleclick.net/pagead/html/r20130822/r20130206/zrt_lookup.html#I-http%253A%252F%252Fwww.healthyspiral.com%252Fhealthsearch%252Fsearching.html%2F3444705167%2F1 from frame with URL about:blank. Domains, protocols and ports must match.”

    I see that your web app example still works, and I've tried to compare my code with yours, to see what i may be doing wrong … is there a version of jQuery Mobile that works better, for example?

    I wonder if you would be willing to consult on this, for a fee?
    You can contact me at

    thanks for any help you can give me
    best regards


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s