โฆษณาแบนเนอร์

โฆษณาแบนเนอร์คือโฆษณารูปสี่เหลี่ยมผืนผ้าที่ยึดพื้นที่ส่วนใดส่วนหนึ่งของเลย์เอาต์ของแอป โฆษณาเหล่านี้จะอยู่บนหน้าจอขณะที่ผู้ใช้โต้ตอบกับแอป ซึ่งอาจตรึงอยู่ที่ด้านบนหรือด้านล่างของหน้าจอ หรือแทรกอยู่ในเนื้อหาในขณะที่ผู้ใช้เลื่อนดู โฆษณาแบนเนอร์สามารถรีเฟรชโดยอัตโนมัติหลังจากเวลาผ่านไปช่วงหนึ่ง ดูภาพรวมของโฆษณาแบนเนอร์สำหรับข้อมูลเพิ่มเติม

คู่มือนี้แสดงวิธีเริ่มต้นใช้งานโฆษณาแบนเนอร์แบบปรับขนาดได้แบบโฆษณา Anchor ซึ่งจะเพิ่มประสิทธิภาพให้ได้สูงสุดด้วยการเพิ่มประสิทธิภาพขนาดโฆษณาสำหรับอุปกรณ์แต่ละเครื่องโดยใช้ความกว้างของโฆษณาที่คุณระบุ

แบนเนอร์แบบปรับขนาดได้แบบ Anchor

โฆษณาแบนเนอร์แบบปรับขนาดได้แบบโฆษณา Anchor คือโฆษณาที่มีสัดส่วนภาพคงที่ ไม่ใช่โฆษณาที่มีขนาดคงที่ปกติ สัดส่วนภาพใกล้เคียงกับมาตรฐานอุตสาหกรรม 320*50 เมื่อคุณระบุความกว้างเต็มที่ใช้ได้แล้ว ระบบจะแสดงโฆษณาที่มีความสูงที่เหมาะสมที่สุดสำหรับความกว้างนั้น ความสูงที่เหมาะสมจะไม่เปลี่ยนแปลงในคำขอจากอุปกรณ์เดียวกัน และไม่จำเป็นต้องขยับเมื่อรีเฟรชโฆษณา

สิ่งที่ต้องดำเนินการก่อน

• ทำตามคู่มือเริ่มต้นใช้งานจนจบ

ทดสอบด้วยโฆษณาทดสอบเสมอ

เมื่อสร้างและทดสอบแอป โปรดตรวจสอบว่าคุณใช้โฆษณาทดสอบแทนที่จะใช้โฆษณาจริงในเวอร์ชันที่ใช้งานจริง หากไม่ดำเนินการ บัญชีจะถูกระงับ

วิธีที่ง่ายที่สุดในการโหลดโฆษณาทดสอบคือการใช้รหัสหน่วยโฆษณาทดสอบโดยเฉพาะสำหรับแบนเนอร์ iOS ดังนี้ /6499/example/adaptive-banner

โดยกำหนดค่ามาเป็นพิเศษให้ส่งคืนโฆษณาทดสอบสำหรับคำขอทุกรายการ และคุณสามารถใช้งานในแอปของคุณเองขณะเขียนโค้ด ทดสอบ และแก้ไขข้อบกพร่องได้ฟรี เพียงตรวจสอบให้แน่ใจว่าคุณแทนที่ด้วยรหัสหน่วยโฆษณาของคุณเองก่อนที่จะเผยแพร่แอป

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของโฆษณาทดสอบของ SDK โฆษณาบนอุปกรณ์เคลื่อนที่ โปรดดูโฆษณาทดสอบ

สร้าง GAMแบนเนอร์View

โฆษณาแบนเนอร์จะแสดงในออบเจ็กต์ GAMBannerView ดังนั้นขั้นตอนแรกในการผสานรวมโฆษณาแบนเนอร์คือการใส่ GAMBannerView ในลำดับชั้นการแสดงผล ซึ่งโดยทั่วไปจะทำแบบเป็นโปรแกรมหรือผ่านเครื่องมือสร้างอินเทอร์เฟซ

แบบเป็นโปรแกรม

นอกจากนี้ GAMBannerView ยังสร้างอินสแตนซ์ได้โดยตรง ต่อไปนี้คือตัวอย่างวิธีสร้าง GAMBannerView โดยให้อยู่กึ่งกลางด้านล่างของพื้นที่ปลอดภัยของหน้าจอ

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)
      ])
   }
   
}

@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 ของมุมมองพิเศษ

ขนาดโฆษณาของแบนเนอร์จะยังคงตั้งค่าแบบเป็นโปรแกรมอยู่

  bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)

  self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);

โหลดโฆษณา

เมื่อใส่ GAMBannerView และกำหนดค่าพร็อพเพอร์ตี้แล้ว ก็ถึงเวลาโหลดโฆษณา ซึ่งทำได้ด้วยการเรียกใช้ loadRequest: ในออบเจ็กต์ GAMRequest:

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())
}

-   (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 Mobile Ads SDK ยึดตามอัตราการรีเฟรชที่คุณระบุไว้ใน UI ของ Ad Manager หากยังไม่ได้เปิดใช้การรีเฟรช คุณจะต้องส่งคำขอใหม่

เหตุการณ์โฆษณา

เมื่อใช้ GADBannerViewDelegate คุณจะติดตามเหตุการณ์ในวงจรได้ เช่น เมื่อปิดโฆษณาหรือออกจากแอป

การลงทะเบียนเข้าร่วมกิจกรรมแบนเนอร์

หากต้องการลงทะเบียนสำหรับเหตุการณ์โฆษณาแบนเนอร์ ให้ตั้งค่าพร็อพเพอร์ตี้ delegate ใน GAMBannerView เป็นออบเจ็กต์ที่ใช้โปรโตคอล GADBannerViewDelegate โดยทั่วไป คลาสที่ใช้โฆษณาแบนเนอร์ยังทำหน้าที่เป็นคลาสผู้รับมอบสิทธิ์ด้วย ซึ่งในกรณีนี้คุณตั้งค่าพร็อพเพอร์ตี้ delegate เป็น self ได้

import GoogleMobileAds
import UIKit

class ViewController: UIViewController, GADBannerViewDelegate {

  var bannerView: GAMBannerView!

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

@import GoogleMobileAds;

@interface ViewController () <GADBannerViewDelegate>

@property(nonatomic, strong) GAMBannerView *bannerView;

@end

@implementation ViewController

-   (void)viewDidLoad {
  [super viewDidLoad];
  ...
  self.bannerView.delegate = self;
}

การติดตั้งใช้งานเหตุการณ์แบนเนอร์

แต่ละวิธีใน GADBannerViewDelegate จะมีเครื่องหมายกำกับไว้ว่าไม่บังคับ คุณจึงต้องติดตั้งใช้งานเฉพาะเมธอดที่ต้องการเท่านั้น ตัวอย่างนี้จะใช้แต่ละวิธี และบันทึกข้อความไปยังคอนโซล

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")
}

-   (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: ดังนี้

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

-   (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
  // Add bannerView to view and add constraints as above.
  [self addBannerViewToView:self.bannerView];
}

การทำให้โฆษณาแบนเนอร์เคลื่อนไหว

คุณยังใช้เหตุการณ์ bannerViewDidReceiveAd: เพื่อทำให้โฆษณาแบนเนอร์เคลื่อนไหวเมื่อมีการส่งคืนได้ ดังที่แสดงในตัวอย่างต่อไปนี้

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  bannerView.alpha = 0
  UIView.animate(withDuration: 1, animations: {
    bannerView.alpha = 1
  })
}

-   (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
  bannerView.alpha = 0;
  [UIView animateWithDuration:1.0 animations:^{
    bannerView.alpha = 1;
  }];
}

การหยุดแอปชั่วคราวและเล่นต่อ

โปรโตคอล GADBannerViewDelegate มีวิธีแจ้งให้คุณทราบถึงเหตุการณ์ เช่น เมื่อการคลิกทําให้โฆษณาซ้อนทับปรากฏขึ้นหรือปิดไป หากต้องการติดตามว่าเหตุการณ์เหล่านี้เกิดจากโฆษณาหรือไม่ ให้ลงทะเบียนใช้ GADBannerViewDelegate เมธอดเหล่านี้

หากต้องการตรวจจับงานนำเสนอซ้อนทับหรือการเรียกใช้เบราว์เซอร์ภายนอกทุกประเภท ไม่ใช่เฉพาะที่มาจากการคลิกโฆษณา แอปควรฟังวิธีการที่เทียบเท่าใน UIViewController หรือ UIApplication ได้ดีกว่า ตารางต่อไปนี้แสดงเมธอด iOS ที่เทียบเท่าซึ่งเรียกใช้พร้อมกันกับเมธอด GADBannerViewDelegate

การนับการแสดงผลด้วยตนเอง

คุณสามารถส่งคำสั่ง ping ของการแสดงผลไปยัง Ad Manager ด้วยตนเองได้หากคุณมีเงื่อนไขพิเศษว่าจะบันทึกการแสดงผลเมื่อใด ซึ่งจะทำได้โดยเปิดใช้ GAMBannerView สำหรับการแสดงผลด้วยตนเองก่อนโหลดโฆษณา โดยทำดังนี้

bannerView.enableManualImpressions = true

self.bannerView.enableManualImpressions = YES;

เมื่อคุณพิจารณาว่าโฆษณาแสดงสำเร็จและได้แสดงอยู่บนหน้าจอแล้ว คุณจะเริ่มการแสดงผลด้วยตนเองได้โดยทำดังนี้

bannerView.recordImpression()

[self.bannerView recordImpression];

เหตุการณ์ของแอป

กิจกรรมของแอปช่วยให้คุณสร้างโฆษณาที่ส่งข้อความไปยังโค้ดของแอปได้ จากนั้นแอปจะดำเนินการโดยอิงจากข้อความเหล่านี้ได้

คุณเฝ้าติดตามเหตุการณ์ในแอปเฉพาะของ Ad Manager ได้โดยใช้ GADAppEventDelegate เหตุการณ์เหล่านี้อาจเกิดขึ้นได้ทุกเมื่อในวงจรของโฆษณา แม้กระทั่งก่อนที่จะมีการเรียก bannerViewDidReceiveAd: ของออบเจ็กต์ GADBannerViewDelegate

// 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?)

// 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;

คุณใช้เมธอดเหตุการณ์ของแอปในตัวควบคุมการดูได้โดยทำดังนี้

import GoogleMobileAds

class ViewController: UIViewController, GADAppEventDelegate {
}

@import GoogleMobileAds;

@interface ViewController : UIViewController <GADAppEventDelegate> {
}

@end

อย่าลืมกำหนดผู้รับมอบสิทธิ์โดยใช้พร็อพเพอร์ตี้ appEventDelegate ก่อนที่จะส่งคำขอโฆษณา

bannerView.appEventDelegate = self

self.bannerView.appEventDelegate = self;

ต่อไปนี้คือตัวอย่างที่แสดงวิธีเปลี่ยนสีพื้นหลังของแอปโดยการระบุสีผ่านเหตุการณ์ในแอป

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
    }
  }
}

-   (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

Swift Objective-C

แหล่งข้อมูลเพิ่มเติม

ตัวอย่างใน GitHub

• ตัวอย่างโฆษณาแบนเนอร์แบบปรับขนาดได้แบบโฆษณา Anchor: Swift | Objective-C

• การสาธิตฟีเจอร์ขั้นสูง: Swift | Objective-C

ขั้นตอนถัดไป

แบนเนอร์แบบย่อได้

โฆษณาแบนเนอร์แบบย่อได้คือโฆษณาแบนเนอร์ที่แสดงก่อนเป็นภาพวางซ้อนขนาดใหญ่ พร้อมปุ่มเพื่อยุบโฆษณาให้มีขนาดเล็กลง ลองใช้รายงานนี้เพื่อเพิ่มประสิทธิภาพ ให้ดียิ่งขึ้นไปอีก ดูรายละเอียดเพิ่มเติมได้ที่โฆษณาแบนเนอร์แบบย่อได้

แบนเนอร์แทรกในบรรทัดที่ปรับเปลี่ยนได้

แบนเนอร์แทรกในบรรทัดที่ปรับเปลี่ยนได้คือแบนเนอร์ที่มีขนาดใหญ่และสูงกว่าเมื่อเทียบกับแบนเนอร์แบบปรับขนาดได้แบบยึดตำแหน่ง มีความสูงที่ไม่คงที่และสูงเท่ากับหน้าจอของอุปกรณ์ได้ ขอแนะนำให้ใช้แบนเนอร์แทรกในบรรทัดที่ปรับเปลี่ยนได้แทนโฆษณาแบนเนอร์แบบปรับขนาดได้แบบโฆษณา Anchor สำหรับแอปที่วางโฆษณาแบนเนอร์ไว้ในเนื้อหาที่เลื่อนได้ ดูรายละเอียดเพิ่มเติมได้ที่แบนเนอร์แบบปรับขนาดได้แบบแทรกในบรรทัด

สำรวจหัวข้ออื่นๆ

• ความเป็นส่วนตัวของผู้ใช้