{"id":169,"date":"2010-12-04T04:31:55","date_gmt":"2010-12-04T08:31:55","guid":{"rendered":"httpss:\/\/www.powenko.com\/blog\/?p=169"},"modified":"2010-12-04T04:32:59","modified_gmt":"2010-12-04T08:32:59","slug":"iphone-%e5%9c%a8%e4%bd%a0%e7%9a%84%e6%87%89%e7%94%a8%e7%a8%8b%e5%bc%8f%e4%b8%8a%e9%9d%a2%e5%8a%a0%e4%b8%8aiad","status":"publish","type":"post","link":"https:\/\/www.powenko.com\/wordpress\/?p=169","title":{"rendered":"iPhone, \u5728\u4f60\u7684\u61c9\u7528\u7a0b\u5f0f\u4e0a\u9762\u52a0\u4e0aiAd"},"content":{"rendered":"

\u5728\u4f60\u7684\u61c9\u7528\u7a0b\u5f0f\u4e0a\u9762\u52a0\u4e0aiAd<\/span><\/h2>\n
\n

In April 2010 during iOS 4 presentation Steve Jobs\u00a0announced\u00a0new advertisement platform \u2013 <\/strong>iAd<\/strong>.<\/strong> This platform is intended to allow developers of\u00a0free apps<\/strong> to earn on their apps showing advertisement. The main idea of iAd is to connect\u00a0interactivity<\/strong>(using smartphone or tablet)\u00a0and emotionality<\/strong> of advertisement (JavaScript, HTML5, CSS3,\u00a0multi-touch). It allows to create absolutely\u00a0awesome advertisement<\/strong> 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.<\/p>\n

Below is the guide on\u00a0how to add iAd banner into iPhone app.<\/strong> Guide is based on iAd Programming Guide and WWDC 2010 video.<\/p>\n

Add iAd Banner to iPhone App<\/h2>\n

The first thing you need to do is to add\u00a0iAd.framework<\/em><\/strong> in your\u00a0Xcode<\/em> project which is contained in\u00a0iOS 4 SDK<\/em>. Also do not forget to add\u00a0#import <iAd\/iAD.h><\/em><\/strong>. Developers can choose between two banners:\u00a0320\u00d750<\/strong> px for portrait<\/em> and\u00a0480\u00d732<\/strong> px for landscape<\/em>. The base of banner is\u00a0ADBannerView<\/em><\/strong>, which is subclass of\u00a0UIView<\/em><\/strong>. So the only thing you have to do is to add this view in your control elements\u00a0hierarchy (you can do this programmatically or using Interface Builder).<\/p>\n

\"iOS<\/a><\/p>\n

Apple recommends to put banner at the bottom or at the top of the window and\u00a0do not place it on<\/strong> any moving elements like\u00a0ScrollView<\/em><\/strong> or\u00a0TableView<\/em><\/strong> 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.<\/p>\n

Let\u2019s create a new project in\u00a0Xcode<\/em> using View-based Application template and add a banner into it. Name of the app \u2013\u00a0iAdEx<\/strong>. We are going to edit\u00a0iAdExViewController.h<\/em><\/strong><\/p>\n

\n
\n
?<\/a><\/span><\/div>\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n<\/td>\n
\n
\n
#import <UIKit\/UIKit.h>;<\/code><\/div>\n
#import <iAd\/iAd.h>;<\/code><\/div>\n
@interface<\/code> iAdExViewController : UIViewController <ADBannerViewDelegate><\/code><\/div>\n
{<\/code><\/div>\n
<\/code>ADBannerView *adView;<\/code><\/div>\n
<\/code>BOOL<\/code> bannerIsVisible;<\/code><\/div>\n
}<\/code><\/div>\n
@property<\/code> (<\/code>nonatomic<\/code>,assign) <\/code>BOOL<\/code> bannerIsVisible;<\/code><\/div>\n
@end<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

and modify\u00a0viewDidLoad<\/em><\/strong> method in\u00a0iAdExViewController.m<\/em><\/strong><\/p>\n

\n
\n
?<\/a><\/span><\/div>\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n<\/td>\n
\n
\n
- (<\/code>void<\/code>)viewDidLoad {<\/code><\/div>\n
<\/code>adView = [[ADBannerView alloc] initWithFrame:CGRectZero];<\/code><\/div>\n
<\/code>adView.frame = CGRectOffset(adView.frame, 0, -50);<\/code><\/div>\n
<\/code>adView.requiredContentSizeIdentifiers = [<\/code>NSSet<\/code> setWithObject:ADBannerContentSizeIdentifier320x50];<\/code><\/div>\n
<\/code>adView.currentContentSizeIdentifier = ADBannerContentSizeIdentifier320x50;<\/code><\/div>\n
<\/code>[<\/code>self<\/code>.view addSubview:adView];<\/code><\/div>\n
<\/code>adView.delegate=<\/code>self<\/code>;<\/code><\/div>\n
<\/code>self<\/code>.bannerIsVisible=<\/code>NO<\/code>;<\/code><\/div>\n
<\/code>[<\/code>super<\/code> viewDidLoad];<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Let\u2019s talk about\u00a0requiredContentSizeIdentifiers<\/strong><\/em> and\u00a0currentContentSizeIdentifier<\/strong><\/em><\/em>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.<\/p>\n

Connection issues<\/h2>\n

Banners are downloaded from the network. What if we have no network connection right now? Or Apple has any issues with ads server? Our\u00a0ADBannerView<\/em><\/strong> will be empty<\/strong> is these cases. It doesn\u2019t look very nice and wastes space on the screen.\u00a0Apple recommends<\/strong> to do it in this way: when there is no banner for any reason remove it from the screen; when banner is received \u2013 show it again.<\/p>\n

We have the\u00a0ADBannerViewDelegate<\/em><\/strong> in our class and it can receive messages from banner \u2013\u00a0bannerViewDidLoadAd<\/em><\/strong> (when banner is loaded successfully) anddidFailToReceiveAdWithError<\/em><\/strong> (when any problems occured). Let\u2019s implement these messages:<\/p>\n

\n
\n
?<\/a><\/span><\/div>\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n
14<\/div>\n
15<\/div>\n
16<\/div>\n
17<\/div>\n
18<\/div>\n
19<\/div>\n
20<\/div>\n
21<\/div>\n
22<\/div>\n
23<\/div>\n<\/td>\n
\n
\n
- (<\/code>void<\/code>)bannerViewDidLoadAd:(ADBannerView *)banner<\/code><\/div>\n
{<\/code><\/div>\n
<\/code>if<\/code> (!<\/code>self<\/code>.bannerIsVisible)<\/code><\/div>\n
<\/code>{<\/code><\/div>\n
<\/code>[UIView beginAnimations:<\/code>@\"animateAdBannerOn\"<\/code> context:<\/code>NULL<\/code>];<\/code><\/div>\n
\/\/ banner is invisible now and moved out of the screen on 50 px<\/code><\/div>\n
<\/code>banner.frame = CGRectOffset(banner.frame, 0, 50);<\/code><\/div>\n
<\/code>[UIView commitAnimations];<\/code><\/div>\n
<\/code>self<\/code>.bannerIsVisible = <\/code>YES<\/code>;<\/code><\/div>\n
<\/code>}<\/code><\/div>\n
}<\/code><\/div>\n
- (<\/code>void<\/code>)bannerView:(ADBannerView *)banner didFailToReceiveAdWithError:(<\/code>NSError<\/code> *)error<\/code><\/div>\n
{<\/code><\/div>\n
if<\/code> (<\/code>self<\/code>.bannerIsVisible)<\/code><\/div>\n
<\/code>{<\/code><\/div>\n
<\/code>[UIView beginAnimations:<\/code>@\"animateAdBannerOff\"<\/code> context:<\/code>NULL<\/code>];<\/code><\/div>\n
\/\/ banner is visible and we move it out of the screen, due to connection issue<\/code><\/div>\n
<\/code>banner.frame = CGRectOffset(banner.frame, 0, -50);<\/code><\/div>\n
<\/code>[UIView commitAnimations];<\/code><\/div>\n
<\/code>self<\/code>.bannerIsVisible = <\/code>NO<\/code>;<\/code><\/div>\n
<\/code>}<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

It\u2019s time to launch the app and see what we have now:<\/p>\n

\"iAd<\/a><\/p>\n

Tap the banner<\/p>\n

\"iAd<\/a><\/p>\n

And that\u2019s it \u2013\u00a0we\u2019ve done it<\/strong> in accordance with Apple\u2019s 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\u2026<\/p>\n

Stop & Resume your app<\/h2>\n

In real app we should stop any application\u2019s activity such as\u00a0video<\/strong>,\u00a0audio<\/strong> playback or pause\u00a0game.<\/strong> In order to solve this task we will create two methodsbannerViewActionShouldBegin<\/em><\/strong> (when full screen ad is shown) andbannerViewActionDidFinish<\/em><\/strong> (when we close ads).<\/p>\n

\n
\n
?<\/a><\/span><\/div>\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n
14<\/div>\n
15<\/div>\n
16<\/div>\n
17<\/div>\n
18<\/div>\n
19<\/div>\n<\/td>\n
\n
\n
- (<\/code>BOOL<\/code>)bannerViewActionShouldBegin:(ADBannerView *)banner willLeaveApplication:(<\/code>BOOL<\/code>)willLeave<\/code><\/div>\n
{<\/code><\/div>\n
<\/code>NSLog<\/code>(<\/code>@\"Banner view is beginning an ad action\"<\/code>);<\/code><\/div>\n
<\/code>BOOL<\/code> shouldExecuteAction = <\/code>YES<\/code>;<\/code><\/div>\n
<\/code>if<\/code> (!willLeave && shouldExecuteAction)<\/code><\/div>\n
<\/code>{<\/code><\/div>\n
<\/code>\/\/ stop all interactive processes in the app<\/code><\/div>\n
<\/code>\/\/ ;<\/code><\/div>\n
<\/code>\/\/ ;<\/code><\/div>\n
<\/code>}<\/code><\/div>\n
<\/code>return<\/code> shouldExecuteAction;<\/code><\/div>\n
}<\/code><\/div>\n
- (<\/code>void<\/code>)bannerViewActionDidFinish:(ADBannerView *)banner<\/code><\/div>\n
{<\/code><\/div>\n
<\/code>\/\/ resume everything you've stopped<\/code><\/div>\n
<\/code>\/\/ ;<\/code><\/div>\n
<\/code>\/\/ ;<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Change Orientation of iAd<\/h2>\n

What else should we do? We need to make banner change it\u2019s orientation\u00a0in accordance with iPhone position.<\/strong> First of all we need to change the line where we define types of banners which we will use:<\/p>\n

\n
\n
?<\/a><\/span><\/div>\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n<\/td>\n
\n
\n
- (<\/code>void<\/code>)viewDidLoad {<\/code><\/div>\n
...<\/code><\/div>\n
adView.requiredContentSizeIdentifiers = [<\/code>NSSet<\/code> setWithObjects:ADBannerContentSizeIdentifier320x50,ADBannerContentSizeIdentifier480x32,<\/code>nil<\/code>];<\/code><\/div>\n
...<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

and here are\u00a0methods for changing orientation:<\/strong><\/p>\n

\n
\n
?<\/a><\/span><\/div>\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n<\/td>\n
\n
\n
- (<\/code>BOOL<\/code>)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {<\/code><\/div>\n
<\/code>\/\/ Return YES for supported orientations<\/code><\/div>\n
<\/code>return<\/code> (interfaceOrientation == UIInterfaceOrientationPortrait|UIInterfaceOrientationPortrait);<\/code><\/div>\n
}<\/code><\/div>\n
- (<\/code>void<\/code>)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(<\/code>NSTimeInterval<\/code>)duration<\/code><\/div>\n
{<\/code><\/div>\n
<\/code>if<\/code> (UIInterfaceOrientationIsLandscape(toInterfaceOrientation))<\/code><\/div>\n
<\/code>adView.currentContentSizeIdentifier = ADBannerContentSizeIdentifier480x32;<\/code><\/div>\n
<\/code>else<\/code><\/div>\n
<\/code>adView.currentContentSizeIdentifier = ADBannerContentSizeIdentifier320x50;<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

And here is how it look in a landscape<\/p>\n

\"iAd<\/a><\/p>\n

When device changes orientation we change\u00a0currentContentSizeIdentifier<\/em><\/strong> property ofADBannerView<\/em><\/strong>. Now we can see banners in landscape mode too. There is still 50 px offset, but it\u2019s easy to fix.<\/p>\n

Apple developers also recommend to write\u00a0object.delegate=nil;<\/em><\/strong> line before deallocatingADBannerView<\/em><\/strong> object. In our example it will look like:<\/p>\n

\n
\n
?<\/a><\/span><\/div>\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n<\/td>\n
\n
\n
- (<\/code>void<\/code>)dealloc {<\/code><\/div>\n
<\/code>adView.delegate=<\/code>nil<\/code>;<\/code><\/div>\n
<\/code>[adView release];<\/code><\/div>\n
<\/code>[<\/code>super<\/code> dealloc];<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Now we have finished with programming part.\u00a0Good luck with Apple iAd!<\/strong><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

\u5728\u4f60\u7684\u61c9\u7528\u7a0b\u5f0f\u4e0a\u9762\u52a0\u4e0aiAd In April 2010 during iOS 4 presentation […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-169","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/www.powenko.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/169"}],"collection":[{"href":"https:\/\/www.powenko.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.powenko.com\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.powenko.com\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.powenko.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=169"}],"version-history":[{"count":1,"href":"https:\/\/www.powenko.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/169\/revisions"}],"predecessor-version":[{"id":2721,"href":"https:\/\/www.powenko.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/169\/revisions\/2721"}],"wp:attachment":[{"href":"https:\/\/www.powenko.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.powenko.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.powenko.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}