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