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

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

เมื่อโฆษณาเนทีฟโหลด แอปของคุณจะได้รับออบเจ็กต์โฆษณาเนทีฟผ่านข้อความโปรโตคอลอย่างใดอย่างหนึ่งของ 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)")
  }
}

สร้าง 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
  }

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

โค้ดต่อไปนี้แสดงการเพิ่ม 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.

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

ตัวอย่างที่สมบูรณ์ใน 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 แทน

เท่านั้น

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

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