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

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

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

ประเด็นสำคัญ: อ่านหลักเกณฑ์และนโยบายโฆษณาเนทีฟ เพื่อดูแนวทางในการแสดงโฆษณาเนทีฟ

GADNativeAdView

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

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

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

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

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

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

หมายเหตุ: ตัวเลือกโฆษณาอื่นๆ จะแสดงในโฆษณาแบบขายตรงใน EEA เท่านั้น

การระบุแหล่งที่มาของโฆษณาสำหรับโฆษณาเนทีฟแบบเป็นโปรแกรม

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

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

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

การจัดวาง UIView

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

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

GADNativeAdView นี่คือคลาสการดูโฆษณาที่ใช้เพื่อแสดง GADNativeAd

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

การลิงก์ร้านค้ากับยอดดู

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

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

การแสดงโฆษณา

เคล็ดลับ: ดูวิธีแสดงโฆษณาเนทีฟโดยใช้ SwiftUI

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

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

  // In order 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
}

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 guaranteed to be 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;
}

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

ที่เก็บ GitHub ของเรามีวิธีใช้งาน โฆษณา Display ที่กำหนดเองแบบเนทีฟ ทั้งหมดที่เขียนทั้งใน Swift และ Objective-C

ดาวน์โหลดตัวอย่างการแสดงผลที่กำหนดเองของ Google Ad Manager

GADMediaView

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

ชิ้นงานรูปภาพและวิดีโอจะแสดงต่อผู้ใช้ผ่าน 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 แทน

ประเด็นหลัก: โดยค่าเริ่มต้น mainImage คือชิ้นงานรูปภาพที่ดาวน์โหลดรายการแรก หากใช้ disableImageLoading ค่า mainImage จะเป็น nil และคุณควรตั้งค่าพร็อพเพอร์ตี้นี้เป็นรูปภาพที่ดาวน์โหลดด้วยตนเอง โปรดทราบว่ารูปภาพนี้จะใช้ก็ต่อเมื่อไม่มีชิ้นงานวิดีโอเท่านั้น

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

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