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

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

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

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

การดูโฆษณา GAD

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

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

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

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

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

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

การระบุว่าเป็นโฆษณา

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

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

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

การจัดวาง UIView

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

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

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

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

การลิงก์ปลั๊กไฟเข้ากับข้อมูลพร็อพเพอร์ตี้

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

ในแผงช่องทาง เต้ารับใน GADNativeAdView ได้ลิงก์กับ UIViews ที่วางไว้ในตัวสร้างอินเทอร์เฟซ เพื่อให้ 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

  // 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 ที่แสดงคํากระตุ้นการตัดสินใจ หากใช้ UIButtons เพื่อแสดงองค์ประกอบโฆษณาเนทีฟ คุณจะต้องปิดใช้การโต้ตอบของผู้ใช้ด้วย เพื่อให้ SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google รับและประมวลผลเหตุการณ์ UI ได้อย่างเหมาะสม เนื่องจากขั้นตอนเพิ่มเติมนี้ คุณจึงควรหลีกเลี่ยง UIButtons ทั้งหมด แล้วใช้ UILabel และ UIImageView แทน

ที่เก็บ GitHub ของเรามีการติดตั้งใช้งานโดยสมบูรณ์สําหรับโฆษณาเนทีฟขั้นสูง ที่เขียนขึ้นทั้งใน Swift และ Objective-C

ดาวน์โหลดตัวอย่างเนทีฟขั้นสูง

มุมมอง GADMedia

ประเด็นหลัก: คุณต้องใช้เนื้อหา 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;

เนื้อหา GADMedia

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

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

• หากโฆษณาไม่มีเนื้อหาวิดีโอ ระบบจะดาวน์โหลดชิ้นงาน mainImage และวางใน GADMediaView แทน

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

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

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