이 페이지는 Cloud Translation API를 통해 번역되었습니다.

배너 광고

배너 광고는 앱 레이아웃의 일부를 차지하는 직사각형 광고입니다. 그들은 사용자가 앱과 상호작용하는 동안 화면 상단이나 하단 또는 사용자가 스크롤할 때 콘텐츠와 인라인으로 삽입됩니다. 배너 광고 광고는 일정 시간이 지나면 자동으로 새로고침될 수 있습니다. 배너 광고 개요를 참고하세요. 를 참조하세요.

이 가이드에서는 앵커 광고 적응형 배너 광고 이렇게 하면 맞춤 타겟팅 매개변수를 사용하여 각 기기에 맞게 광고 크기를 지정할 수 있습니다.

앵커 적응형 배너

앵커 적응형 배너 광고는 일반 광고가 아닌 고정된 가로세로 비율의 광고입니다. 고정 크기 광고를 사용할 수 있습니다. 가로세로 비율은 업계 표준 320*50과 유사합니다. 한 번 사용할 수 있는 전체 너비를 지정하면 설정합니다. 최적의 높이는 광고가 게재될 때 주변 뷰가 이동하지 않아도 됩니다. 새로고침이 실행됩니다

기본 요건

시작 가이드를 모두 읽어보세요.

항상 테스트 광고로 테스트

앱을 빌드하고 테스트할 때는 만들 수 있습니다. 이렇게 하지 않으면 계정이 정지될 수 있습니다.

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

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

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

GAMBannerView 만들기

배너 광고는 GAMBannerView에 표시됩니다. 개체이므로 배너 광고를 통합하기 위한 첫 번째 단계는 GAMBannerView 뷰 계층 구조에 배치해야 합니다 이 작업은 일반적으로 프로그래매틱 방식으로 또는 사용할 수 있습니다.

프로그래매틱 방식

GAMBannerView는 직접 인스턴스화할 수도 있습니다. 다음은 GAMBannerView를 만드는 방법의 예입니다. 화면 안전 영역의 하단 중앙에 정렬됩니다.

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GAMBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    let viewWidth = view.frame.inset(by: view.safeAreaInsets).width

    // Here the current interface orientation is used. Use
    // GADLandscapeAnchoredAdaptiveBannerAdSizeWithWidth or
    // GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth if you prefer to load an ad of a
    // particular orientation,
    let adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
    bannerView = GAMBannerView(adSize: adaptiveSize)

    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];
  
  // Here safe area is taken into account, hence the view frame is used after the
  // view has been laid out.
  CGRect frame = UIEdgeInsetsInsetRect(self.view.frame, self.view.safeAreaInsets);
  CGFloat viewWidth = frame.size.width;

  // Here the current interface orientation is used. If the ad is being preloaded
  // for a future orientation change or different orientation, the function for the
  // relevant orientation should be used.
  GADAdSize adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
  // In this case, we instantiate the banner with desired ad size.
  self.bannerView = [[GAMBannerView alloc] initWithAdSize:adaptiveSize];

  [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

이 경우 너비 또는 높이 제약 조건을 지정하지 않습니다. 제공된 광고 크기로 배너의 기본 콘텐츠 크기를 제공하여 합니다.

인터페이스 빌더

GAMBannerView는 스토리보드 또는 xib에 추가할 수 있습니다. 파일에서 참조됩니다. 이 방법을 사용할 때는 있습니다. 예를 들어 페이지 하단에 적응형 배너를 표시하는 경우 배너 보기의 하단을 레이아웃 가이드를 열고 중앙 X를 슈퍼뷰의 중앙 X와 같게 설정합니다.

배너의 광고 크기는 계속해서 프로그래매틱 방식으로 설정됩니다.

Swift

  bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)

Objective-C

  self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);

광고 로드

GAMBannerView의 위치 및 속성이 배치되면 이제 광고를 로드하세요. 이 작업은loadRequest: GAMRequest 객체:

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...
  
  //  Set the ad unit ID and view controller that contains the GAMBannerView.
  bannerView.adUnitID = "/6499/example/adaptive-banner"
  bannerView.rootViewController = self

  bannerView.load(GAMRequest())
}

Objective-C

-   (void)viewDidLoad {
  [super viewDidLoad];
  ...
  
  //  Set the ad unit ID and view controller that contains the GAMBannerView.
  self.bannerView.adUnitID = @"/6499/example/adaptive-banner";
  self.bannerView.rootViewController = self;

  [self.bannerView loadRequest:[GAMRequest request]];
}

GAMRequest 객체는 단일 광고 요청을 나타냅니다. 타겟팅 정보와 같은 속성을 포함할 수 있습니다.

광고가 로드되지 않는 경우 광고 단위가 새로고침되도록 설정한 경우에만 Google 모바일 광고 SDK에서 Ad Manager에서 지정한 새로고침 빈도를 있습니다. 새로고침을 사용 설정하지 않았다면 새로 요청해야 합니다.

광고 이벤트

GADBannerViewDelegate를 사용하면 수명 주기 이벤트를 수신 대기할 수 있습니다. 예를 들어 광고가 닫히거나 사용자가 앱을 떠날 때 이를 해결할 수 있습니다.

배너 이벤트에 등록

배너 광고 이벤트에 등록하려면 다음에서 delegate 속성을 설정합니다. GAMBannerView를 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 데모 앱입니다.

스위프트 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 메서드:

GADBannerViewDelegate 메서드	iOS 메서드
`bannerViewWillPresentScreen:`	UIViewController의 `viewWillDisappear:`
`bannerViewWillDismissScreen:`	UIViewController의 `viewWillAppear:`
`bannerViewDidDismissScreen:`	UIViewController의 `viewDidAppear:`

수동 노출수 집계

특별한 이유가 있는 경우 수동으로 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>

앱 이벤트 구현을 보려면 Ad Manager 앱 이벤트 예시를 iOS API 데모 앱

스위프트 Objective-C

추가 리소스

GitHub의 예

앵커 적응형 배너 광고의 예: Swift | Objective-C

고급 기능 데모: Swift | Objective-C

다음 단계

접을 수 있는 배너

접을 수 있는 배너 광고는 처음에 더 큰 크기로 게재되는 배너 광고입니다. 오버레이되며, 광고를 더 작은 크기로 접는 버튼이 있습니다. 사용해 보기 실적을 더욱 최적화할 수 있습니다 자세한 내용은 접을 수 있는 배너 광고를 참조하세요.

인라인 적응형 배너

인라인 적응형 배너는 앵커 적응형 배너에 비해 더 크고 더 긴 배너입니다. 배너 광고 이 배너는 높이가 가변적이며 기기 화면 높이만큼 높을 수도 있습니다. 다음 광고주의 경우 스크롤 가능한 콘텐츠에 배너 광고를 배치하는 앱 자세한 내용은 인라인 적응형 배너 배너를 참고해 확인하세요.

다른 주제 살펴보기

사용자 개인 정보 보호