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

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

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

نقطة رئيسية: يمكنك مراجعة سياسات الإعلانات المدمجة مع المحتوى الإرشادات للحصول على إرشادات حول كيفية عرض إعلاناتك المدمجة مع المحتوى

GADNativeAdView

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

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

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

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

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

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

ملاحظة: يتمّ عرض "خيارات الإعلان" للإعلانات المُباعة مباشرةً فقط في المنطقة الاقتصادية الأوروبية.

تحديد مصدر الإعلانات الآلية المدمجة مع المحتوى

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

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

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

تخطيط UIViews

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

لاحظ قيمة "الفئة المخصّصة" في أعلى يسار الصورة. تم تعيين الفيديو على

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 الهدف-ج باتباع رابط GitHub ذي الصلة.

مثال على عرض مخصص Swift مثال على إعلانات SwiftUI المدمجة مع المحتوى مثال على العرض المخصّص للهدف

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

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

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