ตั้งค่าโฆษณาแบนเนอร์

เลือกแพลตฟอร์ม: Android iOS Unity Flutter Android (เดิม)

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

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

ข้อกำหนดเบื้องต้น

ตั้งค่า Google Mobile Ads SDK ก่อนดำเนินการต่อ

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

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

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

/21775744923/example/adaptive-banner

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของโฆษณาทดสอบของ Google Mobile Ads SDK ได้ที่โฆษณาทดสอบ

สร้าง GAMBannerView

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

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

นอกจากนี้ยังสร้างอินสแตนซ์ GAMBannerView ได้โดยตรงด้วย ตัวอย่างต่อไปนี้จะสร้าง GAMBannerView

Swift

// Initialize the banner view.
bannerView = AdManagerBannerView()
bannerView.delegate = self

bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
NSLayoutConstraint.activate([
  // Align the banner's bottom edge with the safe area's bottom edge
  bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
  // Center the banner horizontally in the view
  bannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
])

SwiftUI

หากต้องการใช้ AdManagerBannerView ให้สร้าง UIViewRepresentable โดยทำดังนี้

private struct BannerViewContainer: UIViewRepresentable {
  typealias UIViewType = BannerView
  let adSize: AdSize

  init(_ adSize: AdSize) {
    self.adSize = adSize
  }

  func makeUIView(context: Context) -> BannerView {
    let banner = BannerView(adSize: adSize)
    banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
    banner.load(Request())
    banner.delegate = context.coordinator
    return banner
  }

  func updateUIView(_ uiView: BannerView, context: Context) {}

  func makeCoordinator() -> BannerCoordinator {
    return BannerCoordinator(self)
  }

เพิ่ม UIViewRepresentable ลงในลำดับชั้นการแสดงผล โดยระบุค่า height และ width ดังนี้

var body: some View {
  Spacer()
  // Request an anchored adaptive banner with a width of 375.
  let adSize = largeAnchoredAdaptiveBanner(width: 375)
  BannerViewContainer(adSize)
    .frame(width: adSize.size.width, height: adSize.size.height)
}

Objective-C

// Initialize the banner view.
GAMBannerView *bannerView = [[GAMBannerView alloc] init];
bannerView.delegate = self;
UIView *view = self.view;

bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[view addSubview:bannerView];

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
[NSLayoutConstraint activateConstraints:@[
  // Align the banner's bottom edge with the safe area's bottom edge
  [bannerView.bottomAnchor
      constraintEqualToAnchor:view.safeAreaLayoutGuide.bottomAnchor],
  // Center the banner horizontally in the view
  [bannerView.centerXAnchor constraintEqualToAnchor:view.centerXAnchor],
]];

self.bannerView = bannerView;

Interface Builder

คุณสามารถเพิ่ม GAMBannerView ลงในสตอรีบอร์ดหรือไฟล์ xib ได้ เมื่อใช้วิธีนี้ โปรดตรวจสอบว่าได้เพิ่มข้อจำกัดตำแหน่งในแบนเนอร์เท่านั้น เช่น เมื่อแสดงแบนเนอร์แบบปรับขนาดได้ที่ด้านล่างของหน้าจอ ให้ตั้งค่าด้านล่างของมุมมองแบนเนอร์ให้เท่ากับด้านบนของ Bottom Layout Guide และตั้งค่าข้อจำกัด centerX ให้เท่ากับ centerX ของ Superview

กำหนดขนาดโฆษณา

แบนเนอร์แบบปรับขนาดได้ขนาดใหญ่มีรูปแบบที่ใหญ่ขึ้นซึ่งออกแบบมาสำหรับเลย์เอาต์แบบไม่เลื่อน เมื่อเทียบกับแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้แบบมาตรฐาน แบนเนอร์เหล่านี้จะมีความสูงสูงสุดที่สูงกว่า (สูงสุด 20% ของความสูงของหน้าจอ ระหว่าง 50 ถึง 150 พอยต์) พื้นที่ที่เพิ่มขึ้นนี้ได้รับการเพิ่มประสิทธิภาพสำหรับเนื้อหาวิดีโอ

ตัวอย่างต่อไปนี้จะแสดงขนาดแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้ขนาดใหญ่

Swift

// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)

Objective-C

// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);

กำหนดขนาดโฆษณาให้เล็กกว่าหรือเท่ากับขนาดหน้าจอของอุปกรณ์ หากต้องการกำหนดขนาดหน้าจอสูงสุดใน iOS 26 ขึ้นไป ให้ใช้พร็อพเพอร์ตี้ UIWindowScene.effectiveGeometry.coordinateSpace ใน iOS 18 และเวอร์ชันก่อนหน้า ให้ใช้พร็อพเพอร์ตี้ UIWindowScene.coordinateSpace ดูรายละเอียดเกี่ยวกับข้อจำกัดด้านขนาดได้ที่แก้ปัญหาการแสดงผลที่ไม่ได้รับโฆษณาใน Ad Manager

โหลดโฆษณา

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

Swift

func loadBannerAd(bannerView: AdManagerBannerView) {
  // Request a large anchored adaptive banner with a width of 375.
  bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
  bannerView.load(AdManagerRequest())
}

SwiftUI

banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())

Objective-C

// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);

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

ออบเจ็กต์ GAMRequest แสดงถึงคำขอโฆษณาเดียว และมีพร็อพเพอร์ตี้สำหรับสิ่งต่างๆ เช่น ข้อมูลการกำหนดเป้าหมาย

รีเฟรชโฆษณา

หากคุณกำหนดค่าหน่วยโฆษณาให้รีเฟรช คุณไม่จำเป็นต้องขอโฆษณาอื่นเมื่อโฆษณาโหลดไม่สำเร็จ Google Mobile Ads SDK จะยึดตามอัตราการรีเฟรชที่คุณระบุไว้ใน UI ของ Ad Manager หากคุณไม่ได้เปิดใช้การรีเฟรช ให้ส่งคำขอใหม่ ดูรายละเอียดเพิ่มเติมเกี่ยวกับการรีเฟรชหน่วยโฆษณา เช่น การตั้งค่าอัตราการรีเฟรชได้ที่อัตราการรีเฟรชสำหรับโฆษณาในแอปบนอุปกรณ์เคลื่อนที่

จัดการการเปลี่ยนแปลงการวางแนว

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

Swift

override func viewWillTransition(
  to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator
) {
  coordinator.animate(alongsideTransition: { _ in
    // Load a new ad for the new orientation.
  })
}

Objective-C

- (void)viewWillTransitionToSize:(CGSize)size
       withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
  [coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
    // Load a new ad for the new orientation.
  } completion:nil];
}

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

คุณสามารถใช้ GADBannerViewDelegate เพื่อฟังเหตุการณ์ในวงจร เช่น เมื่อโฆษณาปิดลงหรือผู้ใช้ออกจากแอป

ลงทะเบียนสำหรับเหตุการณ์แบนเนอร์

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

Swift

bannerView.delegate = self

SwiftUI

banner.delegate = context.coordinator

Objective-C

bannerView.delegate = self;

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

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

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  print("Banner ad loaded.")
}

func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
  print("Banner ad failed to load: \(error.localizedDescription)")
}

func bannerViewDidRecordImpression(_ bannerView: BannerView) {
  print("Banner ad recorded an impression.")
}

func bannerViewDidRecordClick(_ bannerView: BannerView) {
  print("Banner ad recorded a click.")
}

func bannerViewWillPresentScreen(_ bannerView: BannerView) {
  print("Banner ad will present screen.")
}

func bannerViewWillDismissScreen(_ bannerView: BannerView) {
  print("Banner ad will dismiss screen.")
}

func bannerViewDidDismissScreen(_ bannerView: BannerView) {
  print("Banner ad did dismiss screen.")
}

Objective-C

- (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
  NSLog(@"bannerViewDidReceiveAd");
}

- (void)bannerView:(GAMBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
  NSLog(@"bannerView:didFailToReceiveAdWithError: %@", error.localizedDescription);
}

- (void)bannerViewDidRecordImpression:(GAMBannerView *)bannerView {
  NSLog(@"bannerViewDidRecordImpression");
}

- (void)bannerViewWillPresentScreen:(GAMBannerView *)bannerView {
  NSLog(@"bannerViewWillPresentScreen");
}

- (void)bannerViewWillDismissScreen:(GAMBannerView *)bannerView {
  NSLog(@"bannerViewWillDismissScreen");
}

- (void)bannerViewDidDismissScreen:(GAMBannerView *)bannerView {
  NSLog(@"bannerViewDidDismissScreen");
}

ดูตัวอย่าง Ad Delegate สำหรับการใช้งานเมธอดตัวแทนแบนเนอร์ในแอป iOS API Demo

Swift Objective-C

กรณีการใช้งาน

ตัวอย่างกรณีการใช้งานสำหรับเมธอดเหตุการณ์โฆษณาเหล่านี้มีดังนี้

เพิ่มแบนเนอร์ลงในลำดับชั้นการแสดงผลเมื่อได้รับโฆษณา

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

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  // Add banner to view and add constraints.
  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: BannerView) {
  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 ตารางต่อไปนี้แสดงเมธอด iOS ที่เทียบเท่าซึ่งเรียกใช้พร้อมกับเมธอด GADBannerViewDelegate

เมธอด GADBannerViewDelegate วิธีการสำหรับ iOS
bannerViewWillPresentScreen: viewWillDisappear: ของ UIViewController
bannerViewWillDismissScreen: viewWillAppear: ของ UIViewController
bannerViewDidDismissScreen: viewDidAppear: ของ UIViewController

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

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

Swift

bannerView.enableManualImpressions = true

Objective-C

self.bannerView.enableManualImpressions = YES;

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

Swift

bannerView.recordImpression()

Objective-C

[self.bannerView recordImpression];

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

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

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

Swift

// Set this property before making the request for an ad.
bannerView.appEventDelegate = self

Objective-C

// Set this property before making the request for an ad.
self.bannerView.appEventDelegate = self;

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

Swift

func bannerView(
  _ banner: AdManagerBannerView, didReceiveAppEvent name: String, withInfo info: String?
) {
  if name == "color" {
    if info == "green" {
      // Set background color to green.
      view.backgroundColor = UIColor.green
    } else if info == "blue" {
      // Set background color to blue.
      view.backgroundColor = UIColor.blue
    } else {
      // 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 Demo

Swift Objective-C

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

ตัวอย่างใน GitHub

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

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

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

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

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

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

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