배너 광고

배너 광고는 앱 레이아웃 안, 즉 기기 화면의 상단이나 하단에 게재됩니다. 사용자가 앱과 상호작용하는 동안 화면에 머무르며 일정 시간이 지나면 자동으로 새로고침할 수 있습니다. 모바일 광고가 처음이라면 배너 광고부터 시작하세요.

이 가이드에서는Ad Manager 의 배너 광고를 iOS 앱에 통합하는 방법을 설명합니다. 코드 스니펫과 안내 외에도 배너 크기 조정에 대한 정보와 추가 리소스에 대한 링크가 포함되어 있습니다.

기본 요건

항상 테스트 광고로 테스트

앱을 제작하고 테스트할 때는 운영 중인 실제 광고 대신 테스트 광고를 사용하세요. 이렇게 하지 않으면 계정이 정지될 수 있습니다.

테스트 광고를 로드하는 가장 쉬운 방법은 다음과 같은 iOS 배너 테스트 전용 광고 단위 ID를 사용하는 것입니다. /6499/example/banner

이 ID는 모든 요청에 대해 테스트 광고를 반환하도록 특별히 구성되었으며, 코딩, 테스트 및 디버깅 중에 앱에서 자유롭게 사용할 수 있습니다. 앱을 게시하기 전에 이 ID를 자체 광고 단위 ID로 바꿔야 합니다.

모바일 광고 SDK의 테스트 광고가 작동하는 방식을 자세히 알아보려면 테스트 광고를 참고하세요.

GAMBannerView만들기

배너 광고는 GAMBannerView 객체에 표시되므로 배너 광고를 통합하려면 먼저 GAMBannerView를 뷰 계층 구조에 포함해야 합니다. 이 작업은 일반적으로 인터페이스 생성 도구나 프로그래매틱 방식으로 수행할 수 있습니다.

인터페이스 생성 도구

GAMBannerView를 일반적인 보기처럼 스토리보드 또는 xib 파일에 추가할 수 있습니다. 이 방법을 사용할 때는 표시하려는 광고의 크기에 맞춰 너비와 높이의 제한 조건을 추가해야 합니다. 예를 들어 배너 (320x50)를 게재할 때 너비 제약조건을 320포인트로 높이 제약조건 50포인트를 사용하세요.

프로그래매틱 방식

GAMBannerView는 직접 인스턴스화할 수도 있습니다. 다음은 GAMBannerView를 만드는 방법입니다. 배너 광고가 화면의 안전 영역 중앙 하단에 맞춰 표시되고 크기는 320x50입니다.

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GAMBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    // In this case, we instantiate the banner with desired ad size.
    bannerView = GAMBannerView(adSize: GADAdSizeBanner)

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: GAMBannerView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    view.addConstraints(
      [NSLayoutConstraint(item: bannerView,
                          attribute: .bottom,
                          relatedBy: .equal,
                          toItem: view.safeAreaLayoutGuide,
                          attribute: .bottom,
                          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) GAMBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  
  // In this case, we instantiate the banner with desired ad size.
  self.bannerView = [[GAMBannerView 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.view.safeAreaLayoutGuide
                               attribute:NSLayoutAttributeBottom
                              multiplier:1
                                constant:0],
    [NSLayoutConstraint constraintWithItem:bannerView
                               attribute:NSLayoutAttributeCenterX
                               relatedBy:NSLayoutRelationEqual
                                  toItem:self.view
                               attribute:NSLayoutAttributeCenterX
                              multiplier:1
                                constant:0]
                                ]];
}
  


@end

이 경우에는 제공된 광고 크기가 보기의 크기를 조정하는 데 고유한 콘텐츠 크기를 제공하므로 너비 또는 높이 제약 조건을 지정하지 않습니다.

상수로 정의된 표준 크기를 사용하지 않으려면 GADAdSizeFromCGSize를 이용해 맞춤 크기를 설정하세요. 자세한 내용은 배너 크기 섹션을 참고하세요.

속성 GAMBannerView 구성

광고를 로드하고 표시하려면 GAMBannerView에 몇 가지 속성을 설정해야 합니다.

  • rootViewController: 광고 클릭이 발생할 때 오버레이를 표시하는 데 사용되는 보기 컨트롤러입니다. 일반적으로 GAMBannerView를 포함하는 뷰 컨트롤러로 설정해야 합니다.
  • adUnitID: GAMBannerView가 광고를 로드하는 광고 단위 ID입니다.

다음은 UIViewController의 viewDidLoad 메서드에서 두 개의 필수 속성을 설정하는 방법을 보여주는 코드 예입니다.

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "/6499/example/banner"
  bannerView.rootViewController = self
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"/6499/example/banner";
  self.bannerView.rootViewController = self;
}

광고 로드

GAMBannerView를 제자리에 배치하고 속성을 구성했으면 광고를 로드할 차례입니다. 다음과 같이 GAMRequest 객체에서 loadRequest:를 호출하면 됩니다.

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "/6499/example/banner"
  bannerView.rootViewController = self
  bannerView.load(GAMRequest())
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"/6499/example/banner";
  self.bannerView.rootViewController = self;
  [self.bannerView loadRequest:[GAMRequest request]];
}

GAMRequest 객체는 단일 광고 요청을 나타내며 타겟팅 정보와 같은 속성을 포함합니다.

광고 단위가 새로고침되도록 이미 구성한 경우 광고가 로드되지 않더라도 다른 광고를 명시적으로 요청하지 않아도 됩니다. Google 모바일 광고 SDK는Ad Manager UI에 지정된 새로고침 빈도를 따릅니다. 새로고침을 사용 설정하지 않았다면 새로 요청해야 합니다.

광고 이벤트

GADBannerViewDelegate를 사용하면 광고가 닫히거나 사용자가 앱을 종료할 때와 같은 수명 주기 이벤트를 수신 대기할 수 있습니다.

배너 이벤트에 등록

배너 광고 이벤트에 등록하려면 GAMBannerViewdelegate 속성을 GADBannerViewDelegate 프로토콜을 구현하는 객체로 설정하세요. 일반적으로는 배너 광고를 구현하는 클래스가 대리자 클래스로도 작동하며, 이러한 경우 delegate 속성을 self로 설정할 수 있습니다.

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController, GADBannerViewDelegate {

  var bannerView: GAMBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    ...
    bannerView.delegate = self
  }
}

Objective-C

@import GoogleMobileAds;

@interface ViewController () <GADBannerViewDelegate>

@property(nonatomic, strong) GAMBannerView *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 데모 앱의 배너 대리자 메서드 구현에 대한 광고 대리자 예를 참고하세요.

Swift Objective-C

사용 사례

다음은 이러한 광고 이벤트 메서드의 몇 가지 사용 사례입니다.

광고가 수신된 후 뷰 계층 구조에 배너 추가

광고가 수신될 때까지 GAMBannerView를 뷰 계층 구조에 추가하지 않는 것이 좋습니다. 이렇게 하려면 bannerViewDidReceiveAd: 이벤트를 수신하세요.

Swift

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  // Add banner to view and add constraints as above.
  addBannerViewToView(bannerView)
}

Objective-C

- (void)bannerViewDidReceiveAd:(GAMBannerView *)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:(GAMBannerView *)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
468 x 60 IAB 원본 크기 배너 태블릿 GADAdSizeFullBanner
728x90 IAB 리더보드 태블릿 GADAdSizeLeaderboard
제공된 너비x적응형 높이 적응형 배너 휴대전화 및 태블릿 N/A

맞춤 광고 크기

맞춤 배너 크기를 지정하려면 GADAdSizeFromCGSize를 사용하여 원하는 크기를 설정하세요(아래 참고).

Swift

let adSize = GADAdSizeFromCGSize(CGSize(width: 300, height: 50))

Objective-C

GADAdSize size = GADAdSizeFromCGSize(CGSizeMake(300, 50));

맞춤 광고 크기

Google Ad Manager에서는 일반 광고 단위 외에도 크기가 조정된 광고 단위를 앱에 게재할 수 있습니다. 광고 요청에 정의된 광고 크기 (너비, 높이)는 앱에 표시되는 광고 보기 (GAMBannerView)의 크기와 일치해야 합니다. 맞춤 크기를 설정하려면 GADAdSizeFromCGSize를 사용하세요.

Swift

// Define custom GADAdSize of 250x250 for GAMBannerView.
let customAdSize = GADAdSizeFromCGSize(CGSize(width: 250, height: 250))
bannerView = GAMBannerView(adSize: customAdSize)

Objective-C

// Define custom GADAdSize of 250x250 for GAMBannerView
GADAdSize customAdSize = GADAdSizeFromCGSize(CGSizeMake(250, 250));
self.bannerView = [[GAMBannerView alloc] initWithAdSize:customAdSize];

iOS API 데모 앱에 맞춤 광고 크기를 구현하려면 Ad Manager의 여러 광고 크기 예시를 참고하세요.

Swift Objective-C

다양한 광고 크기

Ad Manager를 사용하면 GAMBannerView에 게재할 수 있는 여러 광고 크기를 지정할 수 있습니다. 이 기능을 사용하려면 세 단계를 거쳐야 합니다.

  1. Ad Manager UI에서 크기가 다른 광고 소재와 연결된 광고 단위를 타겟팅하는 광고 항목을 만듭니다.

  2. 앱에서 GAMBannerViewvalidAdSizes 속성을 설정합니다.

    Swift

    // Define an optional array of GADAdSize to specify all valid sizes that are appropriate
    // for this slot. Never create your own GADAdSize directly. Use one of the
    // predefined standard ad sizes (such as GADAdSizeBanner), or create one using
    // the GADAdSizeFromCGSize method.
    //
    // Note: Ensure that the allocated GAMBannerView is defined with an ad size. Also note
    // that all desired sizes should be included in the validAdSizes array.
    bannerView.validAdSizes = [NSValueFromGADAdSize(GADAdSizeBanner),
        NSValueFromGADAdSize(GADAdSizeMediumRectangle),
        NSValueFromGADAdSize(GADAdSizeFromCGSize(CGSize(width: 120, height: 20)))]
    

    Objective-C

    // Define an optional array of GADAdSize to specify all valid sizes that are appropriate
    // for this slot. Never create your own GADAdSize directly. Use one of the
    // predefined standard ad sizes (such as GADAdSizeBanner), or create one using
    // the GADAdSizeFromCGSize method.
    //
    // Note: Ensure that the allocated GAMBannerView is defined with an ad size. Also note
    // that all desired sizes should be included in the validAdSizes array.
    self.bannerView.validAdSizes = @[
        NSValueFromGADAdSize(GADAdSizeBanner),
        NSValueFromGADAdSize(GADAdSizeMediumRectangle),
        NSValueFromGADAdSize(GADAdSizeFromCGSize(CGSizeMake(120, 20)))
    ];
    
  3. GADAdSizeDelegate 메서드를 구현하여 광고 크기 변경을 감지합니다.

    Swift

    public func bannerView(_ bannerView: GADBannerView, willChangeAdSizeTo size: GADAdSize)
    

    Objective-C

    • (void)bannerView:(GAMBannerView *)view willChangeAdSizeTo:(GADAdSize)size;
  4. 광고 요청을 하기 전에 반드시 대리자를 설정해야 합니다.

    Swift

    bannerView.adSizeDelegate = self

    Objective-C

    self.bannerView.adSizeDelegate = self;

iOS API 데모 앱에 맞춤 광고 크기를 구현하려면 Ad Manager의 여러 광고 크기 예시를 참고하세요.

Swift Objective-C

노출수 수동 집계

노출을 기록해야 하는 특별한 상황이면 수동으로 Ad Manager에 노출 핑을 보낼 수 있습니다. 이렇게 하려면 광고를 로드하기 전에 수동 노출을 위한 GAMBannerView를 사용 설정하세요.

Swift

bannerView.enableManualImpressions = true

Objective-C

self.bannerView.enableManualImpressions = YES;

광고가 반환되어 화면에 표시된 것이 확인되면 수동으로 노출을 실행할 수 있습니다.

Swift

bannerView.recordImpression()

Objective-C

[self.bannerView recordImpression];

앱 이벤트

앱 이벤트를 사용하면 앱 코드에 메시지를 전송하는 광고를 만들 수 있습니다. 메시지가 전송되면 앱에서 이 메시지를 기반으로 작업을 수행할 수 있습니다.

GADAppEventDelegate를 사용하여 Ad Manager 관련 앱 이벤트를 수신할 수 있습니다. 이러한 이벤트는 GADBannerViewDelegate 객체의 bannerViewDidReceiveAd:가 호출되기 전을 포함해 광고 주기 사이에 언제든지 발생할 수 있습니다.

Swift

// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.

// Called when the banner receives an app event.
optional public func bannerView(_ banner: GAMBannerView,
    didReceiveAppEvent name: String, withInfo info: String?)

Objective-C

// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.

@optional
// Called when the banner receives an app event.
- (void)bannerView:(GAMBannerView *)banner
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info;

앱 이벤트 메서드는 뷰 컨트롤러에 구현할 수 있습니다.

Swift

import GoogleMobileAds

class ViewController: UIViewController, GADAppEventDelegate {
}

Objective-C

@import GoogleMobileAds;

@interface ViewController : UIViewController <GADAppEventDelegate> {
}

@end

광고를 요청하기 전에 appEventDelegate 속성을 사용하여 대리자를 설정해야 합니다.

Swift

bannerView.appEventDelegate = self

Objective-C

self.bannerView.appEventDelegate = self;

다음은 앱 이벤트를 통해 색상을 지정하여 앱의 배경색을 변경하는 방법의 예입니다.

Swift

func bannerView(_ banner: GAMBannerView, didReceiveAppEvent name: String,
    withInfo info: String?) {
  if name == "color" {
    guard let info = info else { return }
    switch info {
    case "green":
      // Set background color to green.
      view.backgroundColor = UIColor.green
    case "blue":
      // Set background color to blue.
      view.backgroundColor = UIColor.blue
    default:
      // Set background color to black.
      view.backgroundColor = UIColor.black
    }
  }
}

Objective-C

- (void)bannerView:(GAMBannerView *)banner
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info {
  if ([name isEqual:@"color"]) {
    if ([info isEqual:@"green"]) {
      // Set background color to green.
      self.view.backgroundColor = [UIColor greenColor];
    } else if ([info isEqual:@"blue"]) {
      // Set background color to blue.
      self.view.backgroundColor = [UIColor blueColor];
    } else
      // Set background color to black.
      self.view.backgroundColor = [UIColor blackColor];
    }
  }
}

다음은 색상 앱 이벤트 메시지를 appEventDelegate에 보내는 광고 소재입니다.

<html>
<head>
  <script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Send a color=green event when ad loads.
      admob.events.dispatchAppEvent("color", "green");

      document.getElementById("ad").addEventListener("click", function() {
        // Send a color=blue event when ad is clicked.
        admob.events.dispatchAppEvent("color", "blue");
      });
    });
  </script>
  <style>
    #ad {
      width: 320px;
      height: 50px;
      top: 0px;
      left: 0px;
      font-size: 24pt;
      font-weight: bold;
      position: absolute;
      background: black;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="ad">Carpe diem!</div>
</body>
</html>

iOS API 데모 앱에 앱 이벤트를 구현하려면 Ad Manager 앱 이벤트 예시를 참고하세요.

Swift Objective-C

추가 리소스

GitHub의 예

모바일 광고 차고 동영상 가이드

다음 단계

사용자 개인 정보 보호에 관해 자세히 알아보세요.