ChrisBell.eu

Implementing AdMob in your hybrid iOS app (Apache Cordova)

Looking to monetise the hybrid iOS app that you built using a framework like Apache Cordova/PhoneGap? I’ll make the assumption that you aren’t all that familiar with Objective-C, but you’re happy to code away using frontend web technology. This poses an interesting question: How the hell do you integrate AdMob on iOS?

Whilst there is plenty of help on the web for integrating AdMob with iOS, there are limited resources for implementing it in a usable way. Specifically, my desire was to place the ad banner at the very bottom of my app. I found some great advice on how to do this, although this brought me to the next issue.

I found that although my banner was placed at the bottom of the app’s view, it was overlaying my WebView, which was a big issue. It was blocking an essential form submit button.

After manually reading every single web page on the internet, and learning a lot about Justin Bieber in the process, I was surprised to find that no one has actually published a way to overcome this problem. In fact, I haven’t seen anything published about this issue at all, which I find a bit strange.

Nonetheless, to resolve the problem, you just need to resize the frame of your WebView.

Before

Before
After
After

Using Apache Cordova 2.4.0, here's my full implementation inside the standard MainViewController that is packaged with the framework (make sure you've followed the AdMob iOS intro first, otherwise this won't work):

View the code (gist)

I’m pretty sure you can work out what that does, but just in case, it changes the height of your WebView frame to be the same, minus enough space for the banner. Pretty much all of the action happens in the webViewDidFinishLoad method of MainViewController.m.

There might be a more elegant solution, but until someone else publishes it, my rusty Objective-C knowledge will have to suffice. I hope it helps someone.

UPDATE 11 FEB 2013: When deploying to a real device I got an error about duplicate symbols. After reading SO, apparently there’s an extra step necessary that the AdMob documentation doesn’t mention. When adding the -ObjC linker flag, ensure you also remove the _-allload flag as well.

UPDATE 27 JUL 2013: Dorababu kindly made me aware that although the adverts were showing, they weren’t clickable. Code now updated with fix.

NOTE: Whilst this implementation is specific to Cordova 2.4.0, it may work on other versions without modification, but this is an untested assumption. Use at your own peril!

Resources