إعلان مدمج مع المحتوى (متقدم)

عرض شكل إعلان مدمج مع المحتوى يحدّده النظام

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

نقطة رئيسية: تعرَّف على مزيد من المعلومات عن الإعلانات المدمجة مع المحتوى في الدليل الإرشادي للإعلانات المدمجة مع المحتوى. راجِع أيضًا سياسات وإرشادات الإعلانات المدمجة مع المحتوى للحصول على إرشادات حول كيفية عرض إعلاناتك المدمجة مع المحتوى.

GADNativeAdView

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

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

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

• يتم تسجيل النقرات.
• تسجيل مرّات الظهور (عندما يكون أول بكسل مرئيًا على الشاشة)
• عرض تراكب AdChoices

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

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

إحالة الإعلان

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

مثال على الرمز البرمجي

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

تخطيط UIViews

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

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

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

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

إضافة طريقة العرض إلى التسلسل الهرمي لطرق العرض

يوضّح الرمز البرمجي التالي إضافة 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) {
        NativeAdView(nativeViewModel: nativeViewModel)  // Updates when the native ad data changes.
          .frame(minHeight: 300)  // minHeight determined from xib.
NativeContentView.swift

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 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 على الأجهزة الجوّالة" من تلقّي أحداث واجهة المستخدم ومعالجتها بشكل صحيح. نتيجةً لهذه الخطوة الإضافية، من الأفضل عرض مواد عرض الإعلانات المدمجة مع المحتوى باستخدام UILabel وUIImageView بدلاً من ذلك.

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

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

مثال متقدّم على الإعلانات المدمجة مع المحتوى في Swift مثال على الإعلانات المدمجة مع المحتوى في SwiftUI مثال متقدّم على الإعلانات المدمجة مع المحتوى في Objective-C

GADMediaView

ملاحظة مهمة: عليك استخدام مادة عرض 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;

GADMediaContent

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

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

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

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

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

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