Integrate iAd into iPhone App

Integrate iAd into iPhone App

Integrate iAD to iPhone App Overview

iAd is Apple’s mobile advertising platform, that allows developers to directly embed advertisements into their iOS applications. The process relies on developers including a dedicated component, called an iAd banner view, in each place within their apps where they want to show advertisements.

There’s a catch, though. Using this component directly effectively limits your iphone app to be deployed only on devices that have an operating system version greater than 4.0. While this is not a problem for users that keep their devices up to date, there are still owners of older devices out there, who choose to keep the iphone OS version they already have, for reasons of speed and convenience, as only newer devices fully benefit from the new iPhone OS’ functionality.

But there is a way to integrate the iAd platform in your iphone app and still have the app run on older OS versions. Although the actual ads are not supported and will not appear, the app will run exactly the same in every other aspect, on both old and new iOS versions.

Integrating iAd into iPhone App

As stated above, there are, therefore, two ways to integrate the iAd platform in your iphone app: a straightforward way, that restricts your app to run only on iOS versions 4.0 and greater and a less direct way, that allows your app to be deployed and run on lower iOS versions without showing ads.

This Integrate iAd into iPhone App tutorial will present each of these two methods, leaving you, the developer, to decide which one is better for your particular app, according to your target market and the level of difficulty you are comfortable with in your code.

The straightforward way of Integrating iAd into iPhone App

I’m going to create an iphone app that demonstrates how easy it is to add an iAd banner view to an application that can only be run on iOS 4.0 and above. Just open XCode and reproduce the following steps:

1. Create a new project, as a Window-based Application.

2. Right-Click the project’s name from under the Groups and Files section on the left and choose Get Info.

Make sure that the iOS Deployment Target field is set to a version greater than iOS 4.0

3. Add a new UIViewController by right-clicking the Classes group and going to Add -> New File and choosing UIViewController subclass.

Also, check With XIB for user interface.

Give the file a name (MainViewController in this case) and press Finish.

This is the main view controller of the app, that will contain the iAd banner view.

4. Before adding the actual iAd view, the project has to include the necessary iAd framework, by right-clicking the Frameworks group and choosing Add -> Existing Frameworks -> iAd Framework.

5. Open MainViewController.xib and double click the View from the central hierarchy panel.

Add a Label to this view from the Library panel on the left, by dragging it onto its surface. Put this label 50 pixels down from the top of the view and make it 320 x 410 pixels in size, by selecting it, choosing the Label Size tab in the right properties panel and inputting the appropriate values.

Then, go to the first tab of the same panel, the Label Attributes tab and set the text to anything you want (in my test app, I put “iAd Test Project”), the Alignment to Center and the Background to any color other than the background, so that it may easily be noticed.

Next, add an Ad Banner View on top of your label. Just click and drag it from the panel on the left. This will be the actual advertising display view, with a fixed size of 320 x 50 pixels. Check he Hidden checkbox, as, initially, not showing any ads, the banner will not appear visible.

6. All controls that you want to be able to modify while the app is running must have corresponding outlets in code. An outlet is a link between a component placed on a view in Interface Builder and a property defined in the code; this link ensures that each modification performed on the property is directly reflected in the visual component’s behavior, appearance and position.

In order to create these links, one must first create the actual properties. So, open the file MainViewController.h and define a label and a iAd banner view, first as instance variables, then as outlet properties. Don’t forget to import the iAd header, so that the system recognizes its class. This is how the file should look like in the end:

#import #import @interface MainViewController : UIViewController { UILabel *mainLabel; ADBannerView *adBanner; } @property (nonatomic, retain) IBOutlet UILabel *mainLabel; @property (nonatomic, retain) IBOutlet ADBannerView *adBanner; @end

The properties are defined as nonatomic and retain to signal the system not to generate thread-safe code for them, as they’ll be updated only from the main thread and to persist in memory the values assigned to them, as per the framework’s memory management rules.

The IBOutlet specifier signal the fact that the property holds a component instance that is defined on the interface and acts as this component’s representation in code.

7. Properties defined this way must be synthesized in the implementation file (MainViewController.m). This process creates the inner structure of getters and setters for the backing instance variables and is performed by simply specifying the properties after a @synthesize clause:

@synthesize mainLabel, adBanner;

8. What needs to be done next is to have the ViewController implement the ADBannerViewDelegate. This protocol allows the application to detect when new advertisements are shown and when errors occur, either due to Internet connectivity problems, or simply because ads are not currently available. This detection is important because, as per Apple’s published instructions, the ad banner should not appear on the interface when it doesn’t show any ads.

In order for MainViewController to implement the protocol, one must addat the end of the interface declaration, in the .h file, changing it to:

@interface MainViewController : UIViewController {

9. Now, the outlets defined in code must be linked to their corresponding interface components: in the Interface Builder’s central hierarchy panel, right-click File’s Owner and drag straight lines from the circles to the right of the Outlets names to the actual corresponding components on the view, thus completing their association.

Also, the banner view’s delegate should be set: right-click the banner view and drag a straight line from the circle next to the delegate to File’s Owner in the central hierarchy panel. This tells the banner that the MainViewController, the file’s owner in this case, implements the ADBannerViewDelegate protocol and will receive appropriate notifications when the banner loads an ad or when it fails to do so because of an error or ad unavailability.

After these associations are complete, save the modifications from the File menu, or by pressing Command+S.

10. With all the components in place, it’s time to implement the ADBannerViewDelegate’s methods, in order to reveal or hide the banner view, according to whether it shows an ad or not.

Go to MainViewController.m and add the following code after synthesizing the properties:
- (void)bannerViewDidLoadAd:(ADBannerView *)banner { adBanner.hidden = NO; } - (void)bannerView:(ADBannerView *)banner didFailToReceiveAdWithError:(NSError *)error { adBanner.hidden = YES; }

As you can see, the actions performed to integrate iAd to iPhone app are straightforward: the banner is shown when a new ad is loaded and is hidden when the banner fails to receive an ad.

11. Finally, it’s time to test the iphone application and see how it works. The main view controller must be placed on the screen and displayed. First, open the MainWindow.xib file from the Resources group and drag a View Controller onto the central hierarchy panel. Click on the newly added controller and in the properties panel on the right, navigate to the last tab (Class Identity), type MainViewController in the text field next to the text Class and press Enter.

Go to the application’s delegate header file (iAdTestAppDelegate.h in this case) and import the header file of the main view controller:

#import "MainViewController.h"

Declare an instance variable

MainViewController *mainController;

and an outlet property

@property (nonatomic, retain) IBOutlet MainViewController *mainController;

Just as before, in the main view controller, an outlet property will link the MainViewController instance defined here to one defined in the Interface Builder file.

Don’t forget to synthesize the property in the implementation (.m) delegate file, then, going back to the main window’s interface (.xib) file, right-click the name of the application’s delegate in the central hierarchy panel. Drag a line between the circle next to the main view controller property’s name (mainController) and the View Controller element that you dragged earlier on the panel. Save the file.

Then, in the delegate implementation file’s application: didFinishLaunchingWithOptions method, add the main view controller’s view to the window. The method should now look like this:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [window addSubview: mainController.view]; [self.window makeKeyAndVisible]; return YES; }

All there is left to do is run the iphone app by pressing Command+Enter and seing the ad banner display the test ad in the Simulator:

I hope this tutorial on how Integrate iAd into iPhone App could help you, and if you have another great tips, do not hesitate to share with us.