Integrating InMobi Ads into jQueryMobile and MoSync based app
Recently I was developing a HTML5 app for a client using jQueryMobile and MoSync Reload with Wormhole Library (an amazing client which let you develop about 70% times faster compared to using native procedures) when I struck with a problem of placing InMobi ads into jQueryMobile sub-pages. If you are familiar with jQueryMobile you would know that it normally fetch pages on ID bases through AJAX and this trick allows it make smooth transitions. While on non-AJAX pages you can simply integrate InMobi’s JavaScript SDK which would be simple JavaScript snippet which you include in your pages and mobile ads will start rolling, however, in case of AJAX based pages, ad providers normally detect AJAX requests and then refuse to serve ads because of the threat of misuse. I went as far as signing up for an AdMob account but found similar problem there.
I googled through, despite of some questions on stackoverflow, none had the solution (except the solution of turning to non-AJAX based pages which I couldn’t do in any case), I fired up an email to InMobi support and surprisingly got reply with-in an hour linking me to InMobi Mobile Web API.
InMobile Web API require POST request with a certain set of parameters and then return ads in XML format which you then need to parse and display ads wherever you want (including your jQueryMobile sub-pages).
Following is the dissection of request to API:
Basically InMobi Mobile Web API require you to make a POST request along with following parameters:
mk-siteid=xxxxxxXXXXXxxxxxXXXXXX& mk-version=pr-SPEC-ATATA-20090521& h-user-agent=Nokia6233%2F2.0& mk-carrier=117.97.87.6& format=xml
- mk-siteid is the ID which you get after registering your app with InMobi through their website, for the purpose of development you can use their test ID which is: 4028cba631d63df10131e1d3191d00cb
- mk-version is unknow to me but it remains static as it is.
- h-user-agent is your browser agent which you can easily get through navigator.userAgent
- mk-carrier is the user IP which you can get through following simple JSON call:
$.getJSON("http://jsonip.appspot.com?callback=?",
function(data){
userIP = data.ip;
});
and format can always be XML as response will always be.
Moving forward we all know how to make POST request using jQuery along with above parameters:
$.post("http://w.sandbox.inmobi.com/showad.asm", { "mk-siteid": "4028cba631d63df10131e1d3191d00cb", "mk-version": "pr-SPEC-ATATA-20090521", "h-user-agent": navigator.userAgent,
"mk-carrier": localStorage.getItem("userIP"), format: "xml", "mk-ad-slot": 10 },
function(data) {
console.log(data);
}
URL in above post request is of Sandbox which you should use while developing and when you are ready to go Live, you should make your calls to:
http://w.inmobi.com/showad.asm
At this point if you check your Firebug or Chrome JavaScript developer tools you should see a XML object with AdURL, ImageURL or LinkText in it. The next step would be how we extract this data and display in our page.
First you need to create an ad ‘holding’ area in HTML, in my case I created it just above the closing content div:
<div> <a id="bannerURL" href=""><img id="playerBanner" src=""></img></a> </div>
Next you need to expand your data callback function and include XML parsing capability which should extract the ad data out and show it in ad holding HTML.
function(data) {
$(data).find("Ad").each(function(){ //find Ad tag and loop through each
$("#bannerURL").attr("href", $(this).find("AdURL").text()) ; //get AdURL tag and update
if($(this).attr("type") != "text"){ //if ad is not text based
$("#playerBanner").attr("src", $(this).find("ImageURL").text()) ; //update image src
}else{ //in case of text based ad
if($(this).find("LinkText").text() != "invalid ip-address"){ //ip not found
$("#bannerURL").text($(this).find("LinkText").text()) ; //just update text
}
}
});
}
Above code should be self explanatory as I have added comments against each line, basically you need to loop through all of the XML, finding “Ad” nodes, then going through each node and finding AdURL (where user will go after clicking on Ad) and updating href attribute of our hyperlink tag in holding HTML then InMobi serve ads in two formats, one is text and other is image based banner ads. If it’s not text ad, we will get ImageURL and update the img src in our holding HTML, if it’s text ad then we will simply update text enclosed in “a” tags.
This should complete your ad integration and you should see a sandbox banner or text in your sub-pages. In my case it did:
Complete code is below:
<script>
var userIP;
$.getJSON("http://jsonip.appspot.com?callback=?",
function(data){
userIP = data.ip;
localStorage.setItem("userIP", userIP);
});
$.post("http://w.sandbox.inmobi.com/showad.asm", { "mk-siteid": "4028cba631d63df10131e1d3191d00cb", "mk-version": "pr-SPEC-ATATA-20090521", "h-user-agent": navigator.userAgent,
"mk-carrier": localStorage.getItem("userIP"), format: "xml", "mk-ad-slot": 10 },
function(data) {
$(data).find("Ad").each(function(){ //find Ad tag and loop through each
$("#bannerURL").attr("href", $(this).find("AdURL").text()) ; //get AdURL tag and update
if($(this).attr("type") != "text"){ //if ad is not text based
$("#playerBanner").attr("src", $(this).find("ImageURL").text()) ; //update image src
}else{ //in case of text based ad
if($(this).find("LinkText").text() != "invalid ip-address"){ //ip not found
$("#bannerURL").text($(this).find("LinkText").text()) ; //just update text
}
}
});
});
</script>
<div>
<a id="bannerURL" href=""><img id="playerBanner" src=""></img></a>
</div>
This provides basic integration of ad API and you can build your ad serving structure on top of it. One improvement would be of adding your in-house ads which would show banners linking to your other apps probably as often InMobi simply do not return any ad when you go live, instead it would show:
<!-- mKhoj: No advt for this position -->
So, it would be wise to handle this exception and in this case show your own ad.
Happy coding!
