iAds Implementation Tutorial- Using iAd framework in iPhone/iPad SDK

I recently had to implement iAds, and the problem I faced was not being able to find a tutorial, that explained everything pertaining to iAds. Some were using deprecated methods, some would not have the example source code, blah blah. No hard feelings though.

So I ended up studying it from a multitude of resources, and wasted some of my time to find the out how it worked. So I’d thought of writing a tutorial that would explain iAds and implement it too according to the latest framework changes. Let’s see how to integrate iAds into our iOS project.

But, before that, I will give a brief description of how iAds work in iOS. iAd framework was introduced in Apple in iOS 4.0.

This is what Apple says about the iAd framework:

“The iAd advertising platform provides developers new opportunities to generate revenue and promote their apps. You add banner or full-screen advertisements to your application’s user interface; Apple sells advertising space and delivers ads to fill these spaces. You earn revenue when users view or interact with ads displayed by your application.”

Thus all we need to do is add space for iAds in the user interface of our application, and implement the necessary delegate methods, made incumbent upon, by the iAd framework, and the framework will do the rest of the job, by downloading the ads from the iAd network and displaying them to the user.

Another important thing to note in the docs is this:

“Before you start adding advertising support to your application, you must first agree to the iAd Network agreement. Further, you must explicitly enable iAd for each application in iTunes Connect. As a part of the iAd Network, you control the kinds of ads that are delivered to your application.”

Also, in iPhone, we use ADBannerView class to display ads, which are a fixed size, the size being 320*50 in portrait mode, and 480*32 in landscape mode. For iPad, in case of ADBannerView, the size is 768*66 in portrait mode, and 1024*66 in landscape mode.

In iPad, Apple introduced full screen advertisements, which can be implemented using ADInterstitialAd class.

Ok, so enough of talk let’s get started with the project. I will explain the project from scratch, so if you already know the basics of iPhone programming, just hop on to the Heading “The iAds implementation“.

Let’s get it Started

I thought of writing the demo application using Xcode 4.3 and iOS 5.0, with ARC, but then I thought that many of us(including me!) sometimes have to use Xcode 4.0/4.1 for some of the projects, and so I finally ended up writing this tutorial using Xcode 4.1(and the Memory Management stuff).

We open our Xcode, and create a new View Based Application. We will name it iAdDemo. We will now open our  iAdDemoViewController.xib, and add a new view onto our default view, such that it becomes a subview of the default view. We then add a table view and a navigation bar onto the view we just added, and just to distinguish between our view, we will give a label of Custom View to the view we just added:

We also make outlets for our table view and the custom view we added. Just to mention, the reason why we added a custom view is that we will be adding the AdBannerView (the view that will show an iAd to our main view), and thus we will have to make room for it, we can do that easily by placing all our contents in a separate view, and so a custom view.

Adding the iAd Framework

Now, we add the iAdFramework, into our project. For this, we click on Build Phases, and click on the arrow next to “Link Binary with Libraries“, and click on the “+” button.

We will get a list of frameworks, from where we will select the iAd.framework, and click Add.

We will now see iAd.framework inside our project. We will then just drag it into our “Frameworks folder“.

And this is how we add a framework to an iOS project in Xcode 4.0 and above!

We will first quickly add some data to our table view, implementing the necessary methods. I won’t go into much detail of this, and go over it quickly. We will first add an NSMutableArray instance variable, and thus our iAdViewController.h   file will look like this:

#import
#import 
 
@interface iAdDemoViewController : UIViewController {
    UIView *contentView;
    UITableView *myTableView;
    NSMutableArray *data;
}
@property (nonatomic, retain) IBOutlet UIView *contentView;
@property (nonatomic, retain) IBOutlet UITableView *myTableView;
@property (nonatomic, retain) NSMutableArray *data;
 
@end

We will release our array in dealloc, and then quickly add this code to our iAdDemoViewController.m file.

#pragma mark - Private Methods
- (void) createDatasource
{
    data = [[NSMutableArray alloc] initWithObjects:@"Ford Mustang", @"Jaguar C-X16",
             @"Pagani Huayra", @"Bugatti Galibier", @"Aston Martin's",
             @"V12 Zagato", @"Alfa Romeo 4C", @"McLaren", @"Mercedes-Benz SL-Class",
             @"BMW X1", @"Ford Tuarus", @"Lamborghini Aventador", nil];
}
#pragma mark - UITableViewDelegate & Datasource
 
- (NSUInteger) tableView: (UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.data.count;
}
 
- (NSUInteger) numberOfSectionsInTableView: (UITableView *) tableView
{
    return 1;
}
 
-(UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *myIdentifier = @"myIdentifier";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:myIdentifier];
    if(cell == nil)
    {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:myIdentifier] autorelease];
    }
    cell.textLabel.text = [self.data objectAtIndex:indexPath.row];
    cell.textLabel.textColor = [UIColor colorWithRed:72.0/255.0 green:79.0/255.0 blue:255.0/255.0 alpha:1.0];
 
    return cell;
}

Here, we are just creating and displaying a table view, containing  a list of cars. Also, as we are using a method named createDatasource, we will declare it just above the @implementation directive:

@interface iAdDemoViewController(Private)
- (void) createDatasource;
@end

We build and run our application, and see a table view with out favorite cars.

The iAds Implementation

We open our iAdsDemoViewController.h file and add import the iAds framework. We will then add an instance variable:

 ADBannerView *adBannerView;

We will also create a property for our adBannerView, synthesize it, and release it in our dealloc. In order to implement iAds, we need to implement some ADBannerViewDelegate methods. So we will first conform our class to the ADBannerViewDelegate protocol. We will now add this code in our viewDidLoad method:

    [self createAdBannerView];
    [self.view addSubview:self.adBannerView];

We will add this method:

- (void) createAdBannerView
{
    adBannerView = [[ADBannerView alloc] initWithFrame:CGRectZero];
    CGRect bannerFrame = self.adBannerView.frame;
    bannerFrame.origin.y = self.view.frame.size.height;
    self.adBannerView.frame = bannerFrame;
 
    self.adBannerView.delegate = self;
    self.adBannerView.requiredContentSizeIdentifiers = [NSSet setWithObjects:ADBannerContentSizeIdentifierPortrait, ADBannerContentSizeIdentifierLandscape, nil];
}

We also implement the ADBannerViewDelegate methods:

#pragma mark - ADBannerViewDelegate
 
- (void)bannerViewDidLoadAd:(ADBannerView *)banner
{
    [self adjustBannerView];
}
 
- (void)bannerView:(ADBannerView *)banner didFailToReceiveAdWithError:(NSError *)error
{
    [self adjustBannerView];
}
 
- (BOOL)bannerViewActionShouldBegin:(ADBannerView *)banner willLeaveApplication:(BOOL)willLeave
{
    return YES;
}
 
- (void)bannerViewActionDidFinish:(ADBannerView *)banner
{
}

We will also write this method, that we will discuss about shortly:

- (void) adjustBannerView
{
    CGRect contentViewFrame = self.view.bounds;
    CGRect adBannerFrame = self.adBannerView.frame;
 
    if([self.adBannerView isBannerLoaded])
    {
        CGSize bannerSize = [ADBannerView sizeFromBannerContentSizeIdentifier:self.adBannerView.currentContentSizeIdentifier];
        contentViewFrame.size.height = contentViewFrame.size.height - bannerSize.height;
        adBannerFrame.origin.y = contentViewFrame.size.height;
    }
    else
    {
        adBannerFrame.origin.y = contentViewFrame.size.height;
    }
    [UIView animateWithDuration:0.5 animations:^{
        self.adBannerView.frame = adBannerFrame;
        self.contentView.frame = contentViewFrame;
    }];
}

So let’s see how we create our adBannerView.

    adBannerView = [[ADBannerView alloc] initWithFrame:CGRectZero];
    CGRect bannerFrame = self.adBannerView.frame;
    bannerFrame.origin.y = self.view.frame.size.height;
    self.adBannerView.frame = bannerFrame;
    self.adBannerView.delegate = self;
    self.adBannerView.requiredContentSizeIdentifiers = [NSSet setWithObjects:ADBannerContentSizeIdentifierPortrait, ADBannerContentSizeIdentifierLandscape, nil];

We first initialize our adBannerView with a CGRectZero. Now, we plan to show our ad at the bottom of our application. So we give the origin of our adBannerView as the height of our contentView, which is 480 pixels in portrait, and 320 pixels in landscape. Thus initially, our adBannerView will be hidden below the screen.

We will have to implement some delegate methods for adBannerView to work, so, we will assign the delegate as self.

And finally, we set the property of adBannerView, requiredContentSizeIdentifiers. It is a set of identifiers for the sizes of advertisements that the banner view can display.

What is the need of this right? Actually, Apple fetches ads for our application from the iAd network, that will have an inventory of ads. There, ads are available for both orientations. So, if we are just supporting a portrait mode, we can just specify ADBannerContentSizeIdentifierPortrait, so that the ADBannerView will download ads meant only for the portrait orientation; though mentioning both won’t do any harm to us. This would make more sense, if in future, Apple takes out, say iPhone 5, with a larger screen display! Then, they can probably chip in another identifier for that screen size! So, now, we have created a banner view, and added it to our view, and currently it is offscreen.

Let’s look at each of the ADBannerViewDelegate callbacks:

• bannerViewDidLoadAd: Gets called every time Apple downloads an add from the iAd network, and it is available for the ADBannerView to display. At that time, we call the method, adjustBannerView.

There is a reason why we have put the adjustBannerView method. Apple recommends that we shall display an ADBannerView only when there is an add to display. Whenever there is no add to display, be it no network connection, or iAd network not responding, or whatever, we need to hide the ADBannerView and take it offscreen again.

And, again, whenever there is an ad to display, we pull out the ADBannerView to display the ad.

We first check if whether the banner view has downloaded an advertisement from the isBannerLoaded flag. If it has, we then calculate the size of our banner view according to the currentContentSizeIdentifier.

There is a method to get the banner size from the contentSizeIdentifier, which is sizeFromBannerContentSizeIdentifier. We then change the height of our contentView according to our banner view size, and make room for the iAd.

And if there is no ad downloaded by the adBannerView, we just change the height of the contentView to cover the whole screen, hence making the ADBannerView offscreen again.

And finally we animate the frames of the contentView and adBannerView, inside an animation block, so that the appearance and disappearance of our iAd happens in an animated way.

But where are we setting the currentContentSizeIdentifier right? We will be setting it in our shouldAutorotateToInterfaceOrientation: method:

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    if(UIInterfaceOrientationIsPortrait(interfaceOrientation))
        self.adBannerView.currentContentSizeIdentifier = ADBannerContentSizeIdentifierPortrait;
    else
        self.adBannerView.currentContentSizeIdentifier = ADBannerContentSizeIdentifierLandscape;
    return YES;
}

Beware not to use ADBannerContentSizeIdentifier320x50 or ADBannerContentSizeIdentifier480x32, because both are deprecated.

- (BOOL)bannerViewActionShouldBegin:(ADBannerView *)banner willLeaveApplication:(BOOL)willLeave
{
    //Check internet connecction here
    if(internetNotAvailable)
    {
        UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"No internet." message:@"Please make sure an internet connection is available." delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];
        [alert show];
        [alert release];
        return NO;
    }
    return YES;
}

Give me the Code

As usual, you can grab the sample code for the tutorial: iAdsImplementationDemo.

And don’t forget to drop in you feedback. See you in the next tutorial. Till then, Happy Coding