배너 광고는 앱의 레이아웃 안에서 기기 화면의 상단이나 하단에 게재됩니다. 사용자가 앱과 상호작용하는 동안 화면에 계속 표시되며 일정 시간이 지나면 자동으로 새로고침할 수 있습니다. 모바일 광고가 처음이라면 배너 광고부터 시작하세요. 우수사례
이 가이드에서는 AdMob의 배너 광고를 iOS 앱에 통합하는 방법을 설명합니다. 코드 스니펫과 안내 외에도 배너 크기 조정에 대한 정보와 추가 리소스에 대한 링크가 나와 있습니다.
기본 요건
- 시작 가이드에 따라 필요한 과정을 완료합니다.
항상 테스트 광고로 테스트
앱을 제작하고 테스트할 때는 운영 중인 실제 광고 대신 테스트 광고를 사용하세요. 이렇게 하지 않으면 계정이 정지될 수 있습니다.
테스트 광고를 로드하는 가장 쉬운 방법은 다음과 같은
iOS 배너 광고 테스트 전용 광고 단위 ID를 사용하는 것입니다.
ca-app-pub-3940256099942544/2934735716
이 ID는 모든 요청에 대해 테스트 광고를 반환하도록 특별히 구성되었으며, 코딩, 테스트 및 디버깅 중에 앱에서 자유롭게 사용할 수 있습니다. 앱을 게시하기 전에 이 ID를 자체 광고 단위 ID로 바꿔야 합니다.
모바일 광고 SDK의 테스트 광고가 작동하는 방식을 자세히 알아보려면 테스트 광고를 참고하세요.
GADBannerView 만들기
배너 광고는
GADBannerView
객체에 표시되므로,
배너 광고를 통합하려면 먼저 GADBannerView
를 보기 계층구조에
넣어야 합니다. 이 작업을 하려면 일반적으로
인터페이스 생성 도구나 프로그래매틱 방식을 이용합니다.
인터페이스 생성 도구
GADBannerView
를 일반적인 보기처럼 스토리보드 또는 xib 파일에
추가할 수 있습니다. 이 방법을 사용하는 경우 표시하려는
광고의 크기에 맞춰 너비와 높이의 최댓값을 설정해야 합니다. 예를 들어 320x50 크기의 배너 광고를 게재하려면
폭 제한으로 320, 높이 제한으로 50을 설정하세요.
프로그래매틱 방식
GADBannerView
도 직접 인스턴스화할 수 있습니다.
다음은 GADBannerView
를 만드는 방법입니다.
배너 광고가 화면의 안전 영역 중앙 하단에 맞춰 표시되고
크기는 320x50입니다.
Swift
import GoogleMobileAds import UIKit class ViewController: UIViewController { var bannerView: GADBannerView! override func viewDidLoad() { super.viewDidLoad() // In this case, we instantiate the banner with desired ad size. bannerView = GADBannerView(adSize: GADAdSizeBanner) addBannerViewToView(bannerView) } func addBannerViewToView(_ bannerView: GADBannerView) { bannerView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(bannerView) view.addConstraints( [NSLayoutConstraint(item: bannerView, attribute: .bottom, relatedBy: .equal, toItem: bottomLayoutGuide, attribute: .top, multiplier: 1, constant: 0), NSLayoutConstraint(item: bannerView, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1, constant: 0) ]) } }
Objective-C
@import GoogleMobileAds; @interface ViewController () @property(nonatomic, strong) GADBannerView *bannerView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // In this case, we instantiate the banner with desired ad size. self.bannerView = [[GADBannerView alloc] initWithAdSize:GADAdSizeBanner]; [self addBannerViewToView:self.bannerView]; } - (void)addBannerViewToView:(UIView *)bannerView { bannerView.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:bannerView]; [self.view addConstraints:@[ [NSLayoutConstraint constraintWithItem:bannerView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.bottomLayoutGuide attribute:NSLayoutAttributeTop multiplier:1 constant:0], [NSLayoutConstraint constraintWithItem:bannerView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0] ]]; } @end
이 경우에는 제공된 광고 크기가 보기의 크기를 조정하는 고유한 콘텐츠 크기를 제공하므로 너비 또는 높이 제한 조건을 지정하지 않습니다.
상수로 정의된 표준 크기를 사용하지 않으려면
GADAdSizeFromCGSize
를 이용해 맞춤 크기를
설정하세요.
자세한 내용은 배너 크기 섹션을 참고하세요.
GADBannerView 속성 구성
광고를 로드하고 표시하려면 GADBannerView
에서
속성 몇 개를 설정해야 합니다.
rootViewController
: 광고 클릭이 발생할 때 오버레이를 표시하는 데 사용되는 보기 컨트롤러입니다. 일반적으로GADBannerView
를 포함하는 보기 컨트롤러로 설정해야 합니다.adUnitID
:GADBannerView
가 광고를 로드하는 광고 단위 ID입니다.
다음은 UIViewController의 viewDidLoad
메서드에서
두 개의 필수 속성을 설정하는 방법을 보여주는 예시 코드입니다.
Swift
override func viewDidLoad() { super.viewDidLoad() ... bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716" bannerView.rootViewController = self }
Objective-C
- (void)viewDidLoad { [super viewDidLoad]; ... self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716"; self.bannerView.rootViewController = self; }
광고 로드
GADBannerView
위치를 정하고 속성이 구성되었으면
광고를 로드하세요. 다음과 같이 GADRequest
에서
loadRequest:
를
호출하면 됩니다.
Swift
override func viewDidLoad() { super.viewDidLoad() ... bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716" bannerView.rootViewController = self bannerView.load(GADRequest()) }
Objective-C
- (void)viewDidLoad { [super viewDidLoad]; ... self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716"; self.bannerView.rootViewController = self; [self.bannerView loadRequest:[GADRequest request]]; }
GADRequest 객체는 단일 광고 요청을 나타내며, 타겟팅 정보와 같은 속성을 포함합니다.
광고 이벤트
GADBannerViewDelegate
를 사용하면 광고 닫음,
앱 종료와 같은 수명 주기 이벤트를 수신할 수 있습니다.
배너 이벤트에 등록
배너 광고 이벤트에 등록하려면
GADBannerView
의 delegate
속성을 GADBannerViewDelegate
프로토콜을
구현하는 객체로 설정하세요. 일반적으로는 배너 광고를
구현하는 클래스가 대리자 클래스로도 작동하며, 이 경우 delegate
속성을
self
로 설정할 수 있습니다.
Swift
import GoogleMobileAds import UIKit class ViewController: UIViewController, GADBannerViewDelegate { var bannerView: GADBannerView! override func viewDidLoad() { super.viewDidLoad() ... bannerView.delegate = self } }
Objective-C
@import GoogleMobileAds; @interface ViewController () <GADBannerViewDelegate> @property(nonatomic, strong) GADBannerView *bannerView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; ... self.bannerView.delegate = self; }
배너 이벤트 구현
각 메서드가 GADBannerViewDelegate
선택사항으로 표시되므로
원하는 메서드만 구현하면 됩니다. 이 예에서는 각 메서드를 구현하고
콘솔에 메시지를 기록합니다.
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) { print("bannerViewDidReceiveAd") } func bannerView(_ bannerView: GADBannerView, didFailToReceiveAdWithError error: Error) { print("bannerView:didFailToReceiveAdWithError: \(error.localizedDescription)") } func bannerViewDidRecordImpression(_ bannerView: GADBannerView) { print("bannerViewDidRecordImpression") } func bannerViewWillPresentScreen(_ bannerView: GADBannerView) { print("bannerViewWillPresentScreen") } func bannerViewWillDismissScreen(_ bannerView: GADBannerView) { print("bannerViewWillDIsmissScreen") } func bannerViewDidDismissScreen(_ bannerView: GADBannerView) { print("bannerViewDidDismissScreen") }
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView { NSLog(@"bannerViewDidReceiveAd"); } - (void)bannerView:(GADBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error { NSLog(@"bannerView:didFailToReceiveAdWithError: %@", [error localizedDescription]); } - (void)bannerViewDidRecordImpression:(GADBannerView *)bannerView { NSLog(@"bannerViewDidRecordImpression"); } - (void)bannerViewWillPresentScreen:(GADBannerView *)bannerView { NSLog(@"bannerViewWillPresentScreen"); } - (void)bannerViewWillDismissScreen:(GADBannerView *)bannerView { NSLog(@"bannerViewWillDismissScreen"); } - (void)bannerViewDidDismissScreen:(GADBannerView *)bannerView { NSLog(@"bannerViewDidDismissScreen"); }
iOS API 데모 앱의 배너 대리자 메서드 구현에 대한 광고 대리자 예를 참고하세요.
사용 사례
다음은 이러한 광고 이벤트 메서드의 몇 가지 사용 사례입니다.
광고가 수신된 후 보기 계층구조에 배너 추가
광고가 수신될 때까지 GADBannerView
를 보기 계층구조에
추가하지 않는 것이 좋습니다. 이렇게 하려면 bannerViewDidReceiveAd:
이벤트를
수신하세요.
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) { // Add banner to view and add constraints as above. addBannerViewToView(bannerView) }
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView { // Add bannerView to view and add constraints as above. [self addBannerViewToView:self.bannerView]; }
배너 광고에 애니메이션 효과 추가
다음 예와 같이 반환된 배너 광고에
bannerViewDidReceiveAd:
이벤트를 사용하여 애니메이션 효과를 줄 수도 있습니다.
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) { bannerView.alpha = 0 UIView.animate(withDuration: 1, animations: { bannerView.alpha = 1 }) }
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView { bannerView.alpha = 0; [UIView animateWithDuration:1.0 animations:^{ bannerView.alpha = 1; }]; }
앱 일시중지 및 재개
GADBannerViewDelegate
프로토콜에는 클릭으로 인해 오버레이가 표시되거나
닫히는 시점과 같은 이벤트를 알리는 메서드가 있습니다.
이러한 이벤트가 광고로 인한 것인지를
추적하려면 GADBannerViewDelegate
메서드에 등록하세요.
광고 클릭에서 나오는 것을 포함하여 모든 유형의 오버레이 표시나
외부 브라우저 호출을 포착하려면
앱이 UIViewController
또는 UIApplication
에서 동일한 메서드를 수신하는 것이 좋습니다. 다음 표에는
GADBannerViewDelegate
메서드와 동시에 호출되는 iOS 메서드가 나와 있습니다.
GADBannerViewDelegate 메서드 | iOS 메서드 |
---|---|
bannerViewWillPresentScreen: |
UIViewController의 viewWillDisappear: |
bannerViewWillDismissScreen: |
UIViewController의 viewWillAppear: |
bannerViewDidDismissScreen: |
UIViewController의 viewDidAppear: |
배너 크기
아래 표에는 표준 배너 크기가 나와 있습니다.
포인트 단위의 크기(폭x높이) | 설명 | 사용 가능 여부 | AdSize 상수 |
---|---|---|---|
320x50 | 배너 | 휴대전화 및 태블릿 | GADAdSizeBanner |
320x100 | 대형 배너 | 휴대전화 및 태블릿 | GADAdSizeLargeBanner |
300x250 | IAB 중간 직사각형 | 휴대전화 및 태블릿 | GADAdSizeMediumRectangle |
468x60 | IAB 전체 크기 배너 | 태블릿 | GADAdSizeFullBanner |
728x90 | IAB 리더보드 | 태블릿 | GADAdSizeLeaderboard |
제공된 너비x조정 가능한 높이 | 적응형 배너 | 휴대전화 및 태블릿 | 해당 사항 없음 |
맞춤 광고 크기
맞춤 배너 크기를 지정하려면
GADAdSizeFromCGSize
를 사용하여 원하는 크기를
설정하세요(아래 참고).
Swift
let adSize = GADAdSizeFromCGSize(CGSize(width: 300, height: 50))
Objective-C
GADAdSize size = GADAdSizeFromCGSize(CGSizeMake(300, 50));
추가 리소스
GitHub의 예
배너 광고의 예: Swift | Objective-C
고급 기능 데모: Swift | Objective-C
GitHub의 배너 UITableView 예시: Swift | Objective-C