หน้านี้ได้รับการแปลโดย Cloud Translation API

เนทีฟขั้นสูง

การแสดงโฆษณาเนทีฟที่ระบบกําหนด

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

GADNativeAdView

สําหรับ GADNativeAd จะมี "การดูโฆษณา" คลาส GADNativeAdView ที่เกี่ยวข้อง คลาสการแสดงโฆษณานี้เป็น UIView ที่ผู้เผยแพร่โฆษณาควรใช้เพื่อแสดงโฆษณา ตัวอย่างเช่น GADNativeAdView รายการเดียวจะแสดง GADNativeAd รายการเดียว ออบเจ็กต์ UIView แต่ละรายการที่ใช้เพื่อแสดงเนื้อหาโฆษณานั้นควรเป็นมุมมองย่อยของออบเจ็กต์ GADNativeAdView ดังกล่าว

เช่น หากคุณกำลังแสดงโฆษณาใน UITableView ลำดับชั้นการดูของเซลล์ใดเซลล์หนึ่งอาจมีลักษณะดังนี้

คลาส GADNativeAdView ยังมี IBOutlets ที่ใช้เพื่อลงทะเบียนมุมมองที่ใช้สำหรับแต่ละชิ้นงาน และวิธีการลงทะเบียนออบเจ็กต์ GADNativeAd เองด้วย การลงทะเบียนมุมมองด้วยวิธีนี้ช่วยให้ SDK จัดการงานต่างๆ เช่น

กำลังบันทึกการคลิก
การบันทึกการแสดงผล (เมื่อมองเห็นพิกเซลแรกบนหน้าจอ)
การแสดงการวางซ้อน "ตัวเลือกโฆษณาอื่นๆ"

การวางซ้อนตัวเลือกโฆษณาอื่นๆ

สําหรับโฆษณาเนทีฟโดยอ้อม (แสดงผ่านโฆษณาทดแทนของ AdMob หรือผ่าน Ad Exchange หรือ AdSense) SDK จะเพิ่มการวางซ้อน AdChoices เว้นพื้นที่ในมุมที่ต้องการของมุมมองโฆษณาเนทีฟไว้สําหรับโลโก้ "ตัวเลือกโฆษณาอื่นๆ" ที่ระบบจะแทรกให้โดยอัตโนมัติ นอกจากนี้ โปรดดูให้แน่ใจว่าการวางซ้อนตัวเลือกโฆษณาอื่นๆ อยู่บนเนื้อหาที่ทำให้มองเห็นไอคอนได้ง่าย ดูข้อมูลเพิ่มเติมเกี่ยวกับลักษณะและฟังก์ชันของการวางซ้อนได้ที่หลักเกณฑ์การติดตั้งใช้งานโฆษณาเนทีฟแบบตามโปรแกรม

การระบุแหล่งที่มาของโฆษณา

เมื่อแสดงโฆษณาเนทีฟแบบเป็นโปรแกรม คุณต้องแสดงการระบุแหล่งที่มาของโฆษณาเพื่อบ่งบอกว่าการแสดงผลนั้นเป็นโฆษณา

ตัวอย่างโค้ด

มาดูวิธีแสดงโฆษณาเนทีฟโดยใช้มุมมองที่โหลดแบบไดนามิกจากไฟล์ xib วิธีนี้มีประโยชน์อย่างยิ่งเมื่อใช้ GADAdLoaders ที่กําหนดค่าให้ขอหลายรูปแบบ

จัดวาง UIView

ขั้นตอนแรกคือวางเลย์เอาต์ UIViews ที่จะแสดงชิ้นงานโฆษณาเนทีฟ ซึ่งทำได้ใน Interface Builder เช่นเดียวกับการสร้างไฟล์ xib อื่นๆ เลย์เอาต์สำหรับโฆษณาเนทีฟ จะมีลักษณะดังนี้

โปรดดูค่าคลาสที่กำหนดเองที่ด้านขวาบนของรูปภาพ ตั้งค่าเป็น

GADNativeAdView นี่คือคลาสมุมมองโฆษณาที่ใช้แสดง GADNativeAd

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

ลิงก์เต้ารับกับมุมมอง

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

ในแผงเต้ารับ เต้ารับใน GADNativeAdView ลิงก์กับ UIViews ที่วางไว้ใน Interface Builder แล้ว ซึ่งช่วยให้ SDK ทราบว่า UIView รายการใดแสดงชิ้นงานใด นอกจากนี้ โปรดทราบว่าช่องทางเหล่านี้แสดงยอดดูที่คลิกได้ในโฆษณา

แสดงโฆษณา

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

Swift

// Mark: - GADNativeAdLoaderDelegate
func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADNativeAd) {
  print("Received native ad: \(nativeAd)")
  refreshAdButton.isEnabled = true
  // Create and place ad in view hierarchy.
  let nibView = Bundle.main.loadNibNamed("NativeAdView", owner: nil, options: nil)?.first
  guard let nativeAdView = nibView as? GADNativeAdView else {
    return
  }
  setAdView(nativeAdView)

  // Set ourselves as the native ad delegate to be notified of native ad events.
  nativeAd.delegate = self

  // Populate the native ad view with the native ad assets.
  // The headline and mediaContent are guaranteed to be present in every native ad.
  (nativeAdView.headlineView as? UILabel)?.text = nativeAd.headline
  nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

  // This app uses a fixed width for the GADMediaView and changes its height to match the aspect
  // ratio of the media it displays.
  if let mediaView = nativeAdView.mediaView, nativeAd.mediaContent.aspectRatio > 0 {
    let heightConstraint = NSLayoutConstraint(
      item: mediaView,
      attribute: .height,
      relatedBy: .equal,
      toItem: mediaView,
      attribute: .width,
      multiplier: CGFloat(1 / nativeAd.mediaContent.aspectRatio),
      constant: 0)
    heightConstraint.isActive = true
  }

  // These assets are not guaranteed to be present. Check that they are before
  // showing or hiding them.
  (nativeAdView.bodyView as? UILabel)?.text = nativeAd.body
  nativeAdView.bodyView?.isHidden = nativeAd.body == nil

  (nativeAdView.callToActionView as? UIButton)?.setTitle(nativeAd.callToAction, for: .normal)
  nativeAdView.callToActionView?.isHidden = nativeAd.callToAction == nil

  (nativeAdView.iconView as? UIImageView)?.image = nativeAd.icon?.image
  nativeAdView.iconView?.isHidden = nativeAd.icon == nil

  (nativeAdView.starRatingView as? UIImageView)?.image = imageOfStars(
    fromStarRating: nativeAd.starRating)
  nativeAdView.starRatingView?.isHidden = nativeAd.starRating == nil

  (nativeAdView.storeView as? UILabel)?.text = nativeAd.store
  nativeAdView.storeView?.isHidden = nativeAd.store == nil

  (nativeAdView.priceView as? UILabel)?.text = nativeAd.price
  nativeAdView.priceView?.isHidden = nativeAd.price == nil

  (nativeAdView.advertiserView as? UILabel)?.text = nativeAd.advertiser
  nativeAdView.advertiserView?.isHidden = nativeAd.advertiser == nil

  // For the SDK to process touch events properly, user interaction should be disabled.
  nativeAdView.callToActionView?.isUserInteractionEnabled = false

  // Associate the native ad view with the native ad object. This is
  // required to make the ad clickable.
  // Note: this should always be done after populating the ad views.
  nativeAdView.nativeAd = nativeAd
}

SwiftUI

สร้างโมเดลการแสดงผล

สร้างโมเดลข้อมูลพร็อพเพอร์ตี้ที่โหลดโฆษณาเนทีฟ และเผยแพร่การเปลี่ยนแปลงของข้อมูลโฆษณาเนทีฟ

import GoogleMobileAds

class NativeAdViewModel: NSObject, ObservableObject, GADNativeAdLoaderDelegate {
  @Published var nativeAd: GADNativeAd?
  private var adLoader: GADAdLoader!

  func refreshAd() {
    adLoader = GADAdLoader(
      adUnitID: "ca-app-pub-3940256099942544/3986624511",
      // The UIViewController parameter is optional.
      rootViewController: nil,
      adTypes: [.native], options: nil)
    adLoader.delegate = self
    adLoader.load(GADRequest())
  }

  func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADNativeAd) {
    // Native ad data changes are published to its subscribers.
    self.nativeAd = nativeAd
    nativeAd.delegate = self
  }

  func adLoader(_ adLoader: GADAdLoader, didFailToReceiveAdWithError error: Error) {
    print("\(adLoader) failed with error: \(error.localizedDescription)")
  }
}NativeAdViewModel.swift

สร้าง UIViewRepresentable

สร้าง UIViewRepresentable สำหรับ GADNativeView และสมัครรับการเปลี่ยนแปลงข้อมูลในคลาส ViewModel ดังนี้

private struct NativeAdView: UIViewRepresentable {
  typealias UIViewType = GADNativeAdView

  // Observer to update the UIView when the native ad value changes.
  @ObservedObject var nativeViewModel: NativeAdViewModel

  func makeUIView(context: Context) -> GADNativeAdView {
    return
      Bundle.main.loadNibNamed(
        "NativeAdView",
        owner: nil,
        options: nil)?.first as! GADNativeAdView
  }

  func updateUIView(_ nativeAdView: GADNativeAdView, context: Context) {
    guard let nativeAd = nativeViewModel.nativeAd else { return }

    // Each UI property is configurable using your native ad.
    (nativeAdView.headlineView as? UILabel)?.text = nativeAd.headline

    nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

    (nativeAdView.bodyView as? UILabel)?.text = nativeAd.body

    (nativeAdView.iconView as? UIImageView)?.image = nativeAd.icon?.image

    (nativeAdView.starRatingView as? UIImageView)?.image = imageOfStars(from: nativeAd.starRating)

    (nativeAdView.storeView as? UILabel)?.text = nativeAd.store

    (nativeAdView.priceView as? UILabel)?.text = nativeAd.price

    (nativeAdView.advertiserView as? UILabel)?.text = nativeAd.advertiser

    (nativeAdView.callToActionView as? UIButton)?.setTitle(nativeAd.callToAction, for: .normal)

    // For the SDK to process touch events properly, user interaction should be disabled.
    nativeAdView.callToActionView?.isUserInteractionEnabled = false

    // Associate the native ad view with the native ad object. This is required to make the ad
    // clickable.
    // Note: this should always be done after populating the ad views.
    nativeAdView.nativeAd = nativeAd
  }NativeContentView.swift

เพิ่มมุมมองลงในลําดับชั้นของมุมมอง

โค้ดต่อไปนี้แสดงการเพิ่ม UIViewRepresentable ลงในลําดับชั้นของมุมมอง

struct NativeContentView: View {
  // Single source of truth for the native ad data.
  @StateObject private var nativeViewModel = NativeAdViewModel()

  var body: some View {
    ScrollView {
      VStack(spacing: 20) {
        NativeAdView(nativeViewModel: nativeViewModel)  // Updates when the native ad data changes.
          .frame(minHeight: 300)  // minHeight determined from xib.NativeContentView.swift

Objective-C

#pragma mark GADNativeAdLoaderDelegate implementation

- (void)adLoader:(GADAdLoader *)adLoader didReceiveNativeAd:(GADNativeAd *)nativeAd {
  NSLog(@"Received native ad: %@", nativeAd);
  self.refreshButton.enabled = YES;

  // Create and place ad in view hierarchy.
  GADNativeAdView *nativeAdView =
      [[NSBundle mainBundle] loadNibNamed:@"NativeAdView" owner:nil options:nil].firstObject;
  [self setAdView:nativeAdView];

  // Set the mediaContent on the GADMediaView to populate it with available
  // video/image asset.
  nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

  // Populate the native ad view with the native ad assets.
  // The headline is present in every native ad.
  ((UILabel *)nativeAdView.headlineView).text = nativeAd.headline;

  // These assets are not guaranteed to be present. Check that they are before
  // showing or hiding them.
  ((UILabel *)nativeAdView.bodyView).text = nativeAd.body;
  nativeAdView.bodyView.hidden = nativeAd.body ? NO : YES;

  [((UIButton *)nativeAdView.callToActionView)setTitle:nativeAd.callToAction
                                              forState:UIControlStateNormal];
  nativeAdView.callToActionView.hidden = nativeAd.callToAction ? NO : YES;

    ((UIImageView *)nativeAdView.iconView).image = nativeAd.icon.image;
  nativeAdView.iconView.hidden = nativeAd.icon ? NO : YES;

  ((UIImageView *)nativeAdView.starRatingView).image = [self imageForStars:nativeAd.starRating];
  nativeAdView.starRatingView.hidden = nativeAd.starRating ? NO : YES;

  ((UILabel *)nativeAdView.storeView).text = nativeAd.store;
  nativeAdView.storeView.hidden = nativeAd.store ? NO : YES;

  ((UILabel *)nativeAdView.priceView).text = nativeAd.price;
  nativeAdView.priceView.hidden = nativeAd.price ? NO : YES;

  ((UILabel *)nativeAdView.advertiserView).text = nativeAd.advertiser;
  nativeAdView.advertiserView.hidden = nativeAd.advertiser ? NO : YES;

  // In order for the SDK to process touch events properly, user interaction
  // should be disabled.
  nativeAdView.callToActionView.userInteractionEnabled = NO;

  // Associate the native ad view with the native ad object. This is
  // required to make the ad clickable.
  nativeAdView.nativeAd = nativeAd;
}

หมายเหตุ: ตัวอย่างโค้ดจะปิดใช้การโต้ตอบของผู้ใช้สําหรับคำกระตุ้นให้ดำเนินการ (Call-To-Action) UIButton หากใช้ UIButtons เพื่อแสดงชิ้นงานโฆษณาเนทีฟ คุณต้องปิดใช้การโต้ตอบของผู้ใช้เพื่อให้ SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google ได้รับและประมวลผลเหตุการณ์ UI อย่างถูกต้อง ขั้นตอนเพิ่มเติมนี้ทำให้คุณควรแสดงชิ้นงานโฆษณาเนทีฟโดยใช้ UILabel และ UIImageView แทน

ตัวอย่างที่สมบูรณ์ใน GitHub

ดูตัวอย่างการผสานรวมโฆษณาเนทีฟใน Swift, SwiftUI และ Objective-C ทั้งหมดได้โดยไปที่ลิงก์ GitHub ที่เกี่ยวข้อง

ตัวอย่างขั้นสูงของโฆษณาเนทีฟ Swift ตัวอย่างโฆษณาเนทีฟ SwiftUI ตัวอย่างขั้นสูงของโฆษณาเนทีฟ Objective-C

GADMediaView

เนื้อหารูปภาพและวิดีโอแสดงต่อผู้ใช้ผ่าน GADMediaView นี่คือ UIView ที่กําหนดได้ในไฟล์ xib หรือสร้างแบบไดนามิก โดยควรวางไว้ในลําดับชั้นมุมมองของ GADNativeAdView เช่นเดียวกับมุมมองชิ้นงานอื่นๆ

มุมมองสื่อต้องมีการป้อนข้อมูลเนื้อหาเช่นเดียวกับมุมมองชิ้นงานทั้งหมด ซึ่งตั้งค่าโดยใช้พร็อพเพอร์ตี้ mediaContent ใน GADMediaView พร็อพเพอร์ตี้ mediaContent ของ GADNativeAd มีเนื้อหาสื่อที่ส่งไปยัง GADMediaView ได้

ต่อไปนี้คือตัวอย่างข้อมูลโค้ดจากตัวอย่างเนทีฟขั้นสูง (Swift | Objective-C) ที่แสดงวิธีป้อนข้อมูล GADMediaView ด้วยชิ้นงานโฆษณาเนทีฟโดยใช้ GADMediaContent จาก GADNativeAd

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

ตรวจสอบว่าได้ตั้งค่าคลาสที่กําหนดเองของมุมมองเป็น GADMediaView ในไฟล์เครื่องมือสร้างอินเทอร์เฟซสําหรับมุมมองโฆษณาเนทีฟ และเชื่อมต่อกับเอาต์เล็ต mediaView แล้ว

การเปลี่ยนโหมดเนื้อหารูปภาพ

คลาส GADMediaView จะเป็นไปตามพร็อพเพอร์ตี้ UIView contentMode เมื่อแสดงรูปภาพ หากต้องการเปลี่ยนวิธีปรับขนาดรูปภาพใน GADMediaView ให้ตั้งค่า UIViewContentMode ที่เกี่ยวข้องในพร็อพเพอร์ตี้ contentMode ของ GADMediaView

ตัวอย่างเช่น หากต้องการกรอก GADMediaView เมื่อรูปภาพแสดง (โฆษณาไม่มีวิดีโอ) ให้ทำดังนี้

Swift

nativeAdView.mediaView?.contentMode = .aspectFill

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

GADMediaContent

คลาส GADMediaContent จะเก็บข้อมูลที่เกี่ยวข้องกับเนื้อหาสื่อของโฆษณาเนทีฟ ซึ่งแสดงโดยใช้คลาส GADMediaView เมื่อตั้งค่าในพร็อพเพอร์ตี้ GADMediaView mediaContent

หากชิ้นงานวิดีโอพร้อมใช้งาน ระบบจะบัฟเฟอร์และเริ่มเล่นชิ้นงานภายในGADMediaView คุณจะทราบได้ว่าเนื้อหาวิดีโอพร้อมใช้งานหรือไม่โดยตรวจสอบ hasVideoContent
หากโฆษณาไม่มีชิ้นงานวิดีโอ ระบบจะดาวน์โหลดชิ้นงาน mainImage และวางไว้ภายใน GADMediaView แทน

เท่านั้น

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับความเป็นส่วนตัวของผู้ใช้