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

เลือกแพลตฟอร์ม: Android ใหม่ Android iOS Unity Flutter

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

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

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

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

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

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

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

/21775744923/example/adaptive-banner

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

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

สร้าง 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 ลงใน Storyboard หรือไฟล์ xib ได้ เมื่อใช้วิธีนี้ โปรดตรวจสอบว่าได้เพิ่มข้อจำกัดด้านตำแหน่งในแบนเนอร์เท่านั้น ตัวอย่างเช่น เมื่อแสดงแบนเนอร์แบบปรับขนาดได้ที่ด้านล่างของหน้าจอ ให้ตั้งค่าด้านล่าง ของมุมมองแบนเนอร์ให้เท่ากับด้านบนของ Bottom Layout Guide และตั้งค่า centerX ข้อจำกัดให้เท่ากับ centerX ของ Superview

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

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

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

โหลดโฆษณา

เมื่อวาง 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");
}

ดูตัวอย่างผู้รับมอบสิทธิ์โฆษณาสำหรับการใช้เมธอดผู้รับมอบสิทธิ์แบนเนอร์ในแอป 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 เดโม

Swift Objective-C

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

ตัวอย่างใน GitHub

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

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

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

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

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

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

ดูหัวข้ออื่นๆ