يتناول هذا الدليل كيفية تحميل "إعلان بانر تكيُّفي ثابت" في تطبيق iOS.
المتطلبات الأساسية
قبل المتابعة، عليك إعداد Google Mobile Ads SDK.
اختبِر دائمًا باستخدام الإعلانات الاختبارية
عند إنشاء تطبيقاتك واختبارها، تأكَّد من استخدام الإعلانات الاختبارية بدلاً من الإعلانات المباشرة والإنتاجية. وقد يؤدي عدم إجراء ذلك إلى تعليق حسابك.
أسهل طريقة لتحميل الإعلانات الاختبارية هي استخدام رقم تعريف وحدة إعلانية اختبارية مخصّصة لإعلانات البانر على iOS:
/21775744923/example/adaptive-banner
تم ضبطه خصيصًا لعرض إعلانات اختبارية لكل طلب، ويمكنك استخدامه في تطبيقاتك أثناء الترميز والاختبار وتصحيح الأخطاء. ما عليك سوى التأكّد من استبداله برقم تعريف وحدتك الإعلانية قبل نشر تطبيقك.
لمزيد من المعلومات حول طريقة عمل الإعلانات الاختبارية في Google Mobile Ads SDK، يُرجى الاطّلاع على الإعلانات الاختبارية.
إنشاء GAMBannerView
يتم عرض "إعلانات البانر" في عناصر GAMBannerView، لذا فإنّ الخطوة الأولى لدمج "إعلانات البانر" هي تضمين GAMBannerView في هيكلية طرق العرض. ويتم ذلك عادةً إما آليًا أو من خلال Interface Builder.
آليًا
يمكن أيضًا إنشاء مثيل GAMBannerView مباشرةً.
ينشئ المثال التالي GAMBannerView:
Swift
// 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),
])
SwiftUI
لاستخدام AdManagerBannerView، أنشئ 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)
}
أضِف UIViewRepresentable إلى هيكلية طرق العرض، مع تحديد قيمتَي height وwidth:
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)
}
Objective-C
// 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;
Interface Builder
يمكنك إضافة GAMBannerView إلى لوحة عرض أو ملف xib. عند استخدام هذه الطريقة، تأكَّد من إضافة قيود على موضع عرض الإعلان للبانر فقط. على سبيل المثال،
عند عرض إعلان بانر تكيُّفي في أسفل الشاشة، اضبط الجزء السفلي
من عرض البانر ليكون مساويًا للجزء العلوي من دليل التنسيق السفلي، واضبط
centerX
القيد ليكون مساويًا لـ centerX من العرض الفائق.
تحديد حجم الإعلان
توفّر "إعلانات البانر التكيّفية الكبيرة" تنسيقًا أكبر مصمّمًا للتنسيقات غير القابلة للتمرير. مقارنةً بـ "إعلانات البانر التكيُّفية الثابتة" العادية، تتيح هذه الإعلانات حدًا أقصى للارتفاع أكبر (يصل إلى% 20 من ارتفاع الشاشة، بين 50 و150 نقطة). تم تحسين هذه المساحة الإضافية لمحتوى الفيديو.
يحصل المثال التالي على حجم "إعلان بانر تكيُّفي ثابت كبير":
Swift
// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
Objective-C
// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);
اضبط حجم الإعلان على قيمة أصغر من حجم شاشة الجهاز أو مساوية له.
لتحديد الحد الأقصى لحجم الشاشة على الإصدار 26 من نظام التشغيل iOS والإصدارات الأحدث، استخدِم السمة
UIWindowScene.effectiveGeometry.coordinateSpace. على الإصدار 18 من iOS والإصدارات الأقدم، استخدِم السمة
UIWindowScene.coordinateSpace.
لمعرفة التفاصيل حول قيود الحجم، يُرجى الاطّلاع على مقالة تحديد المشاكل وحلّها في ما يتعلّق بمرّات الظهور غير المعروضة في "إدارة إعلانات Google".
تحميل إعلان
بعد إعداد GAMBannerView وخصائصه، مثل adUnitID، يحين وقت تحميل إعلان. ويتم ذلك من خلال استدعاء loadRequest:
على عنصر GAMRequest:
Swift
func loadBannerAd(bannerView: AdManagerBannerView) {
// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
bannerView.load(AdManagerRequest())
}
SwiftUI
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
Objective-C
// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);
[self.bannerView loadRequest:[GAMRequest request]];
تمثّل عناصر GAMRequest طلب عرض إعلان واحدًا، وتحتوي على سمات
لمعلومات الاستهداف مثلاً.
إعادة تحميل إعلان
إذا ضبطت وحدتك الإعلانية لإعادة التحميل، لن تحتاج إلى طلب إعلان آخر عند تعذُّر تحميل الإعلان. تلتزم Google Mobile Ads SDK بأي معدّل إعادة تحميل حدّدته في واجهة مستخدم "مدير إعلانات Google". إذا لم تكن قد فعّلت إعادة التحميل، أرسِل طلبًا جديدًا. لمزيد من التفاصيل حول إعادة تحميل الوحدات الإعلانية، مثل ضبط معدّل إعادة التحميل، اطّلِع على معدّل إعادة تحميل الإعلانات في تطبيقات الأجهزة الجوّالة.
التعامل مع تغييرات الاتجاه
عندما يتغيّر اتجاه شاشة تطبيقك، مثلاً من الوضع
portrait
إلى الوضع الأفقي، غالبًا ما يتغيّر العرض المتاح لإعلان البانر أيضًا. للتأكّد من عرض إعلان بحجم مناسب للتنسيق الجديد، اطلب إعلان بانر جديدًا. إذا كان عرض البانر ثابتًا أو إذا كانت قيود التنسيق يمكنها التعامل مع تغيير الحجم، يمكنك تخطّي هذه الخطوة.
Swift
override func viewWillTransition(
to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator
) {
coordinator.animate(alongsideTransition: { _ in
// Load a new ad for the new orientation.
})
}
Objective-C
- (void)viewWillTransitionToSize:(CGSize)size
withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
[coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
// Load a new ad for the new orientation.
} completion:nil];
}
أحداث الإعلانات
من خلال استخدام GADBannerViewDelegate، يمكنك تتبّع أحداث يتم في مراحل النشاط، مثل وقت إغلاق الإعلان أو مغادرة المستخدم للتطبيق.
تسجيل أحداث البانر
للتسجيل في أحداث "إعلانات البانر"، اضبط السمة delegate في GAMBannerView على عنصر ينفّذ بروتوكول GADBannerViewDelegate. بشكل عام، الفئة التي تنفّذ "إعلانات البانر" تعمل أيضًا كفئة المفوَّض، وفي هذه الحالة، يمكن ضبط السمة delegate على self.
Swift
bannerView.delegate = self
SwiftUI
banner.delegate = context.coordinator
Objective-C
bannerView.delegate = self;
تنفيذ أحداث إعلانات البانر
يتم وضع علامة "اختيارية" على كل طريقة في GADBannerViewDelegate، لذا عليك فقط تنفيذ الطرق التي تريدها. ينفّذ هذا المثال كل طريقة
ويسجّل رسالة في وحدة التحكّم:
Swift
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.")
}
Objective-C
- (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");
}
يمكنك الاطّلاع على مثال "مفوّض الإعلان" لمعرفة كيفية تنفيذ طرق تفويض إعلانات البانر في تطبيق العرض التوضيحي لواجهة برمجة التطبيقات لنظام التشغيل iOS.
حالات الاستخدام
في ما يلي بعض الأمثلة على حالات استخدام طرق أحداث الإعلانات هذه.
إضافة بانر إلى هيكلية طرق العرض بعد تلقّي إعلان
قد تحتاج إلى تأخير إضافة GAMBannerView إلى
هيكلية طرق العرض إلى ما بعد تلقّي الإعلان. يمكنك إجراء ذلك من خلال الاستماع إلى حدث bannerViewDidReceiveAd::
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
// Add banner to view and add constraints.
addBannerViewToView(bannerView)
}
Objective-C
- (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
// Add bannerView to view and add constraints as above.
[self addBannerViewToView:self.bannerView];
}
إضافة مؤثرات حركية إلى إعلان بانر
يمكنك أيضًا استخدام الحدث bannerViewDidReceiveAd: لتحريك إعلان بانر بعد
عرضه، كما هو موضّح في المثال التالي:
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
bannerView.alpha = 0
UIView.animate(withDuration: 1, animations: {
bannerView.alpha = 1
})
}
Objective-C
- (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
bannerView.alpha = 0;
[UIView animateWithDuration:1.0 animations:^{
bannerView.alpha = 1;
}];
}
إيقاف التطبيق مؤقتًا واستئنافه
يتضمّن بروتوكول GADBannerViewDelegate طرقًا لإعلامك بالأحداث، مثل الحالات التي تؤدي فيها النقرة إلى عرض تراكب أو إغلاقه. إذا أردت تتبُّع ما إذا كانت هذه الأحداث ناتجة عن الإعلانات، يمكنك التسجيل في هذه الطرق GADBannerViewDelegate.
لتسجيل جميع أنواع العروض التراكبية أو عمليات استدعاء المتصفّح الخارجي، وليس فقط تلك الناتجة عن النقرات على الإعلانات، من الأفضل أن يستمع تطبيقك إلى الطرق المكافئة في UIViewController أو UIApplication. في ما يلي جدول يعرض طرق iOS المكافئة التي يتم استدعاؤها في الوقت نفسه الذي يتم فيه استدعاء طرق GADBannerViewDelegate:
| طريقة GADBannerViewDelegate | طريقة iOS |
|---|---|
bannerViewWillPresentScreen: |
UIViewController viewWillDisappear: |
bannerViewWillDismissScreen: |
UIViewController viewWillAppear: |
bannerViewDidDismissScreen: |
UIViewController viewDidAppear: |
الاحتساب اليدوي لعدد مرات الظهور
يمكنك إرسال إشعارات مرّات الظهور يدويًا إلى "مدير إعلانات Google" إذا كانت لديك شروط خاصة لتسجيل مرّة الظهور. يمكن إجراء ذلك من خلال تفعيل GAMBannerView للظهورات اليدوية قبل تحميل الإعلان:
Swift
bannerView.enableManualImpressions = true
Objective-C
self.bannerView.enableManualImpressions = YES;
عند التأكّد من أنّه تم عرض الإعلان بنجاح على الشاشة، يمكنك تسجيل مرّة ظهور يدويًا باتّباع الخطوات التالية:
Swift
bannerView.recordImpression()
Objective-C
[self.bannerView recordImpression];
الأحداث في التطبيقات
يمكنك الاستماع إلى أحداث التطبيقات الخاصة بـ "مدير إعلانات Google" باستخدام GADAppEventDelegate.
قد تحدث هذه الأحداث في أي وقت خلال مراحل نشاط الإعلان، حتى قبل استدعاء bannerViewDidReceiveAd: الخاص بالكائن GADBannerViewDelegate.
للتسجيل في أحداث التطبيق، اضبط خاصية التفويض في GAMBannerView على
عنصر ينفّذ بروتوكول GADAppEventDelegate. بشكل عام، تعمل الفئة التي تنفّذ إعلانات البانر أيضًا كفئة مفوَّضة، وفي هذه الحالة، يمكن ضبط السمة المفوضة على self.
Swift
// Set this property before making the request for an ad.
bannerView.appEventDelegate = self
Objective-C
// Set this property before making the request for an ad.
self.bannerView.appEventDelegate = self;
في ما يلي مثال يوضّح كيفية تغيير لون خلفية تطبيقك من خلال تحديد اللون من حدث في التطبيق:
Swift
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
}
}
}
Objective-C
- (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];
}
}
}
في ما يلي تصميم الإعلان المقابل الذي يرسل رسائل أحداث تطبيق التلوين إلى
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>
راجِع مثال "أحداث التطبيق" في "مدير إعلانات Google" للاطّلاع على طريقة تنفيذ أحداث التطبيق في تطبيق iOS API Demo.
مراجع إضافية
أمثلة على GitHub
- مثال على "إعلانات البانر التكيُّفية الثابتة": Swift | SwiftUI | Objective-C
- عرض توضيحي للميزات المتقدّمة: Swift | Objective-C
الخطوات التالية
إعلانات البانر القابلة للتصغير
إعلانات البانر القابلة للتصغير هي إعلانات بانر تظهر في البداية كتراكب أكبر، مع زر لتصغير الإعلان إلى حجم أصغر. ننصحك باستخدامها لتحسين أدائك بشكل أكبر. يمكنك الاطّلاع على إعلانات البانر القابلة للتصغير لمزيد من التفاصيل.
إعلانات البانر التكيّفية المضمّنة
"إعلانات البانر التكيُّفية" المضمّنة هي أكبر وأطول مقارنةً بـ "إعلانات البانر التكيُّفية الثابتة". ويختلف ارتفاعها، ويمكن أن يكون بطول شاشة الجهاز. ننصح باستخدام إعلانات البانر التكيّفية المضمّنة بدلاً من إعلانات البانر التكيّفية الثابتة في التطبيقات التي تعرض إعلانات البانر في محتوى قابل للتمرير. لمزيد من التفاصيل، يُرجى الاطّلاع على إعلانات البانر التكيُّفية المضمّنة.