نمایش یک قالب تبلیغات بومی تعریف شده توسط سیستم
هنگامی که یک تبلیغ بومی بارگیری می شود، برنامه شما یک شی تبلیغاتی بومی را از طریق یکی از پیام های پروتکل GADAdLoaderDelegate
دریافت می کند. سپس برنامه شما مسئول نمایش آگهی است (البته لزوماً نباید فوراً این کار را انجام دهد). برای آسانتر کردن نمایش قالبهای تبلیغاتی تعریفشده توسط سیستم، SDK منابع مفیدی را ارائه میدهد.
GADNativeAdView
برای GADNativeAd
، یک کلاس "ad view" مربوطه وجود دارد: GADNativeAdView
. این کلاس مشاهده آگهی یک UIView
است که ناشران باید از آن برای نمایش آگهی استفاده کنند. برای مثال، یک GADNativeAdView
منفرد، میتواند یک نمونه از یک GADNativeAd
را نمایش دهد. هر یک از اشیاء UIView
که برای نمایش داراییهای آن تبلیغ استفاده میشوند باید زیرنماهای آن شی GADNativeAdView
باشند.
برای مثال، اگر تبلیغی را در UITableView
نمایش میدادید، سلسله مراتب مشاهده یکی از سلولها ممکن است به این صورت باشد:
کلاس GADNativeAdView
همچنین IBOutlets
برای ثبت نمای مورد استفاده برای هر دارایی جداگانه و روشی برای ثبت خود شی GADNativeAd
ارائه می دهد. ثبت نماها به این روش به SDK اجازه می دهد تا به طور خودکار وظایفی مانند:
- ضبط کلیک ها
- ضبط برداشت ها (زمانی که اولین پیکسل روی صفحه قابل مشاهده است).
- نمایش همپوشانی AdChoices.
همپوشانی AdChoices
برای تبلیغات بومی غیرمستقیم (ارائه شده از طریق Ad Manager Backfill یا از طریق Ad Exchange یا AdSense)، یک پوشش AdChoices توسط SDK اضافه می شود. برای نشانواره AdChoices که بهطور خودکار درج میشود، در گوشه دلخواهتان در نمای تبلیغاتی بومیتان فضای خالی بگذارید. همچنین، مطمئن شوید که همپوشانی AdChoices روی محتوایی قرار گرفته باشد که به آسانی نماد را ببینید. برای اطلاعات بیشتر در مورد ظاهر و عملکرد پوشش، دستورالعملهای اجرای تبلیغات بومی برنامهریزی شده را ببینید.
تخصیص آگهی برای تبلیغات بومی برنامهریزیشده
هنگام نمایش تبلیغات بومی برنامهریزی شده، باید یک انتساب آگهی را نمایش دهید تا نشان دهد که این نما یک تبلیغ است. در دستورالعمل های خط مشی ما بیشتر بیاموزید.نمونه کد
بیایید نگاهی به نحوه نمایش تبلیغات بومی با استفاده از نماهایی که به صورت پویا از فایلهای xib بارگذاری میشوند، بیاندازیم. این می تواند یک رویکرد بسیار مفید در هنگام استفاده از GADAdLoaders
پیکربندی شده برای درخواست فرمت های متعدد باشد.
UIViws را بچینید
اولین قدم، چیدمان UIViews
است که دارایی های تبلیغاتی بومی را نمایش می دهد. شما می توانید این کار را در Interface Builder همانطور که هنگام ایجاد هر فایل xib دیگری انجام می دهید، انجام دهید. در اینجا طرح بندی برای یک آگهی بومی ممکن است به نظر برسد:
به مقدار Custom Class در سمت راست بالای تصویر توجه کنید. تنظیم شده است
GADNativeAdView
. این کلاس نمایش آگهی است که برای نمایش یک GADNativeAd
استفاده می شود.
همچنین باید کلاس سفارشی را برای GADMediaView
تنظیم کنید، که برای نمایش ویدیو یا تصویر برای تبلیغ استفاده می شود.
رسانه ها را به بازدیدها پیوند دهید
هنگامی که نماها در جای خود قرار گرفتند و کلاس درستی از نمای تبلیغات را به طرح بندی اختصاص دادید، خروجی های دارایی نمای تبلیغات را به UIViews
که ایجاد کرده اید پیوند دهید. در اینجا نحوه پیوند دارایی های نمای آگهی به UIViews
ایجاد شده برای یک آگهی آمده است:
در پانل خروجی، خروجیها در GADNativeAdView
به UIViews
که در Interface Builder گذاشته شدهاند، مرتبط شدهاند. این به SDK اجازه میدهد بداند کدام UIView
کدام دارایی را نمایش میدهد. همچنین مهم است که به یاد داشته باشید که این رسانه ها نمایانگر نماهایی هستند که در آگهی قابل کلیک هستند.
نمایش آگهی
پس از تکمیل طرحبندی و پیوند دادن رسانهها، کد زیر را به برنامه خود اضافه کنید که یک آگهی را پس از بارگیری نمایش میدهد:
سویفت
// 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
یک مدل view ایجاد کنید
یک مدل نمایش ایجاد کنید که یک آگهی بومی را بارگیری کند و تغییرات داده های تبلیغات بومی را منتشر کند:
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
}
نما را به سلسله مراتب view اضافه کنید
کد زیر اضافه کردن UIViewRepresentable
به سلسله مراتب view را نشان می دهد:
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.
هدف-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
قرار گیرد.
مانند همه نماهای دارایی، نمای رسانه باید محتوای آن پر شود. این با استفاده از ویژگی mediaContent
در GADMediaView
تنظیم شده است. ویژگی mediaContent
GADNativeAd
حاوی محتوای رسانه ای است که می تواند به یک GADMediaView
منتقل شود.
در اینجا یک قطعه از مثال رندر سفارشی ( Swift | Objective-C ) آمده است که نشان می دهد چگونه GADMediaView
را با دارایی های تبلیغاتی بومی با استفاده از GADMediaContent
از GADNativeAd
پر کنید:
سویفت
nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
هدف-C
nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;
مطمئن شوید که در فایل سازنده رابط خود برای نمای تبلیغات بومی خود، کلاس سفارشی views را روی GADMediaView
تنظیم کرده اید و آن را به خروجی mediaView
متصل کرده اید.
تغییر حالت محتوای تصویر
کلاس GADMediaView
هنگام نمایش تصاویر به ویژگی UIView
contentMode
احترام می گذارد. اگر میخواهید نحوه اندازهگیری یک تصویر را در GADMediaView
تغییر دهید، UIViewContentMode
مربوطه را روی ویژگی contentMode
GADMediaView
تنظیم کنید تا به این هدف برسید.
به عنوان مثال، برای پر کردن GADMediaView
هنگام نمایش تصویر (تبلیغ بدون ویدیو):
سویفت
nativeAdView.mediaView?.contentMode = .aspectFill
هدف-C
nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;
GADMediaContent
کلاس GADMediaContent
داده های مربوط به محتوای رسانه ای تبلیغات بومی را نگه می دارد که با استفاده از کلاس GADMediaView
نمایش داده می شود. هنگامی که در ویژگی GADMediaView
mediaContent
تنظیم شده است:
اگر دارایی ویدیویی در دسترس باشد، بافر می شود و در
GADMediaView
شروع به پخش می کند. با بررسیhasVideoContent
میتوانید متوجه شوید که دارایی ویدیویی در دسترس است.اگر آگهی حاوی دارایی ویدیویی نباشد، دارایی
mainImage
دانلود شده و در داخلGADMediaView
قرار می گیرد.
مراحل بعدی
درباره حریم خصوصی کاربر بیشتر بیاموزید.