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

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

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

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

แบนเนอร์แบบปรับขนาดได้แบบยึดพื้น

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

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

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

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

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

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

/21775744923/example/adaptive-banner

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

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

สร้าง GAMBannerView

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

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

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

Swift

// Initialize the BannerView.
bannerView = BannerView()

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),
])
BannerSnippets.swift

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)
  }
BannerContentView.swift

เพิ่ม UIViewRepresentable ลงในลําดับชั้นของมุมมอง โดยระบุค่า height และ width ดังนี้

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

Objective-C

// Initialize the GADBannerView.
self.bannerView = [[GADBannerView alloc] init];

self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:self.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
    [self.bannerView.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor],
    // Center the banner horizontally in the view
    [self.bannerView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
]];
BannerSnippets.m

Interface Builder

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

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

ตั้งค่าโครงสร้าง GADSize เป็นประเภทแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้โดยมีความกว้างที่ระบุ

Swift

// Request an anchored adaptive banner with a width of 375.
bannerView.adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
ViewController.swift

Objective-C

// Request an anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(375);
ViewController.m

โหลดโฆษณา

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

Swift

bannerView.load(AdManagerRequest())
ViewController.swift

SwiftUI

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

Objective-C

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

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

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

รีเฟรชโฆษณา

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

หมายเหตุ: เมื่อตั้งค่าอัตราการรีเฟรชใน UI ของ Ad Manager การรีเฟรชอัตโนมัติ จะเกิดขึ้นก็ต่อเมื่อแบนเนอร์ปรากฏบนหน้าจอเท่านั้น

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

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

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

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

Swift

bannerView.delegate = self
ViewController.swift

SwiftUI

banner.delegate = context.coordinator
BannerContentView.swift

Objective-C

self.bannerView.delegate = self;
ViewController.m

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

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

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  print(#function)
}

func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
  print(#function + ": " + error.localizedDescription)
}

func bannerViewDidRecordClick(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewDidRecordImpression(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewWillPresentScreen(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewWillDismissScreen(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewDidDismissScreen(_ bannerView: BannerView) {
  print(#function)
}
ViewController.swift

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");
}
ViewController.m

ดูตัวอย่าง Ad Delegate เพื่อดูการใช้งานเมธอด Banner 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: event เพื่อทําภาพเคลื่อนไหวโฆษณาแบนเนอร์ได้ 1 ครั้ง เมื่อได้รับโฆษณาแล้ว ดังที่แสดงในตัวอย่างต่อไปนี้

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

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

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

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

Swift

bannerView.enableManualImpressions = true

Objective-C

self.bannerView.enableManualImpressions = YES;

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

Swift

bannerView.recordImpression()

Objective-C

[self.bannerView recordImpression];

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

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

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

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

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: AdManagerBannerView,
    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, AppEventDelegate {}

Objective-C

@import GoogleMobileAds;

@interface ViewController : UIViewController <GADAppEventDelegate> {}

@end

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

Swift

bannerView.appEventDelegate = self

Objective-C

self.bannerView.appEventDelegate = self;

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

Swift

func bannerView(_ banner: AdManagerBannerView, 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

Swift Objective-C

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

ตัวอย่างใน GitHub

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

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

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

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

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

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

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

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

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