This guide covers loading an anchored adaptive banner ad into an iOS app.
پیشنیازها
قبل از ادامه، Google Mobile Ads SDK را راهاندازی کنید .
همیشه با تبلیغات آزمایشی تست کنید
هنگام ساخت و آزمایش برنامههای خود، مطمئن شوید که از تبلیغات آزمایشی به جای تبلیغات زنده و تولیدی استفاده میکنید. عدم انجام این کار میتواند منجر به مسدود شدن حساب شما شود.
The easiest way to load test ads is to use our dedicated test ad unit ID for iOS banners:
/21775744923/example/adaptive-banner
این ابزار به طور ویژه پیکربندی شده است تا برای هر درخواست، تبلیغات آزمایشی را برگرداند و شما میتوانید در برنامههای خود هنگام کدنویسی، آزمایش و اشکالزدایی از آن استفاده کنید. فقط قبل از انتشار برنامه، مطمئن شوید که آن را با شناسه واحد تبلیغاتی خود جایگزین میکنید.
برای اطلاعات بیشتر در مورد نحوه عملکرد تبلیغات آزمایشی Google Mobile Ads SDK ، به بخش تبلیغات آزمایشی مراجعه کنید.
ایجاد یک GAMBannerView
بنرهای تبلیغاتی در اشیاء GAMBannerView نمایش داده میشوند، بنابراین اولین قدم برای ادغام بنرهای تبلیغاتی، گنجاندن یک GAMBannerView در سلسله مراتب نمای شما است. این کار معمولاً یا به صورت برنامهنویسی یا از طریق Interface Builder انجام میشود.
از نظر برنامهنویسی
A GAMBannerView can also be instantiated directly. The following example creates a GAMBannerView :
سویفت
// Initialize the banner view.
bannerView = AdManagerBannerView()
bannerView.delegate = self
bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)
// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
NSLayoutConstraint.activate([
// Align the banner's bottom edge with the safe area's bottom edge
bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
// Center the banner horizontally in the view
bannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
])
سویفتیوآی
To use a AdManagerBannerView , create a UIViewRepresentable :
private struct BannerViewContainer: UIViewRepresentable {
typealias UIViewType = BannerView
let adSize: AdSize
init(_ adSize: AdSize) {
self.adSize = adSize
}
func makeUIView(context: Context) -> BannerView {
let banner = BannerView(adSize: adSize)
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
banner.delegate = context.coordinator
return banner
}
func updateUIView(_ uiView: BannerView, context: Context) {}
func makeCoordinator() -> BannerCoordinator {
return BannerCoordinator(self)
}
Add your UIViewRepresentable to the view hierarchy, specifying height and width values:
var body: some View {
Spacer()
// Request an anchored adaptive banner with a width of 375.
let adSize = largeAnchoredAdaptiveBanner(width: 375)
BannerViewContainer(adSize)
.frame(width: adSize.size.width, height: adSize.size.height)
}
هدف-سی
// Initialize the banner view.
GAMBannerView *bannerView = [[GAMBannerView alloc] init];
bannerView.delegate = self;
UIView *view = self.view;
bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[view addSubview:bannerView];
// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
[NSLayoutConstraint activateConstraints:@[
// Align the banner's bottom edge with the safe area's bottom edge
[bannerView.bottomAnchor
constraintEqualToAnchor:view.safeAreaLayoutGuide.bottomAnchor],
// Center the banner horizontally in the view
[bannerView.centerXAnchor constraintEqualToAnchor:view.centerXAnchor],
]];
self.bannerView = bannerView;
رابط کاربری سازنده
میتوانید یک GAMBannerView به یک فایل storyboard یا xib اضافه کنید. هنگام استفاده از این روش، مطمئن شوید که فقط محدودیتهای موقعیت را روی بنر اضافه میکنید. برای مثال، هنگام نمایش یک بنر تطبیقی در پایین صفحه، پایین نمای بنر را برابر با بالای Bottom Layout Guide تنظیم کنید و محدودیت centerX را برابر با centerX نمای بالا قرار دهید.
اندازه تبلیغ را تنظیم کنید
بنرهای تطبیقی بزرگ، قالب بزرگتری را برای طرحبندیهای بدون پیمایش ارائه میدهند. در مقایسه با بنرهای تطبیقی استاندارد که به صورت لنگری قرار میگیرند، این بنرها حداکثر ارتفاع بلندتری را ارائه میدهند (تا 20٪ از ارتفاع صفحه نمایش، بین 50 تا 150 نقطه). این فضای افزایشیافته برای محتوای ویدیویی بهینه شده است.
The following example gets a large anchored adaptive banner size:
سویفت
// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
هدف-سی
// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);
بارگذاری یک تبلیغ
Once the GAMBannerView is in place and its properties, such as adUnitID , are configured, it's time to load an ad. This is done by calling loadRequest: on a GAMRequest object:
سویفت
func loadBannerAd(bannerView: AdManagerBannerView) {
// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
bannerView.load(AdManagerRequest())
}
سویفتیوآی
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
هدف-سی
// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);
[self.bannerView loadRequest:[GAMRequest request]];
GAMRequest objects represent a single ad request, and contain properties for things like targeting information.
تازه کردن یک آگهی
اگر واحد تبلیغاتی خود را برای بهروزرسانی پیکربندی کردهاید، در صورت عدم بارگیری تبلیغ، نیازی به درخواست تبلیغ دیگری ندارید. Google Mobile Ads SDK هر نرخ بهروزرسانی را که در رابط کاربری مدیر تبلیغات مشخص کردهاید، در نظر میگیرد. اگر بهروزرسانی را فعال نکردهاید، یک درخواست جدید ارسال کنید. برای جزئیات بیشتر در مورد بهروزرسانی واحد تبلیغاتی، مانند تنظیم نرخ بهروزرسانی، به نرخ بهروزرسانی برای تبلیغات در برنامههای تلفن همراه مراجعه کنید.
مدیریت تغییرات جهت گیری
وقتی جهت صفحه نمایش برنامه شما تغییر میکند، مثلاً از حالت portrait به افقی، عرض موجود برای بنر نیز اغلب تغییر میکند. برای اطمینان از اینکه تبلیغی با اندازه مناسب برای طرح جدید نمایش میدهید، درخواست یک بنر جدید کنید. اگر عرض بنر شما ثابت است، یا اگر محدودیتهای طرح شما میتواند تغییر اندازه را تحمل کند، از این مرحله صرف نظر کنید.
سویفت
override func viewWillTransition(
to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator
) {
coordinator.animate(alongsideTransition: { _ in
// Load a new ad for the new orientation.
})
}
هدف-سی
- (void)viewWillTransitionToSize:(CGSize)size
withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
[coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
// Load a new ad for the new orientation.
} completion:nil];
}
رویدادهای تبلیغاتی
Through the use of GADBannerViewDelegate , you can listen for lifecycle events, such as when an ad is closed or the user leaves the app.
برای رویدادهای بنری ثبت نام کنید
برای ثبت رویدادهای تبلیغات بنری، ویژگی delegate را در GAMBannerView روی شیءای که پروتکل GADBannerViewDelegate را پیادهسازی میکند، تنظیم کنید. بهطورکلی، کلاسی که تبلیغات بنری را پیادهسازی میکند، بهعنوان کلاس delegate نیز عمل میکند، در این صورت، ویژگی delegate را میتوان روی self تنظیم کرد.
سویفت
bannerView.delegate = self
سویفتیوآی
banner.delegate = context.coordinator
هدف-سی
bannerView.delegate = self;
رویدادهای بنری را پیادهسازی کنید
Each of the methods in GADBannerViewDelegate is marked as optional, so you only need to implement the methods you want. This example implements each method and logs a message to the console:
سویفت
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
print("Banner ad loaded.")
}
func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
print("Banner ad failed to load: \(error.localizedDescription)")
}
func bannerViewDidRecordImpression(_ bannerView: BannerView) {
print("Banner ad recorded an impression.")
}
func bannerViewDidRecordClick(_ bannerView: BannerView) {
print("Banner ad recorded a click.")
}
func bannerViewWillPresentScreen(_ bannerView: BannerView) {
print("Banner ad will present screen.")
}
func bannerViewWillDismissScreen(_ bannerView: BannerView) {
print("Banner ad will dismiss screen.")
}
func bannerViewDidDismissScreen(_ bannerView: BannerView) {
print("Banner ad did dismiss screen.")
}
هدف-سی
- (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
NSLog(@"bannerViewDidReceiveAd");
}
- (void)bannerView:(GAMBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
NSLog(@"bannerView:didFailToReceiveAdWithError: %@", error.localizedDescription);
}
- (void)bannerViewDidRecordImpression:(GAMBannerView *)bannerView {
NSLog(@"bannerViewDidRecordImpression");
}
- (void)bannerViewWillPresentScreen:(GAMBannerView *)bannerView {
NSLog(@"bannerViewWillPresentScreen");
}
- (void)bannerViewWillDismissScreen:(GAMBannerView *)bannerView {
NSLog(@"bannerViewWillDismissScreen");
}
- (void)bannerViewDidDismissScreen:(GAMBannerView *)bannerView {
NSLog(@"bannerViewDidDismissScreen");
}
See the Ad Delegate example for an implementation of banner delegate methods in the iOS API Demo app.
موارد استفاده
Here are some example use cases for these ad event methods.
Add a banner to the view hierarchy once an ad is received
You may want to delay in adding a GAMBannerView to the view hierarchy until after an ad is received. You can do this by listening for the bannerViewDidReceiveAd: event:
سویفت
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
// Add banner to view and add constraints.
addBannerViewToView(bannerView)
}
هدف-سی
- (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
// Add bannerView to view and add constraints as above.
[self addBannerViewToView:self.bannerView];
}
متحرک سازی یک بنر تبلیغاتی
You can also use the bannerViewDidReceiveAd: event to animate a banner ad once it's returned, as shown in the following example:
سویفت
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
bannerView.alpha = 0
UIView.animate(withDuration: 1, animations: {
bannerView.alpha = 1
})
}
هدف-سی
- (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
bannerView.alpha = 0;
[UIView animateWithDuration:1.0 animations:^{
bannerView.alpha = 1;
}];
}
مکث و از سرگیری برنامه
پروتکل GADBannerViewDelegate متدهایی برای اطلاعرسانی به شما در مورد رویدادها دارد، مانند زمانی که یک کلیک باعث نمایش یا رد یک overlay میشود. اگر میخواهید ردیابی کنید که آیا این رویدادها به دلیل تبلیغات بودهاند یا خیر، برای این متدهای GADBannerViewDelegate ثبتنام کنید.
برای دریافت انواع نمایشهای روی هم افتاده یا فراخوانیهای مرورگر خارجی، نه فقط آنهایی که از کلیکهای تبلیغاتی میآیند، بهتر است برنامه شما به دنبال متدهای معادل در UIViewController یا UIApplication باشد. در اینجا جدولی وجود دارد که متدهای معادل iOS را که همزمان با متدهای GADBannerViewDelegate فراخوانی میشوند، نشان میدهد:
| متد GADBannerViewDelegate | روش iOS |
|---|---|
bannerViewWillPresentScreen: | viewWillDisappear: |
bannerViewWillDismissScreen: | viewWillAppear: |
bannerViewDidDismissScreen: | viewDidAppear: |
شمارش دستی برداشت
اگر شرایط خاصی برای ثبت نمایش دارید، میتوانید پینگهای نمایش را به صورت دستی به مدیر تبلیغات ارسال کنید. این کار را میتوان با فعال کردن GAMBannerView برای نمایشهای دستی قبل از بارگذاری تبلیغ انجام داد:
سویفت
bannerView.enableManualImpressions = true
هدف-سی
self.bannerView.enableManualImpressions = YES;
When you determine that an ad has been successfully returned and is on screen, you can manually fire an impression:
سویفت
bannerView.recordImpression()
هدف-سی
[self.bannerView recordImpression];
رویدادهای برنامه
شما میتوانید با استفاده از GADAppEventDelegate به رویدادهای برنامهی مخصوص Ad Manager گوش دهید. این رویدادها ممکن است در هر زمانی در طول چرخهی حیات تبلیغ، حتی قبل از فراخوانی bannerViewDidReceiveAd: شیء GADBannerViewDelegate ، رخ دهند.
برای ثبت رویدادهای برنامه، ویژگی delegate را در GAMBannerView روی شیءای که پروتکل GADAppEventDelegate را پیادهسازی میکند، تنظیم کنید. بهطورکلی، کلاسی که تبلیغات بنری را پیادهسازی میکند، بهعنوان کلاس delegate نیز عمل میکند، در این صورت، ویژگی delegate را میتوان روی self تنظیم کرد.
سویفت
// Set this property before making the request for an ad.
bannerView.appEventDelegate = self
هدف-سی
// Set this property before making the request for an ad.
self.bannerView.appEventDelegate = self;
Here is an example showing how to change the background color of your app by specifying the color from an app event:
سویفت
func bannerView(
_ banner: AdManagerBannerView, didReceiveAppEvent name: String, withInfo info: String?
) {
if name == "color" {
if info == "green" {
// Set background color to green.
view.backgroundColor = UIColor.green
} else if info == "blue" {
// Set background color to blue.
view.backgroundColor = UIColor.blue
} else {
// Set background color to black.
view.backgroundColor = UIColor.black
}
}
}
هدف-سی
- (void)bannerView:(GAMBannerView *)banner
didReceiveAppEvent:(NSString *)name
withInfo:(NSString *)info {
if ([name isEqual:@"color"]) {
if ([info isEqual:@"green"]) {
// Set background color to green.
self.view.backgroundColor = [UIColor greenColor];
} else if ([info isEqual:@"blue"]) {
// Set background color to blue.
self.view.backgroundColor = [UIColor blueColor];
} else {
// Set background color to black.
self.view.backgroundColor = [UIColor blackColor];
}
}
}
And, here is the corresponding creative that sends color app event messages to appEventDelegate :
<html>
<head>
<script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Send a color=green event when ad loads.
admob.events.dispatchAppEvent("color", "green");
document.getElementById("ad").addEventListener("click", function() {
// Send a color=blue event when ad is clicked.
admob.events.dispatchAppEvent("color", "blue");
});
});
</script>
<style>
#ad {
width: 320px;
height: 50px;
top: 0px;
left: 0px;
font-size: 24pt;
font-weight: bold;
position: absolute;
background: black;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div id="ad">Carpe diem!</div>
</body>
</html>
See the Ad Manager App Events example for an implementation of app events in the iOS API Demo app.
منابع اضافی
مثالها در گیتهاب
- Anchored adaptive banner ads example: Swift | SwiftUI | Objective-C
- نسخه نمایشی ویژگیهای پیشرفته: Swift | Objective-C
مراحل بعدی
بنرهای تاشو
بنرهای تبلیغاتی تاشو، بنرهایی هستند که در ابتدا به صورت یک لایه بزرگتر ارائه میشوند و دکمهای برای جمع کردن تبلیغ به اندازه کوچکتر وجود دارد. برای بهینهسازی بیشتر عملکرد خود، استفاده از آن را در نظر بگیرید. برای جزئیات بیشتر به بنرهای تبلیغاتی تاشو مراجعه کنید.
بنرهای تطبیقی درون خطی
بنرهای تطبیقی درون خطی در مقایسه با بنرهای تطبیقی لنگری، بنرهای بزرگتر و بلندتری هستند. ارتفاع آنها متغیر است و میتوانند به اندازه صفحه نمایش دستگاه باشند. بنرهای تطبیقی درون خطی برای برنامههایی که تبلیغات بنری را در محتوای قابل پیمایش قرار میدهند، نسبت به بنرهای تطبیقی لنگری توصیه میشوند. برای جزئیات بیشتر به بنرهای تطبیقی درون خطی مراجعه کنید.