عرض شكل إعلان مدمج مع المحتوى يحدّده النظام
عند تحميل إعلان مدمج مع المحتوى، سيتلقّى تطبيقك عنصر إعلان مدمج مع المحتوى من خلال إحدى رسائل بروتوكول
GADAdLoaderDelegate
. بعد ذلك، يتحمّل تطبيقك مسؤولية
عرض الإعلان (على الرغم من أنّه ليس بالضرورة أن يتم ذلك على الفور).
لتسهيل عرض أشكال الإعلانات التي يحدّدها النظام، تقدّم حزمة SDK بعض موارد المساعدة المفيدة.
GADNativeAdView
بالنسبة إلى GADNativeAd
، هناك فئة "عرض إعلان"
مقابلة:
GADNativeAdView
.
فئة عرض الإعلان هذه هي UIView
يجب أن يستخدمها الناشرون لعرض الإعلان.
على سبيل المثال، يمكن أن يعرض GADNativeAdView
واحد حالة واحدة من
GADNativeAd
. يجب أن تكون كلّ عناصر UIView
المستخدَمة لعرض مواد عرض ذلك الإعلان
عرضًا فرعيًا لعنصر GADNativeAdView
هذا.
على سبيل المثال، إذا كنت تعرض إعلانًا في UITableView
، قد يبدو التسلسل الهرمي
للعرض لأحد الخلايا على النحو التالي:
توفّر فئة GADNativeAdView
أيضًا IBOutlets
المستخدَم لتسجيل
طريقة العرض المستخدَمة لكل مادة عرض فردية، وطريقة لتسجيل
GADNativeAd
العنصر نفسه. يتيح تسجيل المشاهدات بهذه الطريقة لحزمة تطوير البرامج (SDK)
معالجة مهام مثل:
- تسجيل النقرات
- تسجيل مرّات الظهور (عندما يكون أول بكسل مرئيًا على الشاشة)
- عرض تراكب AdChoices
تراكب خيارات الإعلان
بالنسبة إلى الإعلانات المدمجة غير المباشرة (التي يتم عرضها من خلال إضافة الإعلانات السابقة في "مدير إعلانات Google" أو من خلال Ad Exchange أو AdSense)، تُضيف حزمة تطوير البرامج (SDK) تراكب AdChoices. اترك مساحة في الزاوية المفضّلة لديك لعرض شعار "خيارات الإعلان" الذي يتم إدراجه تلقائيًا في عرض الإعلانات المدمجة. تأكَّد أيضًا من وضع العنصر الذي يظهر على سطح الفيديو الخاص بخيار "خيارات الإعلان" فوق محتوى يسمح برؤية الرمز بسهولة. لمزيد من المعلومات عن مظهر التراكب ووظيفته، اطّلِع على إرشادات تنفيذ الإعلانات المدمجة مع المحتوى آليًا.
تحديد مصدر الإعلانات للإعلانات المدمجة مع المحتوى الآلية
عند عرض إعلانات مدمجة مع المحتوى آليًا، يجب عرض مصدر إعلان لتحديد أنّ العرض هو إعلان. اطّلِع على مزيد من المعلومات في إرشادات السياسات.مثال على الرمز البرمجي
لنلقِ نظرة على كيفية عرض الإعلانات المدمجة باستخدام طرق العرض المحمَّلة ديناميكيًا
من ملفات 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)")
}
}
أنشئ 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
}
إضافة طريقة العرض إلى التسلسل الهرمي لطرق العرض
يوضّح الرمز البرمجي التالي إضافة 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.
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;
}
مثال كامل على GitHub
يمكنك الاطّلاع على المثال الكامل لدمج الإعلانات المدمجة مع المحتوى في Swift وSwiftUI و Objective-C من خلال اتّباع رابط GitHub المعنيّ.
مثال على العرض المخصّص في Swift مثال على الإعلانات المدمجة مع المحتوى في SwiftUI مثال على العرض المخصّص في Objective-C
GADMediaView
يتم عرض مواد عرض الصور والفيديوهات للمستخدمين من خلال
GADMediaView
.
هذا UIView
يمكن تحديده في ملف xib أو إنشاؤه ديناميكيًا.
يجب وضعها ضمن العرض الهرمي لـ GADNativeAdView
، كما هو الحال مع
أي عرض آخر لمادة عرض.
كما هو الحال مع جميع طرق عرض مواد العرض، يجب أن يتمّ gefüllt المحتوى في طريقة عرض الوسائط. يتم ضبط هذا الإعداد باستخدام السمة
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
بدلاً من ذلك.