In April 2010 during iOS 4 presentation Steve Jobs announced new advertisement platform – iAd. This platform is intended to allow developers of free apps to earn on their apps showing advertisement. The main idea of iAd is to connect interactivity (using smartphone or tablet) and emotionality of advertisement (JavaScript, HTML5, CSS3, multi-touch). It allows to create absolutely awesome advertisement which looks like apps with video and audio. In addition, iAd ads is opened inside the app and user do not exit his app and can get back anytime he wants.
Below is the guide on how to add iAd banner into iPhone app. Guide is based on iAd Programming Guide and WWDC 2010 video.
Add iAd Banner to iPhone App
The first thing you need to do is to add iAd.framework in your Xcode project which is contained in iOS 4 SDK. Also do not forget to add #import <iAd/iAD.h>. Developers can choose between two banners: 320×50 px for portrait and 480×32 px for landscape. The base of banner is ADBannerView, which is subclass of UIView. So the only thing you have to do is to add this view in your control elements hierarchy (you can do this programmatically or using Interface Builder).
Apple recommends to put banner at the bottom or at the top of the window and do not place it on any moving elements like ScrollView or TableView as far as that will decrease shows of banner (and your revenue respectively) and will make it more difficult for user to tap on the ads.
Let’s create a new project in Xcode using View-based Application template and add a banner into it. Name of the app – iAdEx. We are going to edit iAdExViewController.h
#import <UIKit/UIKit.h>;
#import <iAd/iAd.h>;
@interface iAdExViewController : UIViewController <ADBannerViewDelegate>
{
ADBannerView *adView;
BOOL bannerIsVisible;
}
@property (nonatomic,assign) BOOL bannerIsVisible;
@end
and modify viewDidLoad method in iAdExViewController.m
- (void)viewDidLoad {
adView = [[ADBannerView alloc] initWithFrame:CGRectZero];
adView.frame = CGRectOffset(adView.frame, 0, -50);
adView.requiredContentSizeIdentifiers = [NSSet setWithObject:ADBannerContentSizeIdentifier320x50];
adView.currentContentSizeIdentifier = ADBannerContentSizeIdentifier320x50;
[self.view addSubview:adView];
adView.delegate=self;
self.bannerIsVisible=NO;
[super viewDidLoad];
}
Let’s talk about requiredContentSizeIdentifiers and currentContentSizeIdentifier properties. In the first one you define all types of banners you are going to use. And the second property defines which type of banner you are going to use at the present moment.
Connection issues
Banners are downloaded from the network. What if we have no network connection right now? Or Apple has any issues with ads server? Our ADBannerView will be empty is these cases. It doesn’t look very nice and wastes space on the screen. Apple recommends to do it in this way: when there is no banner for any reason remove it from the screen; when banner is received – show it again.
We have the ADBannerViewDelegate in our class and it can receive messages from banner – bannerViewDidLoadAd (when banner is loaded successfully) and didFailToReceiveAdWithError (when any problems occured). Let’s implement these messages:
- (void)bannerViewDidLoadAd:(ADBannerView *)banner
{
if (!self.bannerIsVisible)
{
[UIView beginAnimations:@"animateAdBannerOn" context:NULL];
// banner is invisible now and moved out of the screen on 50 px
banner.frame = CGRectOffset(banner.frame, 0, 50);
[UIView commitAnimations];
self.bannerIsVisible = YES;
}
}
- (void)bannerView:(ADBannerView *)banner didFailToReceiveAdWithError:(NSError *)error
{
if (self.bannerIsVisible)
{
[UIView beginAnimations:@"animateAdBannerOff" context:NULL];
// banner is visible and we move it out of the screen, due to connection issue
banner.frame = CGRectOffset(banner.frame, 0, -50);
[UIView commitAnimations];
self.bannerIsVisible = NO;
}
}
It’s time to launch the app and see what we have now:
Tap the banner
And that’s it – we’ve done it in accordance with Apple’s recommendations. When we launch the app we see the banner. If we tap it, then full view of advertisement is shown. But we still have one issue…
Stop & Resume your app
In real app we should stop any application’s activity such as video, audio playback or pause game. In order to solve this task we will create two methods bannerViewActionShouldBegin (when full screen ad is shown) and bannerViewActionDidFinish (when we close ads).
- (BOOL)bannerViewActionShouldBegin:(ADBannerView *)banner willLeaveApplication:(BOOL)willLeave
{
NSLog(@"Banner view is beginning an ad action");
BOOL shouldExecuteAction = YES;
if (!willLeave && shouldExecuteAction)
{
// stop all interactive processes in the app
// [video pause];
// [audio pause];
}
return shouldExecuteAction;
}
- (void)bannerViewActionDidFinish:(ADBannerView *)banner
{
// resume everything you've stopped
// [video resume];
// [audio resume];
}
Change Orientation of iAd
What else should we do? We need to make banner change it’s orientation in accordance with iPhone position. First of all we need to change the line where we define types of banners which we will use:
- (void)viewDidLoad {
...
adView.requiredContentSizeIdentifiers = [NSSet setWithObjects:ADBannerContentSizeIdentifier320x50,ADBannerContentSizeIdentifier480x32,nil];
...
}
and here are methods for changing orientation:
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationPortrait|UIInterfaceOrientationPortrait);
}
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
if (UIInterfaceOrientationIsLandscape(toInterfaceOrientation))
adView.currentContentSizeIdentifier = ADBannerContentSizeIdentifier480x32;
else
adView.currentContentSizeIdentifier = ADBannerContentSizeIdentifier320x50;
}
And here is how it look in a landscape
When device changes orientation we change currentContentSizeIdentifier property of ADBannerView. Now we can see banners in landscape mode too. There is still 50 px offset, but it’s easy to fix.
Apple developers also recommend to write object.delegate=nil; line before deallocating ADBannerView object. In our example it will look like:
- (void)dealloc {
adView.delegate=nil;
[adView release];
[super dealloc];
}
Now we have finished with programming part. Good luck with Apple iAd!
[...] How to Add iAd Banner in iPhone App [...]
[...] iAd Resource Share [...]
cool, but how to implement into one existing app?
I suppose it’s the same as adding into an empty app. You just need to place AdBannerView into your screens
I have tried adding your code to my project which uses an MKMapView. The problem seems to be in making the connections in IB. Is it possible to add the ADBannerView when you already have an MKMapView?
Great info man, Thanks!
I added the offset corrections for those interested, i think you always need it :-)
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
if (UIInterfaceOrientationIsLandscape(toInterfaceOrientation)){
adView.currentContentSizeIdentifier = ADBannerContentSizeIdentifier480x32;
adView.frame = CGRectOffset(adView.frame, 0, -18);
}
else {
adView.currentContentSizeIdentifier = ADBannerContentSizeIdentifier320x50;
adView.frame = CGRectOffset(adView.frame, 0, +18);
}
}
Thanks Tom!
[...] Reference: How to Add iAd Banner in iPhone App [...]
[...] http://bees4honey.com/blog/tutorial/how-to-add-iad-banner-in-iphoneipad-app/ [...]
I tried adding this to my app and get these 2 errors:
Undefined symbols:
“_CGRectZero”, referenced from:
_CGRectZero$non_lazy_ptr in MainViewController.o
(maybe you meant: _CGRectZero$non_lazy_ptr)
“_CGRectOffset”, referenced from:
-[MainViewController bannerView:didFailToReceiveAdWithError:] in MainViewController.o
-[MainViewController bannerViewDidLoadAd:] in MainViewController.o
-[MainViewController viewDidLoad] in MainViewController.o
ld: symbol(s) not found
Does anybody know why I would be getting this?
Thanks! :D
wooowww very nice work, congrats!
There seems to be a typo in the first block of code, I believe it should read:
@property (nonatomic,retain) IBOutlet ADBannerView *adView;
@property BOOL bannerIsVisible;
Also, in the .m file I needed to synthesize bannerIsVisible.
Thanks for the tutorial!
Hi guys, aparently it works otherwise…
My iad disappear and i cant click it… is this normal?
thanks for the tutorial and rest of the comments on corrections.
i’ve added the codes to the .h and .m file.
i start off with WiFi and cel OFF, and banner doesn’t show.
when i turn on the WiFi ON, the banner drops down from the top and shows “Test Advertisement”.
when i turn OFF the wifi, the banner does not disappear. it stays with screen “Test Advertisement”. any idea? or is this normal?
How do I place the banner at the bottom?
[...] How to Add iAd Banner in iPhone iPad App [...]
Thanks for the code – it works in my app almost perfectly. The problem is that when I test it on iPhone OS 3.2 it crashes. I weakened the iAd framework and set Deployment Target to 3.0 but it still doesn’t work. I get an error:
“*** Terminating app due to uncaught exception ‘NSInvalidUnarchiveOperationException’, reason: ‘*** -[NSKeyedUnarchiver decodeObjectForKey:]: cannot decode object of class (ADBannerView)’”
thanks for any ideas :)
Thanks for the tutorial. I have an issue where when the test ad is clicked the displayed ad is in Portrait orientation even though my app is Landscape and the ad view is displayed Landscape. I also get the following debug message:
The view controller returned NO from -shouldAutorotateToInterfaceOrientation: for all interface orientations. It should support at least one orientation.
Hello,
I am following above example and getting below error :-
‘ADBannerContentSizeIdentifier320x50′ undeclared (first use in this function)
Thx
Mitesh Khatri
Thanks for the wonderful tutorial!
Awesome! very simple and elegant. It just worked as described. Thanks a lot.
[...] Let’s create a new project in Xcode using View-based Application template and add a banner into it. Name of the app – iAdEx. We are going to edit iAdExViewController.h ? [...]
Fantastic tutorial, hits the nail on the head without adding unnecessary bulk!!!
it is good boss and if i wanna to add some ad into it instead of apples recommended what should i do . i am not getting how to do that
[...] Let’s create a new project in Xcode using View-based Application template and add a banner into it. Name of the app – iAdEx. We are going to edit iAdExViewController.h ? [...]
Very nice article, however I don’t feel capable of adding it into my app. Any one here willing to give it a try? Please contact me personally and we can arrange something.
Thanks for your help!
Hi ! thanks a lot for the tutorial
When i run It my banner is always empty
Please help
[...] How to Add iAd Banner in iPhone iPad App [...]
Hi, I am new to iPhone developement and I am wondering if it’s legal to use the code from this website on my application. I assume it is, but I don’t want to take any chances. Thanks!
Good tutorial. Thanks a lot. Its much easier than the instructions left by Apple as usual.
Thanks for this great tutorial, I’ll be using it to do iAd on my app. What about using iAd with a tableview?
Thank you! I’ve followed multiple tutorials but this really did the trick! thanks so much
Hi,
I am trying above code. I didn’t get test advertisement on iPod 4G . Is their any other setting needed for 4G.
And after any other code need to write for displaying iadd ?
Having a bit of a problem. I seem to get SIGABRT with this code.. for some reason either my phone or version just doesn’t like this.
Don’t forget to synthesize bannerIsVisible!!! Other than that, great tutorial. Thank you.
And I thought I was the sensible one. Thkans for setting me straight.
can you help in this.my problem is written here
http://stackoverflow.com/questions/5947552/how-to-display-test-iad-banner-in-the-simulator
i used your code but nothing i didnt get any test advertisement i dont y it was gappen
Use ADBannerContentSizeIdentifierPortrait instead of ADBannerContentSizeIdentifier320x50 for ios4+
[...] I have followed this tutorial and added iAd to my app: http://bees4honey.com/blog/tutorial/how-to-add-iad-banner-in-iphoneipad-app/ [...]
/Users/possibilliontech/Desktop/Ziddu100711/Ziddu/ZidduViewController.m:68: warning: ‘ADBannerContentSizeIdentifier320x50′ is deprecated (declared at /Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator4.3.sdk/System/Library/Frameworks/iAd.framework/Headers/ADBannerView.h:113)
I am getting 2 warnings like above. Can any one help me?
This link is too good, i like this site..
Tutorial is not structured properly. Can you make the sample project available for download ?
Thanks in advance
Thanks for this tutorial…
[...] with MobClix. I searched around for a bit and came up with some excellent sample code provided by bees4honey. I followed their tutorial and after fixing a few deprecation errors I would like to share with you [...]
is iAdbanner is used in Xcode 3.2.6.. plz give guidance for me…
Thanks a lot, this was really useful!