So, you are about to start developing the next super app, you have everything planned and designed, but there’s still one last thing you haven’t made your mind up about; how to make some earnings out of it! Well, there are two options apart from offering it completely free: Either to make it a paid app where your potentials users should pay to download it, or make it a free app, add some advertisements, and earn a revenue from the ads.
Today’s trends show that it’s more possible for users to download free apps, instead of paid ones. They will pay for an app if it really worths it, or if it’s super famous and have received good rating. So, having that in mind, you decide to make your app a free one, and integrate advertisements in it. To do so, you have various services to pick from in order to display ads, and one of them is the iAd Network provided by Apple. Undoubtably, you have already concluded even from the tutorial’s title that the today’s topic is about how to use iAd advertisements, but before we see all in action let’s see some introductory stuff.
Deciding about the kind of your application (paid or free) before starting the actual implementation is really important, as it affects your work directly. For paid apps, there’s no need to do anything particular, however for free apps it’s necessary to define where the ads will appear, and setup your interface accordingly. Speaking of position, ads should be placed either to the top or the bottom of your view controller. If your app does not contain a tab bar, then ads should be placed at the bottom of the screen, otherwise at the top. Note that if you display ads anywhere else in the view, then the Human Interface Guidelines are breached and Apple will reject it with no second thought.
Besides all the above regarding the positioning of the ads, there are a couple more rules you should have in mind. Firstly, don’t expect ads to be always available. Various network or server-side problems may cause troubles in ad serving, and it’s your duty to take care so no ugly empty space appears when no ads are there for you. It’s considered as a good idea to show another meaningful view when no ads exist. Actually, it’s totally up to your app design whether you should display another view instead of the ad banner or not, and what kind of view this should be.
Also, ad banners should not be obscured by other view controllers all the time. You have to make sure that they will appear in the most viewable view controller, the one that users will spend the most of their time when working with the app, and maximize that way the possibility for your ads to get tapped and earn some money.
Regarding the revenue, both Apple and developers benefit when users tap on advertisements. Actually, the developer’s cut is equal to the 70% percent of the revenue, while the rest 30% is held by Apple as a commission for offering you the iAd Network services. The same split applies to paid apps too.
It’s quite common for sole developers and companies to follow another approach, to create two versions of the same app. The first version, the paid, is the full-featured one. The second version is free, but it doesn’t contain all the features that the paid version ships. That free version, also called Lite version, can have advertisements and beyond the revenue you may earn from them, you can also count on extra revenue if users like the app and buy the paid version. Remember that you should never add advertisements in paid apps. Even if Apple allows that to happen, and I seriously doubt about that, you’ll receive the worst critics and ratings, as users don’t pay to see ads.
In the next sections of the tutorial we’ll implement as always a sample app, and through this you’ll learn how to integrate ads provided by Apple into your projects. If you are new to this, you’ll find out that using ads is a super-easy process. So, keep reading and discover how all this new great stuff works!
App Overview
As always, our tutorial will be based on the creation of a sample app. In the one we will start developing right next, we will see how to integrate iAd advertisements and display ad banners within a few steps. More specifically, we’ll do the following:
- We will add an ad banner at the bottom side of the view. This will be the container in which the ads will be displayed if available. If there are no available ads, then we’ll hide it until we have something to show.
- Generally speaking, a modal full-screen view shows up when tapping on an advertisement, covering everything else behind it. In such cases, any critical or important tasks regarding especially visual updates must be paused or stopped, and get restarted after the ad has been closed. To demonstrate how this can be managed, we’ll use a timer to count the seconds that the user is viewing the default view controller’s view, and a label to display a message containing the timer’s value. When an ad gets tapped, we’ll stop counting, and we’ll restart doing so when it’s closed again.
Also, in this tutorial we are going to use an extra framework, the iAd Framework. Without it, it’s not possible to display and handle iAd advertisements.
The next figure illustrates how the app of this tutorial will look like:
Project Creation
Let’s begin by creating a new project for the sample app. Launch Xcode and in the Welcome window select the respective option, as shown in the next figure:
In the guide that appears, select the Single View Application template, in the Application category under the iOS section:
Click Next, and in the Product Name field set the iAdDemo as the project’s name. Also, make sure that the iPhone option is the selected one in the Devices menu. Leave the rest as it is, and proceed:
In the last step of the guide select a directory to save the project and click Create.
Interface Configuration
Now that we have an empty project on our hands, let’s begin working on the interface of the app. Click on the Main.storyboard file to let Interface Builder appear. Below you are given all the subviews along with their attributes that you should add, so the final outcome of our work in this section is similar to the app figure illustrated previously. Note that you could skip some of the subviews that will be described next if you just want to focus just on the ad banner.
UILabel
- Frame: X=20, Y=60, Width=280, Height=40
- Text: iAd Integration
- Font: Avenir Black, 24.0pt
- Text Alignment: Center
UILabel
- Frame: X=20, Y=108, Width=280, Height=21
- Text: by Appcoda
- Font: Avenir Medium Oblique, 17.0pt
- Text Alignment: Center
- Text Color: Red=255, Green=128, Blue=0
UILabel
- Frame: X=20, Y=360, Width=280, Height=40
- Text: None
- Font: Noteworthy Light, 15.0pt
- Text Alignment: Center
- Text Color: Light Gray
UILabel
- Frame: X=0, Y=518, Width=320, Height=50
- Text: Ad banner will appear here
- Font: Avenir Medium, 14.0pt
- Text Alignment: Center
- Text Color: White
- Background Color: Red=255, Green=128, Blue=0
ADBannerView
- Frame: X=0, Y=518, Width=320, Height=50
After adding all the above subviews and setting their attributes as shown, your interface should look like this:
It’s necessary to create and connect two IBOutlet properties now. The first one regards the ad banner view, while the second one will be connected to the label that contains no text. In this label we’ll display later the time counter value. Open the ViewController.h file, and the next two lines:
@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet ADBannerView *adBanner;
@property (weak, nonatomic) IBOutlet UILabel *lblTimerMessage;
@end
At this point Xcode will issue an error and some warnings. That’s because we haven’t added the iAd framework yet, and we haven’t included the appropriate library on our file. Let’s fix everything and let’s start by adding the framework. On the Project Navigator, click on the iAdDemo project, and then in the General tab.
Next, at the bottom side of the screen, under the Linked Frameworks and Libraries section, click on the plus icon to add the new framework. In the new window that appears, start typing the text: “iAd Framework” and Xcode will immediately suggest it. Select it and then click on the Add button:
Now head back to the ViewController.h file, and import the next library:
#import
With that, Xcode stops displaying any error and warnings. Finally, our class must adopt the ad banner view protocol, so we can access all the necessary delegate methods. Modify the interface header line as follows:
@interface ViewController : UIViewController
As a last step, the two IBOutlet properties must be connected to the appropriate subviews. Open the Main.storyboard file, and connect the adBanner property to the ad banner view, and the lblTimerMessage label to the textless label view.
iAd Integration
By adding the ad banner view to the interface and by also adding the iAd framework into the project, advertisements are already able to be delivered to the app. However, no handling is possible yet, therefore our goal here is to take all that actions that will make the ad banner management feasible.
The iAd framework provides several delegate methods for managing ads. These allow us to know when an ad is about to be shown or it has already been shown, when a failure occurs and no more ads can be served, and finally when the user taps on an ad to view it on full-screen mode or the modal ad view gets dismissed. Besides all that, you should always have in mind that ads are not delivered right away. Therefore, until the first ad is ready to be shown, the ad banner must not be visible. It should also become hidden when the iAd Network stops serving ads for some reason.
Diving into code now, initially we must perform two things: To make our class the delegate of the ad banner view, and secondarily to hide it. Open the ViewController.m file, and go to the viewDidLoad method to add the next couple of lines:
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
// Make self the delegate of the ad banner.
self.adBanner.delegate = self;
// Initially hide the ad banner.
self.adBanner.alpha = 0.0;
}
As you see, we hide the ad banner view simply by setting its alpha value to 0. Later on, when a delegate method will inform us that an ad is ready to be shown, we’ll set that value to 1 again, and to make it more attractive we’ll do so using an animation. Changing the alpha value though is not the only way to hide or show the ad banner. There are many other ways to do that, as for example to change the value of the hidden banner’s property, or initially place the ad banner view out of the visible screen area. What method you’ll finally choose is totally up to you, and to what best suits to your application. For simplicity reasons, I just chose to use the alpha value.
The ADBannerViewDelegate protocol provides five delegate methods in total. Using them, we can manage the ads and ultimately the behavior of our app. Let’s see them one by one, and let’s discuss shortly what each one is about. Note that in the body of every delegate method I’ve intentionally added a NSLog command, so when we run the app later to know which method exactly has been called.
The first method is this:
-(void)bannerViewWillLoadAd:(ADBannerView *)banner{
NSLog(@"Ad Banner will load ad.");
}
It’s easy from the method’s name to conclude that this one is called when a new advertisement is about to be loaded. Note that when this method is called the ad is not yet ready to be displayed.
The second delegate method:
-(void)bannerViewDidLoadAd:(ADBannerView *)banner{
NSLog(@"Ad Banner did load ad.");
}
This one is called after a new ad has been loaded and is ready to be displayed. Later, in this method we’ll add the code needed to make the ad banner view visible again, as we’ll know that there is an ad to show.
The third delegate method:
-(BOOL)bannerViewActionShouldBegin:(ADBannerView *)banner willLeaveApplication:(BOOL)willLeave{
NSLog(@"Ad Banner action is about to begin.");
return YES;
}
This method is called when the user taps on the banner, and the ad is going to be displayed in a full size modal view. When that happens, any visual or critical tasks that regard user should be paused until that modal view gets dismissed. The interesting with this method is the value it returns. When the returned value is YES, then the ad will be shown in a full-screen view indeed. However, if the returned value is NO, then nothing will happen when users tap on the ad.
The fourth delegate method:
-(void)bannerViewActionDidFinish:(ADBannerView *)banner{
NSLog(@"Ad Banner action did finish");
}
This method is called when the full-screen view with the add gets dismissed. It’s very useful, as in here any paused or stopped tasks should be put in action again.
Finally, the fifth delegate method:
-(void)bannerView:(ADBannerView *)banner didFailToReceiveAdWithError:(NSError *)error{
NSLog(@"Unable to show ads. Error: %@", [error localizedDescription]);
}
This method is also very useful and important, as it’s called when no ads are available to be delivered to the app. When it’s called, it’s our duty to hide the ad banner view so no blank space is shown to the user when no ads exist.
As you understand, all these delegate methods make the ad handling a really easy task. Now, as we said before, we must show the ad banner view when an advertisement is ready to be displayed, so modify the bannerViewDidLoadAd: delegate method as shown right next:
-(void)bannerViewDidLoadAd:(ADBannerView *)banner{
NSLog(@"Ad Banner did load ad.");
// Show the ad banner.
[UIView animateWithDuration:0.5 animations:^{
self.adBanner.alpha = 1.0;
}];
}
You see that using an animation we set the alpha value of the ad banner view to 1 again. That animation will result in a fade-in effect.
Lastly, when there are no ads to be displayed we should hide the ad banner view. Go to the bannerView:didFailToReceiveAdWithError: and add the same code as above. This time make the alpha value 0:
-(void)bannerView:(ADBannerView *)banner didFailToReceiveAdWithError:(NSError *)error{
NSLog(@"Unable to show ads. Error: %@", [error localizedDescription]);
// Hide the ad banner.
[UIView animateWithDuration:0.5 animations:^{
self.adBanner.alpha = 0.0;
}];
}
The most important work with the ads have been done. In the next section of the tutorial we’ll see how to use the other delegate methods, but our app is already pretty functional. So, if you want give it a try and wait for the first ad to be shown.
Adding the Counter
The ad banner now works great, and the most important goal, showing and hiding the banner properly, has been achieved. However, this tutorial wouldn’t be complete without having discussed about all the important delegate methods, so in this section we are going to make an interesting addition to the project. We are going to use a timer (a NSTimer object) that will count the seconds the user is seeing the View Controller scene, and using the delegate methods provided by iAd framework we’ll pause counting when an ad is displayed in full-screen mode. After the ad view has been dismissed, the counter will work again.
Let’s get started by declaring three properties that we’ll need for our purpose. The first property is the timer object, the second an integer value that will be used to count the seconds elapsed, and finally the third property is a boolean flag that will indicate whether the counting should be paused or not. In the ViewController.m file, go to the private class section, and add the next properties as shown below:
@interface ViewController ()
@property (nonatomic, strong) NSTimer *timer;
@property (nonatomic) int secondsElapsed;
@property (nonatomic) BOOL pauseTimeCounting;
@end
Now, in the viewDidLoad method let’s do some initializations:
- (void)viewDidLoad
{
[super viewDidLoad];
...
...
// Start the timer.
self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(showTimerMessage) userInfo:nil repeats:YES];
// Set the initial value for the elapsed seconds.
self.secondsElapsed = 0;
}
As you see in the timer object creation, in the selector parameter is given the showTimerMessage method name. This is a private method that does not exist yet, and it will be called by the timer every one second (the interval argument set to 1.0). Of course, we want our timer to work repeatedly, so we set the repeats parameter value to YES.
Xcode is showing a warning now, because it’s unable to find a declaration for the above method. Let’s go to fix it by declaring the method first, and then we’ll define it. Go back to the private class section, and add the next line:
@interface ViewController ()
...
...
-(void)showTimerMessage;
@end
In its definition now, you’ll see in the following code fragment that the code execution flow depends on the pauseTimeCounting flag. If its value is false, then we’ll keep counting and updating the text of the lblTimerMessage. Apparently, when its value is true we won’t count. Notice that before any text update it’s necessary to increase the secondsElapsed property’s value by one. The implementation is really simple, so there you go:
-(void)showTimerMessage{
if (!self.pauseTimeCounting) {
self.secondsElapsed++;
self.lblTimerMessage.text = [NSString stringWithFormat:@"You've been viewing this view for %d seconds", self.secondsElapsed];
}
else{
self.lblTimerMessage.text = @"Paused to show ad...";
}
}
Let’s get to the point now, and let’s see how to use two more iAd delegate methods. The first one we’ll see, is the bannerViewActionShouldBegin:willLeaveApplication: one. As I have already said, this method is called after a user has tapped on an ad, and a full-screen view is about to be shown containing the ad. Of course, it’s necessary the returned value of that method to be set to YES, otherwise no ad will be displayed. What we want when this method is called is quite simple: To tell our app that the time counting should be paused. To do that, we’ll simply change the value of the pauseTimeCounting flag. Let’s see the method:
-(BOOL)bannerViewActionShouldBegin:(ADBannerView *)banner willLeaveApplication:(BOOL)willLeave{
NSLog(@"Ad Banner action is about to begin.");
self.pauseTimeCounting = YES;
return YES;
}
Apart from pausing the counting process, we must also allow it to continue when a full-image view with an ad has been closed. For that purpose, we’ll use the bannerViewActionDidFinish: delegate method. In it, we’ll simply change once again the flag’s value. Here it is:
-(void)bannerViewActionDidFinish:(ADBannerView *)banner{
NSLog(@"Ad Banner action did finish");
self.pauseTimeCounting = NO;
}
That was our last touch! Now, when the ad banner gets tapped the counting will be paused, and it will keep going again once the ad has been dismissed.
Compile and Run the App
At this point, feel free to compile and run the app. You will notice that at the bottom of the screen the ad banner will appear after a while, and the counter’s value is displayed in the message label. Tap on the ad banner and watch the advertisements in full-screen mode. When you go back to the View Controller scene, you see that the time counting wasn’t active while you were viewing ads. If suddenly no ads are being served, don’t worry, that’s normal. Ad delivery may stop from time to time.
As an extra exercise, if you want try to display the ad banner at the top of the view.
Summary
Integrating advertisements into an application is a quite common tactic, and a good way to make some earnings while you give you app for free. To tell the truth, maybe you won’t make a fortune from ads, but if your app acquire big download numbers then you’ll probably have a remarkable revenue. As you saw in this tutorial, there are simple rules regarding the ad banners, and the required code is just a matter of a few lines. So, if you’re still thinking about whether you should add ads on your app and how to do it, this is your chance. Of course, you are recommended and encouraged to go through the official documentation as well. I hope this tutorial becomes helpful to all of you, and as always feel free to share any thoughts or comments with us.
For your reference, you can download the complete Xcode project from here.
