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

اختيار النظام الأساسي: 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
}

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)")
  }
}

إنشاء 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
  }

إضافة طريقة العرض إلى هيكلية طرق العرض

يوضّح الرمز التالي كيفية إضافة 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.

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;
}

مثال كامل على GitHub

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

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

GADMediaView

يتم عرض مواد عرض الصور والفيديو للمستخدِمين باستخدام GADMediaView. هذا عنصر UIView يمكن تحديده في ملف xib أو إنشاؤه ديناميكيًا. يجب وضعه ضمن هيكلية طرق العرض الخاصة بـ GADNativeAdView، كما هو الحال مع أي طريقة عرض أخرى لمادة العرض.

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

في ما يلي مقتطف من مثال Native Advanced (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 = .scaleAspectFit

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeScaleAspectFit;

GADMediaContent

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

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

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

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

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