PhoneGap / Cordova and iAd integration

PhoneGap (Cordova) users, you are no doubt used to dealing with PhoneGap plugins to interact with frameworks, to keep your distance from having to dive into Objective-C. Well, in the case of iAd integration, you might actually find that the native approach is easier.

What's one of the biggest headaches as the layers of abstraction get higher and higher – dependencies. Finding the right plugin to match your version of PhoneGap, and integrating it requires another layer that just isn't necessary.

I'm going to describe the step to integrate iAd into your PhoneGap application, leaving you amazed at how simple it is. Note that I'm walking through this using XCode 4.3.2. The steps may be different for earlier/later releases.

Click on the top-most item in your hierarchy, the target. In the Build Phases tab, expand Link Binary with Libraries.
Click the + icon to add the iAd.framework to your project.
In your app -> Classes folder, open up MainViewController.h, and drop in the following code:
#import <iAd/iAd.h>

@interface MainViewController : CDVViewController { ADBannerView *adView; }
Open up MainViewController.m
In your viewDidUnload method, add:

[adView release];
In your webViewDidFinishLoad method, add:

adView = [[ADBannerView alloc] initWithFrame:CGRectZero];

if([UIApplication sharedApplication].statusBarOrientation == UIInterfaceOrientationPortrait || [UIApplication sharedApplication].statusBarOrientation == UIInterfaceOrientationPortraitUpsideDown) { adView.currentContentSizeIdentifier = ADBannerContentSizeIdentifierPortrait; } else { adView.currentContentSizeIdentifier = ADBannerContentSizeIdentifierLandscape; }

adView.currentContentSizeIdentifier = ADBannerContentSizeIdentifierPortrait; CGRect adFrame = adView.frame; adFrame.origin.y = self.view.frame.size.height-adView.frame.size.height; adView.frame = adFrame; [self.view addSubview:adView];
If you don't already have a willAnimateRotationToInterfaceOrientation method, add it, and drop in the following code:

- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)newInterfaceOrientation duration:(NSTimeInterval)duration { BOOL hide = (newInterfaceOrientation == UIInterfaceOrientationLandscapeLeft || newInterfaceOrientation == UIInterfaceOrientationLandscapeRight); [[UIApplication sharedApplication] setStatusBarHidden:hide withAnimation:UIStatusBarAnimationNone]; CGRect mainFrame = [[UIScreen mainScreen] applicationFrame]; [self.view setFrame:mainFrame];

if (newInterfaceOrientation != UIInterfaceOrientationLandscapeLeft && newInterfaceOrientation != UIInterfaceOrientationLandscapeRight) { adView.currentContentSizeIdentifier = ADBannerContentSizeIdentifierPortrait; [self.view bringSubviewToFront:adView]; adView.frame = CGRectMake(0.0, self.view.frame.size.height - adView.frame.size.height, adView.frame.size.width, adView.frame.size.height);

}

else {

adView.currentContentSizeIdentifier = ADBannerContentSizeIdentifierLandscape; [self.view bringSubviewToFront:adView]; adView.frame = CGRectMake(0.0, self.view.frame.size.width - adView.frame.size.height, adView.frame.size.width, adView.frame.size.height);

}

}

Steps 1-6 should be somewhat straightforward, but let's talk about step #7 a bit. Essentially what we're doing here is handling the change in orientation of the phone from portrait to landscape mode, and vice-versa. iAd advertisements have different sizes which are better suited to a given orientation. But, this is not handled automatically.

You need to adjust not only the size of the ad displayed, but also it's position in the view, whenever the orientation is changed. One of the most confusing aspects, is that although the orientation has changed, the dimensions stick.

For example, in portrait mode, self.view.frame.size.width will read 320. However, it reads the same dimension even in landscape mode. So, to properly place the ad in landscape (if you wish to place it at the bottom of the view), we need to subtract the ad height from the frame width.

Tags: iPhone app

33 Comments

Ed Farias says:

September 25, 2012 at 5:35 am

This worked great, thank you. I was really struggling getting the phonegap plugin to even work, and this work right away.
Quick question, it works in all of my simulator tests except for iPhone 4.3. Works for iPad 4.3, Ipad and Iphone 5.0. Any ideas?

Reply
1. admin says:
  
  September 26, 2012 at 1:51 pm
  
  That does seem odd. What do you mean by “doesn’t work”? I’ve had success with the iPhone 4.x simulator. But, it’s common, at least for me to see delays before the ads show up.
  
  Reply
Sprawl says:

September 26, 2012 at 1:02 am

This page helped me tremendously after taking a break from PhoneGap since version 1.5 and coming back to a command-line centric Cordova. This got my iAds going again, and smoother than before with the normal plugin, so thank you!

Reply
Mike says:

September 30, 2012 at 7:14 am

Hey great article I will probably end up using this for my Phonegap project… just one question:

How do you place the ad on the app? I want the ad unit placed near the top of the screen, how do I do that?

Thanks a lot for taking the time to write this article, I find it hard to find good articles on Phonegap!

-Mike

Reply
1. admin says:
  
  October 2, 2012 at 7:32 pm
  
  I haven’t actually tested this, but have a look at this line:
  
  adFrame.origin.y = self.view.frame.size.height-adView.frame.size.height;
  
  If you changed it to:
  
  adFrame.origin.y = 0
  
  I imagine that would do the trick.
  
  Reply
niz91 says:

October 7, 2012 at 5:01 pm

hello, i'm using phonegap 2.1 with xcode 4.4.1 but this don't worked for me.
any solution please?

Reply
1. admin says:
  
  October 7, 2012 at 10:46 pm
  
  The phonegap version shouldn’t matter, nor the Xcode version I wouldn’t think. But, has this worked for you in prior versions of either?
  
  Do you at least see a “blank placeholder” where an advertisement should be?
  
  Reply
niz91 says:

October 8, 2012 at 12:38 pm

i don't see a blank placeholder. i don't have error, nothing….
i tried with xcode 4.3.3, 4.4.1 and 4.5.1.
i do exactly the tutorial . how can i call the banner and shoose in what page of the app display it?

Reply
1. admin says:
  
  October 8, 2012 at 4:28 pm
  
  I’m not sure you’ll have that kind of fine-grained control when using PhoneGap. PhoneGap essentially wraps your entire app in WebView element, the iAd container lives outside that element. So, I’m not certain how PhoneGap would communicate which page is currently loaded to the iAd container. Doable, I’m sure, but you’ll likely need to build a phonegap plugin, or modify the existing iAd plugin.
  
  Reply
niz91 says:

October 9, 2012 at 1:43 am

it's ok it's work now, my error in the step 6, i put the code a the end of the method.
i have to put the code a the beginnig.
but now i have a problem : ADBannerView: WARNING A banner view (0x89506e0) has an ad but may be obscured. This message is only printed once per banner view.
my ad dispalying correctly, i don't know why i have this error

Reply
1. admin says:
  
  October 17, 2012 at 12:56 pm
  
  Step in the right direction. I received this “warning” during development as well, and chose, in the end to ignore it. I had expected the warning when the ad actually was obscured. But, from what I know, if you implement the ad code this way, there’s no way it can be obscured by your PhoneGap application code, as it’s all run within a separate Web View container.
  
  Reply
Iain Coleman says:

October 17, 2012 at 8:36 pm

Hi,
I followed the exact steps above, but only get the Test Advertisement banner when i rotate the device. Once I have rotated the device, the ad will continue to display. My app only supports landscape – is this an issue? Do I need to change anything? In Step 7, you mention adding the method- is this just a case of copying the code into MainViewController.m or do I need to do something else as well?

Thanks for any assistance!

Reply
1. admin says:
  
  October 18, 2012 at 1:35 pm
  
  You have definitely set the testing flag to false? No other code should be necessary, other than that in the MainViewController.m (except of course for the various setup steps, such as adding the iAD library, etc.)
  
  Is your ad at the top or bottom of the web view?
  
  Reply
Iain Coleman says:

October 20, 2012 at 8:54 pm

I'm not sure how to set the testing flag to false sorry. I tried again with an app that runs both portrait and landscape and all seems to work well – very strange! Ads appear at the bottom and move correctly when the orientation changes. Thanks for such an excellent post and for your help, if you have any ideas about the landscape only issue I would be very grateful!

Reply
franztini says:

October 31, 2012 at 1:51 am

First, Thank you soo much for posting this! I have been struggling trying to get the SAIOSadplugin to work with Cordova 2.0 (have it working great with Phonegap 1.41) and this works and the ad rotates properly between landscape and portrait. In my iphone app that only supports portrait – works like a charm. However my ipad app supports both portrait and landscape and I have an issue.
1. No matter what orientation my device is in, when I click on the ad it opens up in Landscape. So if I am in portrait, the ad displays properly at the bottom, but when it is clicked on the ad is displayed in Landscape. If the device is in Landscape, and the ad is clicked on it displays properly in landscape but when the ad is closed, the app content is 'redrawn' to be in portrait (so there is a black area to the right of the content.
Any thoughts?

Reply
1. admin says:
  
  October 31, 2012 at 3:20 pm
  
  I unfortunately don’t have any experience with ads on the iPad. I might suggest taking a look at the various methods that are in the main view controller file, to see if you can leverage any of them. Many events are exposed that help you deal with orientation changes.
  
  Reply
marco rossetti says:

October 31, 2012 at 9:11 am

Thank you very much for your tutorial !
One simple question: is it possible to set an initial background color in the placeholder?

Reply
1. admin says:
  
  October 31, 2012 at 3:22 pm
  
  I asked myself the same question a while back, I came up empty on Android / AdMob integration, so I wonder if there’s a deeper reason for not allowing this. Or, perhaps it’s possible and I haven’t figured it out yet.
  
  Reply
marco rossetti says:

October 31, 2012 at 3:32 pm

Thanks anyway for the answer

Reply
franztini says:

October 31, 2012 at 5:28 pm

Thanks for the response. I will play around with it and if I can come up with a solution I will let you know.

Reply
Marco says:

November 13, 2012 at 5:37 pm

This is very nice, as a Phonegap/cordova I didn't know that it was that easy to make it work. Otherwise, I see two problems: the ads are opening always in Landscape mode and there's a blank placeholder when the ad is not loaded. I am not really worried about the first one but the second one is important because Apple use to reject that kind of apps 🙁

Reply
1. admin says:
  
  November 14, 2012 at 2:03 pm
  
  Right, that’s as far as I took my example. You could further refine it to check for the presence of an ad, then hide the ad container if an ad is not available.
  
  Reply
Doug says:

December 5, 2012 at 8:21 pm

Here is a fix for the "starting in landscape mode". The code in step 6 assumes portrait so if the iPad is in landscape the adview is off in lala-land somewhere. Enjoy!

adView = [[ADBannerView alloc] initWithFrame:CGRectZero];

CGRect adFrame = adView.frame;

if([UIApplication sharedApplication].statusBarOrientation
== UIInterfaceOrientationPortrait
|| [UIApplication sharedApplication].statusBarOrientation
== UIInterfaceOrientationPortraitUpsideDown) {

adView.currentContentSizeIdentifier =
ADBannerContentSizeIdentifierPortrait;
adFrame.origin.y = self.view.frame.size.height-adView.frame.size.height;

} else {

adView.currentContentSizeIdentifier =
ADBannerContentSizeIdentifierLandscape;
adFrame.size.width = adView.frame.size.width;
adFrame.origin.y = self.view.frame.size.width-adView.frame.size.height;
}

adView.frame = adFrame;
[self.view addSubview:adView];

Reply
Darryl Bayliss says:

December 7, 2012 at 12:03 pm

Hey folks, just giving you a small update/hint to this tutorial.
In the latest version of the Phonegap project (2.2.0 at time of writing) the method name in step 7 is not:
– (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)newInterfaceOrientation duration:(NSTimeInterval)duration
But infact:

– (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{

The issue I had was that the above steps worked, but only when I changed orientation of my app, what you need to do to ensure it works is the following:

1. Copy and paste the body of the method from step 7 into the body of this method (its still in the MainViewController.m file)

(BOOL)shouldAutorotateToInterfaceOrientation(UIInterfaceOrientation)interfaceOrientation

2. Change all the parameter references from newInterfaceOrientation to InterfaceOrientation

3. Test your app!

Hope this helps.

Reply
Robin Bakker says:

March 28, 2013 at 5:28 pm

This doesn't works for me, I don't understand why. it says: "unknown type name 'adView', did you mean 'UIView'?" why does it says this?

Reply
1. admin says:
  
  March 29, 2013 at 6:39 pm
  
  Did you instantiate the adView variable as follows?
  
  ADBannerView *adView;
  
  Your error suggests that maybe you did something like this:
  
  adView *AdBannerView
  
  Reply
Bobby says:

April 13, 2013 at 2:49 pm

Great tutorial. I have one problem. The ad frame is on top of the webview where my app is. Any idea how to fix this? I am using latest Cordova 2.6.0
Thanks again for the great tutorial!

Reply
1. admin says:
  
  April 15, 2013 at 1:17 pm
  
  It’s been a while for me, but I believe you just open up MainController and move the ad code to below where index.html is loaded.
  
  Reply
  1. Brandon says:
    
    April 16, 2013 at 12:17 am
    
    I too have the same question. Unfortunately, index.html is not explicitly loaded in MainController because it's only referenced in config.xml so it's not clear where to move the iAd code. Would be much appreciated if anyone could post a solution.
    
    Reply
    1. admin says:
      
      April 16, 2013 at 1:38 pm
      
      I haven’t touched PhoneGap in a while, so it’s likely I’m way behind on recent developments. What does the MainController look like at this point?
      
      I imagine MainController must be used in some way, to load values in config.xml?
      
      Reply
Francisco says:

April 13, 2013 at 8:57 pm

Hi, Thanks for the explanation. It is great.
I am using phonegap 2.6. The ads show perfectly in the simulator, but when I run it in the iphone then the ads wont show but there is a blank space.
Does any one know what is the problem?
Maybe someone could put a demo in github with iads working correctly in the simulator and on the iphone.
thanks

Reply
1. admin says:
  
  April 15, 2013 at 1:15 pm
  
  I’ve had this happen before. I waited a few hours and the ads started appearing.
  
  Reply
Brandon says:

April 17, 2013 at 1:15 pm

For those having an issue with the ads covering the screen/app content, I blogged my solution here I http://hawkinbj.wordpress.com/2013/04/16/implement-iad-banner-ads-without-covering-uiwebview-in-phonegap/

Reply

33 Comments

Leave a Reply Cancel reply