بومی پیشرفته

نمایش یک قالب تبلیغات بومی تعریف شده توسط سیستم

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

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

GADNativeAdView

برای GADNativeAd ، یک کلاس "ad view" مربوطه وجود دارد: GADNativeAdView . این کلاس مشاهده آگهی یک UIView است که ناشران باید از آن برای نمایش آگهی استفاده کنند. برای مثال، یک GADNativeAdView منفرد، می‌تواند یک نمونه از یک GADNativeAd را نمایش دهد. هر یک از اشیاء UIView که برای نمایش دارایی‌های آن تبلیغ استفاده می‌شوند باید زیرنماهای آن شی GADNativeAdView باشند.

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

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

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

همپوشانی AdChoices

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

انتساب آگهی

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

نمونه کد

بیایید نگاهی به نحوه نمایش تبلیغات بومی با استفاده از نماهایی که به صورت پویا از فایل‌های xib بارگذاری می‌شوند، بیاندازیم. این می تواند یک رویکرد بسیار مفید در هنگام استفاده از GADAdLoaders پیکربندی شده برای درخواست فرمت های متعدد باشد.

UIViws را بچینید

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

به مقدار Custom Class در سمت راست بالای تصویر توجه کنید. تنظیم شده است

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

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

رسانه ها را به بازدیدها پیوند دهید

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

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

نمایش آگهی

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

سویفت

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

یک مدل view ایجاد کنید

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

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

نما را به سلسله مراتب view اضافه کنید

کد زیر اضافه کردن UIViewRepresentable به سلسله مراتب view را نشان می دهد:

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

هدف-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;
}

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

مثال کامل در GitHub

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

مثال Swift Native Advanced مثال SwiftUI Native Ads Example Objective-C Native Advanced

GADMediaView

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

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

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

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

سویفت

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

هدف-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

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

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

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

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

سویفت

nativeAdView.mediaView?.contentMode = .aspectFill

هدف-C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

GADMediaContent

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

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

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

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

مراحل بعدی

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