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

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

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

GADNativeAdView

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

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

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

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

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

بالنسبة إلى الإعلانات غير المباشرة المدمجة مع المحتوى (يتم عرضها عبر Ad Manager إعادة التعبئة أو من خلال 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

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

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 guaranteed to be 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;
}

يحتوي مستودعنا GitHub على عمليات التنفيذ الكاملة الإعلانات المخصَّصة للعرض المدمج مع المحتوى المكتوبة بكل من Swift وObjective-C.

تنزيل مثال للعرض المخصّص لأداة "مدير إعلانات Google"

GADMediaView

تظهر مواد عرض الصور والفيديوهات للمستخدمين من خلال 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 بدلاً من ذلك.

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

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