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:
- Click the My ads tab
- Make sure that Ad units is selected in the left column
- Click the + New ad unit button
- Give the ad unit a name, I chose, BlogDemo
- Set the Ad size, choose 320 x 50 - Mobile Banner
- Make sure that Text & image/rich media ads is selected
- For Backup ads, just leave it set to Show blank space
- Don't worry about Custom channels
- Leave the Ad style set to Google default
- Click the button Save and get code
- Copy the Ad code
The Ad code will look something like the following:
<script type="text/javascript"><!--
google_ad_client = "ca-pub-################";
/* BlogDemo */
google_ad_slot = "6806436256";
google_ad_width = 320;
google_ad_height = 50;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
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:
<script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.mobile-1.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-################";
/* BlogDemo */
google_ad_slot = "6806436256";
google_ad_height = 50;
//-->
</script>
On page one we will place the ad in the footer like so:
<footer data-role="footer" data-position="fixed">
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</footer>
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:
<header data-role="header" data-position="fixed">
<script type="text/javascript" data-ajax="false"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</header>
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 <script> 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.
<a href="index.html" data-role="button" data-ajax="false">to the Index page</a>
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.
