عرض إعلان مدمج مع المحتوى

اختيار النظام الأساسي: Android Android iOS

عرض شكل إعلان مدمج مع المحتوى محدّد من قِبل النظام

عند تحميل إعلان مدمج مع المحتوى، سيتلقّى تطبيقك عنصر إعلان مدمج مع المحتوى باستخدام إحدى رسائل بروتوكول GADAdLoaderDelegate. بعد ذلك، يكون تطبيقك مسؤولاً عن عرض الإعلان (على الرغم من أنّه ليس بالضرورة أن يعرضه على الفور). لتسهيل عرض أشكال الإعلانات المحدّدة من قِبل النظام، توفّر حزمة تطوير البرامج (SDK) بعض المراجع المفيدة.

ملاحظة مهمة: مزيد من المعلومات عن الإعلانات المدمجة مع المحتوى في دليل الإعلانات المدمجة مع المحتوى. راجِع أيضًا سياسات وإرشادات الإعلانات المدمجة مع المحتوى للحصول على إرشادات حول كيفية عرض إعلاناتك المدمجة مع المحتوى.

GADNativeAdView

بالنسبة إلى GADNativeAd، هناك فئة "مشاهدة الإعلان" مقابلة: GADNativeAdView. فئة عرض الإعلان هذه هي UIView يجب أن يستخدمها الناشرون لعرض الإعلان. يمكن أن يعرض GADNativeAdView واحد، على سبيل المثال، مثيلاً واحدًا من GADNativeAd. يجب أن تكون كل كائنات UIView المستخدَمة لعرض مواد عرض هذا الإعلان طرق عرض فرعية لكائن GADNativeAdView هذا.

إذا كنت تعرض إعلانًا في UITableView، على سبيل المثال، قد تبدو هيكلية طرق العرض لإحدى الخلايا على النحو التالي:

توفر الفئة GADNativeAdView أيضًا IBOutlets المستخدمة لتسجيل طريقة العرض المستخدمة لكل مادة عرض فردية، وطريقة لتسجيل GADNativeAd الكائن نفسه. يسمح تسجيل طرق العرض بهذه الطريقة لحزمة تطوير البرامج (SDK) بالتعامل تلقائيًا مع مهام مثل:

• تسجيل النقرات
• تسجيل مرّات الظهور (عند ظهور أول بكسل على الشاشة)
• عرض تراكب "خيارات الإعلان"

تراكب "خيارات الإعلان"

بالنسبة إلى الإعلانات المدمجة مع المحتوى غير المباشرة (التي يتم عرضها من خلال تعبئة AdMob أو من خلال Ad Exchange أو AdSense)، تضيف حزمة تطوير البرامج (SDK) تراكب "خيارات الإعلان". اترك مساحة في الزاوية المفضّلة من طريقة عرض الإعلان المدمج مع المحتوى لعرض شعار "خيارات الإعلان" الذي يتم إدراجه تلقائيًا. وتأكَّد أيضًا من وضع تراكب "خيارات الإعلان" فوق محتوى يسمح بسهولة مشاهدة الرمز. لمزيد من المعلومات عن مظهر التراكب ووظيفته، اطّلِع على إرشادات تنفيذ الإعلانات المدمجة مع المحتوى التي يتم عرضها آليًا.

التصنيف كإعلان

عند عرض إعلانات مدمجة مع المحتوى يتم عرضها آليًا، يجب عرض تصنيف للإعلان للإشارة إلى أنّ طريقة العرض هي إعلان.

مثال للرمز

يوضّح هذا القسم كيفية عرض الإعلانات المدمجة مع المحتوى باستخدام طرق عرض يتم تحميلها ديناميكيًا من ملفات xib. يمكن أن يكون هذا النهج مفيدًا جدًا عند استخدام GADAdLoaders تم ضبطها لطلب أشكال متعدّدة.

تخطيط UIViews

الخطوة الأولى هي تخطيط UIViews التي ستعرض مواد عرض الإعلانات المدمجة مع المحتوى. يمكنك إجراء ذلك في Interface Builder كما تفعل عند إنشاء أي ملف xib آخر. إليك كيف قد يبدو تنسيق إعلان مدمج مع المحتوى:

لاحظ قيمة "الفئة المخصّصة" في أعلى يسار الصورة. تم ضبطها على

GADNativeAdView. هذه هي فئة عرض الإعلان التي تُستخدَم لعرض GADNativeAd.

عليك أيضًا ضبط الفئة المخصّصة لـ GADMediaView، التي تُستخدَم لعرض الفيديو أو الصورة للإعلان.

ربط المنافذ بطرق العرض

بعد وضع طرق العرض وتعيين فئة عرض الإعلان الصحيحة للتنسيق، اربط منافذ مواد عرض الإعلان بـ UIViews التي أنشأتها. إليك كيفية ربط منافذ مواد عرض الإعلان بـ UIViews التي تم إنشاؤها لإعلان:

في لوحة المنفذ، تم ربط المنافذ في GADNativeAdView بـ UIViews التي تم تخطيطها في Interface Builder. يسمح ذلك لحزمة تطوير البرامج (SDK) بمعرفة 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

Objective-C

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

يمكنك الاطّلاع على المثال الكامل لدمج الإعلانات المدمجة مع المحتوى في Swift وSwiftUI وObjective-C من خلال اتّباع رابط GitHub المعنيّ.

Swift Native Advanced Example SwiftUI Native Ads Example Objective-C Native Advanced Example

GADMediaView

ملاحظة مهمة: عليك استخدام مادة عرض GADMediaView بدلاً من مادة عرض UIImageView إذا أردت تضمين مادة عرض صورة رئيسية في تنسيق إعلانك المدمج مع المحتوى.

يتم عرض مواد عرض الصور والفيديو للمستخدِمين باستخدام 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

Objective-C

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

تأكَّد من أنّك في ملف أداة إنشاء الواجهة لطريقة عرض الإعلان المدمج مع المحتوى قد ضبطت الفئة المخصّصة لطرق العرض على GADMediaView وربطتها بمنفذ mediaView.

تغيير وضع محتوى الصورة

تحترم الفئة GADMediaView السمة UIView contentMode عند عرض الصور. إذا أردت تغيير كيفية تغيير حجم صورة في الـ GADMediaView، اضبط المقابل UIViewContentMode على السمة contentMode في الـ GADMediaView لتحقيق ذلك.

على سبيل المثال، لملء GADMediaView عند عرض صورة (لا يحتوي الإعلان على فيديو):

Swift

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

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeScaleAspectFit;
NativeAdSnippets.m

GADMediaContent

تحتوي فئة GADMediaContent على البيانات ذات الصلة بمحتوى الوسائط للإعلان المدمج مع المحتوى، والذي يتم عرضه باستخدام فئة GADMediaView. عند ضبطها على السمة mediaContent في GADMediaView:

• إذا كانت مادة عرض فيديو متاحة، يتم تخزينها مؤقتًا ويبدأ تشغيلها داخل GADMediaView. يمكنك معرفة ما إذا كانت مادة عرض فيديو متاحة من خلال التحقّق من hasVideoContent.

• إذا لم يكن الإعلان يحتوي على مادة عرض فيديو، يتم تنزيل مادة العرض mainImage ووضعها داخل GADMediaView بدلاً من ذلك.

ملاحظة مهمة: تكون mainImage هي أول مادة عرض صورة يتم تنزيلها تلقائيًا. إذا تم استخدام disableImageLoading، تكون قيمة mainImage هي nil وعليك ضبط هذه السمة على الصورة التي تم تنزيلها يدويًا. يُرجى العِلم أنّ هذه الصورة لن تُستخدَم إلا عندما لا تكون مادة عرض فيديو متاحة.

الخطوات التالية

مزيد من المعلومات عن خصوصية المستخدِم