نمایش آگهی بومی

پلاتفرم را انتخاب کنید: Android iOS Android (قدیمی)

نمایش قالب آگهی بومی تعریف‌شده توسط سیستم

وقتی آگهی بومی بار می‌شود، برنامه‌تان بااستفاده از یکی از پیام‌های پروتکل GADAdLoaderDelegate، شیء آگهی بومی را دریافت خواهد کرد. سپس برنامه شما مسئول نمایش آگهی است (هرچند لزوماً نباید این کار را فوراً انجام دهد). برای آسان‌تر کردن نمایش قالب‌های آگهی تعریف‌شده توسط سیستم، کیت توسعه نرم‌افزار چند منبع مفید ارائه می‌دهد.

نکته کلیدی: در کتاب راهنمای آگهی‌های بومی ما درباره آگهی‌های بومی بیشتر بدانید. همچنین، خط‌مشی‌ها و دستورالعمل‌های آگهی‌های بومی را برای راهنمایی درباره نحوه ارائه آگهی‌های بومی‌تان مرور کنید.

GADNativeAdView

برای GADNativeAd، کلاس «نمای آگهی» متناظری وجود دارد: GADNativeAdView. این کلاس نمای آگهی یک UIView است که ناشران باید برای نمایش آگهی از آن استفاده کنند. برای مثال، یک GADNativeAdView می‌تواند یک نمونه از GADNativeAd را نمایش دهد. هریک از اشیاء UIView که برای نمایش دارایی‌های آن آگهی استفاده می‌شود باید زیرنمای آن شیء GADNativeAdView باشد.

برای مثال، اگر آگهی‌ای را در UITableView نمایش می‌دادید، سلسله‌مراتب نمای یکی از سلول‌ها ممکن است این‌گونه باشد:

کلاس GADNativeAdView همچنین IBOutlets را ارائه می‌دهد که برای ثبت نمای استفاده‌شده برای هر دارایی جداگانه استفاده می‌شود، و روشی برای ثبت خود شیء GADNativeAd. ثبت نماها به این روش به کیت توسعه نرم‌افزار اجازه می‌دهد به‌طور خودکار تکالیفی مثل موارد زیر را انجام دهد:

• درحال ضبط کلیک‌ها.
• ثبت ظهورها (زمانی که اولین پیکسل در صفحه نمایان می‌شود).
• درحال نمایش رونهاد AdChoices.

رونهاد AdChoices

برای آگهی‌های بومی غیرمستقیم (که ازطریق رفع نواقص AdMob یا ازطریق Ad Exchange یا AdSense ارائه می‌شوند)، یک هم‌پوشانی AdChoices توسط کیت توسعه نرم‌افزار اضافه می‌شود. در گوشه دلخواه نمای آگهی بومی‌تان، فضایی برای نشان‌واره AdChoices که به‌طور خودکار درج می‌شود خالی بگذارید. همچنین، مطمئن شوید که رونهاد AdChoices روی محتوایی قرار داده شده است که اجازه می‌دهد نماد به‌وضوح دیده شود. برای اطلاعات بیشتر درباره ظاهر و عملکرد هم‌پوشانی، رهنمودهای پیاده‌سازی آگهی‌های بومی برنامه‌ای را ببینید.

ارجاع آگهی

هنگام نمایش آگهی‌های بومی برنامه‌ای، باید اسناد آگهی را نمایش دهید تا نشان دهید که این نما یک آگهی است.

نمونه کد

این بخش نحوه نمایش آگهی‌های بومی را بااستفاده از نماهای بارشده به‌صورت پویا از فایل‌های xib نشان می‌دهد. این رویکرد می‌تواند بسیار مفید باشد، به‌ویژه زمانی که از GADAdLoaders پیکربندی‌شده برای درخواست چندین قالب استفاده می‌شود.

چیدمان UIViews

اولین گام، چیدمان UIViews است که دارایی‌های آگهی بومی را نمایش خواهد داد. می‌توانید این کار را در Interface Builder انجام دهید، همان‌طور که هنگام ایجاد هر فایل xib دیگری انجام می‌دهید. در اینجا نحوه چیدمان برای آگهی بومی ممکن است به این شکل باشد:

به مقدار «کلاس سفارشی» در بالا سمت چپ تصویر توجه کنید. روی دمای زیر تنظیم شده است

GADNativeAdView. این کلاس نمای آگهی است که برای نمایش GADNativeAd استفاده می‌شود.

همچنین باید کلاس سفارشی را برای GADMediaView تنظیم کنید که برای نمایش ویدیو یا تصویر آگهی استفاده می‌شود.

پیوند دادن رسانه‌ها به نماها

وقتی نماها در جای خود قرار گرفتند و کلاس نمای آگهی صحیح را به چیدمان اختصاص دادید، خروجی‌های دارایی نمای آگهی را به UIViews که ایجاد کرده‌اید پیوند دهید. در اینجا نحوه پیوند دادن خروجی‌های دارایی نمای آگهی به UIViews ایجادشده برای آگهی آمده است:

در پانل خروجی، خروجی‌های GADNativeAdView به UIViews که در Interface Builder چیده شده است پیوند داده شده‌اند. این کار به کیت توسعه نرم‌افزار اطلاع می‌دهد که کدام UIView کدام دارایی را نمایش می‌دهد. همچنین مهم است به‌خاطر داشته باشید که این رسانه‌ها دیدگاه‌هایی را نشان می‌دهند که در آگهی قابل‌کلیک هستند.

نمایش آگهی

پس‌از تکمیل چیدمان و پیوند شدن خروجی‌ها، کد زیر را به برنامه‌تان اضافه کنید تا آگهی را پس‌از بار شدن نمایش دهد:

Swift

func adLoader(_ adLoader: AdLoader, didReceive nativeAd: NativeAd) {
  // ...

  // 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

  // Some native ads will include a video asset, while others do not. Apps can use the
  // GADVideoController's hasVideoContent property to determine if one is present, and adjust their
  // UI accordingly.
  let mediaContent = nativeAd.mediaContent
  if mediaContent.hasVideoContent {
    // By acting as the delegate to the GADVideoController, this ViewController receives messages
    // about events in the video lifecycle.
    mediaContent.videoController.delegate = self
    videoStatusLabel.text = "Ad contains a video asset."
  } else {
    videoStatusLabel.text = "Ad does not contain a video."
  }

  // 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 aspectRatioConstraint = NSLayoutConstraint(
      item: mediaView,
      attribute: .width,
      relatedBy: .equal,
      toItem: mediaView,
      attribute: .height,
      multiplier: CGFloat(nativeAd.mediaContent.aspectRatio),
      constant: 0)
    mediaView.addConstraint(aspectRatioConstraint)
    nativeAdView.layoutIfNeeded()
  }

  // 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(from: 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
}
ViewController.swift

SwiftUI

ایجاد مدل بازدید

مدل نمایشی ایجاد کنید که آگهی بومی را بار می‌کند و تغییرات داده‌های آگهی بومی را منتشر می‌کند:

import GoogleMobileAds

class NativeAdViewModel: NSObject, ObservableObject, NativeAdLoaderDelegate {
  @Published var nativeAd: NativeAd?
  private var adLoader: AdLoader!

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

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

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

ایجاد UIViewRepresentable

UIViewRepresentable برای NativeView ایجاد کنید و در تغییرات داده در کلاس ViewModel مشترک شوید:

private struct NativeAdViewContainer: UIViewRepresentable {
  typealias UIViewType = NativeAdView

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

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

  func updateUIView(_ nativeAdView: NativeAdView, 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) {
        // Updates when the native ad data changes.
        NativeAdViewContainer(nativeViewModel: nativeViewModel)
          .frame(minHeight: 300)  // minHeight determined from xib.
NativeContentView.swift

آبجکتیو-سی

- (void)adLoader:(GADAdLoader *)adLoader didReceiveNativeAd:(GADNativeAd *)nativeAd {
  // ...

  GADNativeAdView *nativeAdView = self.nativeAdView;

  // Set ourselves as the 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.
  ((UILabel *)nativeAdView.headlineView).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 content it displays.
  if (nativeAdView.mediaView != nil && nativeAd.mediaContent.aspectRatio > 0) {
    NSLayoutConstraint *aspectRatioConstraint =
        [NSLayoutConstraint constraintWithItem:nativeAdView.mediaView
                                     attribute:NSLayoutAttributeWidth
                                     relatedBy:NSLayoutRelationEqual
                                        toItem:nativeAdView.mediaView
                                     attribute:NSLayoutAttributeHeight
                                    multiplier:(nativeAd.mediaContent.aspectRatio)
                                      constant:0];
    [nativeAdView.mediaView addConstraint:aspectRatioConstraint];
    [nativeAdView layoutIfNeeded];
  }

  if (nativeAd.mediaContent.hasVideoContent) {
    // By acting as the delegate to the GADVideoController, this ViewController
    // receives messages about events in the video lifecycle.
    nativeAd.mediaContent.videoController.delegate = self;

    self.videoStatusLabel.text = @"Ad contains a video asset.";
  } else {
    self.videoStatusLabel.text = @"Ad does not contain a video.";
  }

  // 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.
  // Note: this should always be done after populating the ad views.
  nativeAdView.nativeAd = nativeAd;
}
ViewController.m

توجه: نمونه کد تعامل کاربر را برای دعوت به اقدام غیرفعال می‌کند UIButton. اگر از UIButtons برای نمایش دارایی‌های آگهی بومی استفاده می‌کنید، باید تعامل کاربر با آن‌ها را غیرفعال کنید تا Google Mobile Ads SDK بتواند به‌درستی رویدادهای میانای کاربر را دریافت و پردازش کند. به‌دلیل این مرحله اضافی، بهتر است دارایی‌های آگهی بومی را بااستفاده از UILabel و UIImageView نمایش دهید.

نمونه کامل در GitHub

با دنبال کردن پیوند GitHub مربوطه، نمونه کامل ادغام آگهی‌های بومی در Swift،‏ SwiftUI، و Objective-C را مشاهده کنید.

نمونه Swift Native Advanced نمونه SwiftUI Native Ads نمونه Objective-C Native Advanced

GADMediaView

نکته کلیدی: اگر می‌خواهید دارایی تصویر اصلی را در چیدمان آگهی بومی‌تان بگنجانید، باید به‌جای دارایی UIImageView از دارایی GADMediaView استفاده کنید.

دارایی‌های تصویری و ویدیویی بااستفاده از GADMediaView به کاربران نمایش داده می‌شود. این یک UIView است که می‌تواند در یک فایل xib تعریف شود یا به‌صورت پویا ساخته شود. این نما باید در سلسله‌مراتب نمای GADNativeAdView قرار گیرد، درست مانند هر نمای دارایی دیگری.

همانند همه نماهای دارایی، نمای رسانه باید محتوای خود را داشته باشد. این مورد بااستفاده از خصوصیت mediaContent در GADMediaView تنظیم می‌شود. ویژگی mediaContent GADNativeAd حاوی محتوای رسانه‌ای است که می‌تواند به GADMediaView منتقل شود.

در اینجا قطعه‌ای از نمونه Native Advanced (Swift | Objective-C) آورده شده است که نحوه پر کردن GADMediaView با دارایی‌های آگهی بومی را بااستفاده از GADMediaContent از GADNativeAd نشان می‌دهد:

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
ViewController.swift

آبجکتیو-سی

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;
ViewController.m

مطمئن شوید که در فایل سازنده میانای خود برای نمای آگهی بومی، کلاس سفارشی نماها را روی GADMediaView تنظیم کرده‌اید و آن را به خروجی mediaView متصل کرده‌اید.

تغییر حالت محتوای تصویر

کلاس GADMediaView هنگام نمایش تصاویر، به ویژگی contentMode UIView احترام می‌گذارد. اگر می‌خواهید نحوه مقیاس‌بندی تصویر را در GADMediaView تغییر دهید، UIViewContentMode مربوطه را در ویژگی contentMode از GADMediaView تنظیم کنید تا به این هدف برسید.

برای مثال، برای پر کردن GADMediaView وقتی تصویری نمایش داده می‌شود (آگهی ویدیو ندارد):

Swift

nativeAdView.mediaView?.contentMode = .scaleAspectFit
NativeAdSnippets.swift

آبجکتیو-سی

nativeAdView.mediaView.contentMode = UIViewContentModeScaleAspectFit;
NativeAdSnippets.m

GADMediaContent

کلاس GADMediaContent داده‌های مربوط به محتوای رسانه‌ای آگهی بومی را نگه می‌دارد که بااستفاده از کلاس GADMediaView نمایش داده می‌شود. وقتی روی خصوصیت GADMediaView mediaContent تنظیم شده باشد:

• اگر دارایی ویدیویی دردسترس باشد، میان‌گیری می‌شود و پخش آن در GADMediaView شروع می‌شود. با بررسی hasVideoContent می‌توانید ببینید دارایی ویدیویی دردسترس است یا نه.

• اگر آگهی حاوی دارایی ویدیویی نباشد، دارایی mainImage بارگیری می‌شود و به‌جای آن در GADMediaView قرار می‌گیرد.

نکته کلیدی: به‌طور پیش‌فرض، mainImage اولین دارایی تصویری بارگیری‌شده است. اگر از disableImageLoading استفاده شود، mainImage nil است و باید این ویژگی را برای تصویر بارگیری‌شده دستی‌تان تنظیم کنید. توجه داشته باشید که این تصویر فقط زمانی استفاده خواهد شد که هیچ دارایی ویدیویی دردسترس نباشد.

مراحل بعدی

درباره حریم خصوصی کاربر بیشتر بدانید.