Android Market

Image via Wikipedia

I recently created a small Android mobile app using Sencha Touch & Phonegap. The app was always going to be free as it does  little more than give website owners the ability to check how their website is performing from a SEO and Social Media point of view.

I thought I might as well try and make a few bob from the app (oh the app is called My Web Performance and is available on Android Market) so the obvious option was sponsored adverts. And no place more obvious to use for sponsored ads, that Google. Google offer a program for mobile developers called Admob. Admob works pretty much along the same lines as Google Adsense in that you place Google Adsense on your website and you earn a % of the amount the advertiser is paying to place their ads on Google. Admob does this for mobile websites and applications etc.

The dilemma was that I couldn’t find out how to get this to work with Sencha Touch and Phonegap. I figured out a little hack in the end that seems to be working out for me so far. So for all you Sencha Touch users, here’s how I did it…

  1. Admob Set Up
    In Admob – when adding a site, choose “Smartphone Web App”. This will present you with Javascript that we can use later.
  2. Sencha Touch
    Ok, the idea is to basically create a new toolbar that uses an iFrame to pull in a separate html file that contains the Admob code. So firstly, create a new HTML file called adverts and paste your Admob code into it.Then in your Sencha Touch application js file add the iFrame code where-ever you think it will sit best. My panel looks like this:

            var content = new Ext.Panel({
            fullscreen: true,
            id: 'content',
            scroll: 'vertical',
            dockedItems: [{
                id: 'status',
                xtype: 'toolbar',
                dock: 'top',
                title: "My Web Performance"
            	},
				actionPanel,
				{
					title: 'The Latest',
					html: '<iframe src =\"adverts.html" width=\"100%\" height=\"48\" frameBorder=\"0\" scrolling=\"no\"></iframe>',
					id: 'feedTab',
					border: false,
					dock: 'bottom',
				}
			]
        });


  3. Phonegap
    There’s really nothing out of the ordinary to do here – follow the usual steps and you should be laughing!

Enjoy!

 

Enhanced by Zemanta
Be Sociable, Share!