إعلانات البانر هي إعلانات مستطيلة تشغل جزءًا من تصميم التطبيق. وتظل معروضة على الشاشة أثناء تفاعل المستخدمين مع التطبيق، سواء في الجزء العلوي أو السفلي من الشاشة أو مضمَّنة مع المحتوى أثناء تمرير الشاشة. يمكن إعادة تحميل إعلانات البانر تلقائيًا بعد فترة زمنية محدّدة اطّلع على نظرة عامة على إعلانات البانر لمزيد من المعلومات.
يوضّح لك هذا الدليل كيفية بدء استخدام إعلانات البانر التكيفية الثابتة، التي تعمل على تحسين الأداء إلى أقصى حد من خلال تحسين حجم الإعلان لكل جهاز باستخدام عرض الإعلان الذي تحدّده.
إعلان بانر تكيُّفي ثابت
إعلانات البانر التكيُّفية الثابتة هي إعلانات بنسبة عرض إلى ارتفاع ثابتة، وليست إعلانات ذات حجم ثابت عادي. نسبة العرض إلى الارتفاع مماثلة للمعيار المتّبع في المجال 320*50. بعد تحديد العرض الكامل المتاح، سيعرض لك إعلانًا بالارتفاع الأمثل لهذا العرض. ولا يتغيّر الارتفاع الأمثل مع الطلبات الواردة من الجهاز نفسه، ولا حاجة إلى تغيّر عدد المشاهدات المحيطة عند إعادة تحميل الإعلان.
المتطلّبات الأساسية
- أكمِل دليل البدء.
الاختبار دائمًا باستخدام الإعلانات الاختبارية
عند إنشاء تطبيقاتك واختبارها، احرص على استخدام إعلانات تجريبية بدلاً من الإعلانات النهائية المباشرة. وقد يؤدي عدم الالتزام بذلك إلى تعليق حسابك.
أسهل طريقة لتحميل الإعلانات الاختبارية هي استخدام رقم التعريف المخصّص للوحدة الإعلانية الاختبارية الخاصة بإعلانات البانر على نظام التشغيل iOS:
/6499/example/adaptive-banner
لقد تم تكوينه خصيصًا لعرض إعلانات اختبارية لكل طلب، ويمكنك استخدامه في تطبيقاتك الخاصة أثناء الترميز والاختبار وتصحيح الأخطاء. ما عليك سوى استبداله بمعرّف الوحدة الإعلانية قبل نشر تطبيقك.
لمزيد من المعلومات عن آلية عمل الإعلانات الاختبارية لحزمة تطوير البرامج (SDK) لعرض الإعلانات للأجهزة الجوّالة، يُرجى الاطّلاع على اختبار الإعلانات.
إنشاء GAMBannerView
يتم عرض إعلانات البانر في كائنات GAMBannerView
،
لذا فإنّ الخطوة الأولى لدمج إعلانات البانر هي تضمين GAMBannerView
في العرض الهرمي. ويتم ذلك عادةً إما آليًا أو من خلال
أداة إنشاء الواجهة.
آليًا
ويمكن أيضًا إنشاء مثيل GAMBannerView
مباشرةً.
إليك مثال على كيفية إنشاء GAMBannerView
، بالمحاذاة مع أسفل منتصف المنطقة الآمنة على الشاشة:
Swift
import GoogleMobileAds import UIKit class ViewController: UIViewController { var bannerView: GAMBannerView! override func viewDidLoad() { super.viewDidLoad() let viewWidth = view.frame.inset(by: view.safeAreaInsets).width // Here the current interface orientation is used. Use // GADLandscapeAnchoredAdaptiveBannerAdSizeWithWidth or // GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth if you prefer to load an ad of a // particular orientation, let adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth) bannerView = GAMBannerView(adSize: adaptiveSize) addBannerViewToView(bannerView) } func addBannerViewToView(_ bannerView: GAMBannerView) { bannerView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(bannerView) view.addConstraints( [NSLayoutConstraint(item: bannerView, attribute: .bottom, relatedBy: .equal, toItem: view.safeAreaLayoutGuide, attribute: .bottom, multiplier: 1, constant: 0), NSLayoutConstraint(item: bannerView, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1, constant: 0) ]) } }
Objective-C
@import GoogleMobileAds; @interface ViewController () @property(nonatomic, strong) GAMBannerView *bannerView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Here safe area is taken into account, hence the view frame is used after the // view has been laid out. CGRect frame = UIEdgeInsetsInsetRect(self.view.frame, self.view.safeAreaInsets); CGFloat viewWidth = frame.size.width; // Here the current interface orientation is used. If the ad is being preloaded // for a future orientation change or different orientation, the function for the // relevant orientation should be used. GADAdSize adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth); // In this case, we instantiate the banner with desired ad size. self.bannerView = [[GAMBannerView alloc] initWithAdSize:adaptiveSize]; [self addBannerViewToView:self.bannerView]; } - (void)addBannerViewToView:(UIView *)bannerView { bannerView.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:bannerView]; [self.view addConstraints:@[ [NSLayoutConstraint constraintWithItem:bannerView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view.safeAreaLayoutGuide attribute:NSLayoutAttributeBottom multiplier:1 constant:0], [NSLayoutConstraint constraintWithItem:bannerView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0] ]]; } @end
تجدر الإشارة إلى أنّنا لا نضع في هذه الحالة قيودًا على العرض أو الارتفاع، لأنّ حجم الإعلان المقدّم سيمنح إعلان البانر حجم محتوى أساسيًا يتناسب مع حجم العرض.
أداة إنشاء الواجهات
يمكن إضافة GAMBannerView
إلى لوحة ترتيب الصور أو ملف xib. عند استخدام هذه الطريقة، احرص على إضافة قيود على الموضع في إعلان البانر فقط. على سبيل المثال، عند عرض إعلان بانر تكيُّفي في أسفل الشاشة، اضبط الجزء السفلي من عرض البانر بحيث يكون الجزء العلوي من دليل التنسيق السفلي، واضبط وضع X في الوسط بحيث يكون مساويًا للوسط X في العرض الرئيسي.
لا يزال حجم إعلان البانر يتم ضبطه آليًا:
Swift
bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
Objective-C
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
تحميل إعلان
بعد وضع GAMBannerView
وضبط خصائصه، يحين وقت تحميل إعلان. ويتم ذلك من خلال استدعاء loadRequest:
في كائن
GAMRequest
:
Swift
override func viewDidLoad() { super.viewDidLoad() ... // Set the ad unit ID and view controller that contains the GAMBannerView. bannerView.adUnitID = "/6499/example/adaptive-banner" bannerView.rootViewController = self bannerView.load(GAMRequest()) }
Objective-C
- (void)viewDidLoad { [super viewDidLoad]; ... // Set the ad unit ID and view controller that contains the GAMBannerView. self.bannerView.adUnitID = @"/6499/example/adaptive-banner"; self.bannerView.rootViewController = self; [self.bannerView loadRequest:[GAMRequest request]]; }
تمثل عناصر GAMRequest طلب إعلان واحدًا، وتحتوي على خصائص لأشياء مثل معلومات الاستهداف.
إذا تعذّر تحميل إعلانك، لن تحتاج إلى طلب إعلان آخر بشكل صريح طالما أنّك أعددت وحدتك الإعلانية لإعادة تحميلها، وتجدر الإشارة إلى أنّ حزمة "SDK لإعلانات Google على الأجهزة الجوّالة" تلتزم بأي معدّل إعادة تحميل حدّدته في واجهة مستخدم "مدير الإعلانات". في حال عدم تفعيل عملية إعادة التحميل، عليك إصدار طلب جديد.
أحداث الإعلانات
من خلال استخدام GADBannerViewDelegate
، يمكنك الاستماع إلى الأحداث في مراحل النشاط،
مثل إغلاق إعلان أو مغادرة المستخدم للتطبيق.
التسجيل في أحداث إعلانات البانر
للتسجيل في أحداث إعلانات البانر، يجب ضبط السمة delegate
على
GAMBannerView
على عنصر يُنفّذ
بروتوكول GADBannerViewDelegate
. بشكل عام، تكون الفئة التي تنفّذ إعلانات البانر هي الفئة المفوَّضة، وفي هذه الحالة يمكن ضبط السمة delegate
على self
.
Swift
import GoogleMobileAds import UIKit class ViewController: UIViewController, GADBannerViewDelegate { var bannerView: GAMBannerView! override func viewDidLoad() { super.viewDidLoad() ... bannerView.delegate = self } }
Objective-C
@import GoogleMobileAds; @interface ViewController () <GADBannerViewDelegate> @property(nonatomic, strong) GAMBannerView *bannerView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; ... self.bannerView.delegate = self; }
تنفيذ أحداث البانر
تم تصنيف كل طريقة من الطرق في GADBannerViewDelegate
على أنّها اختيارية، وبالتالي ما عليك سوى تنفيذ الطرق التي تريدها. ينفذ هذا المثال كل طريقة ويسجل
رسالة في وحدة التحكم:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) { print("bannerViewDidReceiveAd") } func bannerView(_ bannerView: GADBannerView, didFailToReceiveAdWithError error: Error) { print("bannerView:didFailToReceiveAdWithError: \(error.localizedDescription)") } func bannerViewDidRecordImpression(_ bannerView: GADBannerView) { print("bannerViewDidRecordImpression") } func bannerViewWillPresentScreen(_ bannerView: GADBannerView) { print("bannerViewWillPresentScreen") } func bannerViewWillDismissScreen(_ bannerView: GADBannerView) { print("bannerViewWillDIsmissScreen") } func bannerViewDidDismissScreen(_ bannerView: GADBannerView) { print("bannerViewDidDismissScreen") }
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView { NSLog(@"bannerViewDidReceiveAd"); } - (void)bannerView:(GADBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error { NSLog(@"bannerView:didFailToReceiveAdWithError: %@", [error localizedDescription]); } - (void)bannerViewDidRecordImpression:(GADBannerView *)bannerView { NSLog(@"bannerViewDidRecordImpression"); } - (void)bannerViewWillPresentScreen:(GADBannerView *)bannerView { NSLog(@"bannerViewWillPresentScreen"); } - (void)bannerViewWillDismissScreen:(GADBannerView *)bannerView { NSLog(@"bannerViewWillDismissScreen"); } - (void)bannerViewDidDismissScreen:(GADBannerView *)bannerView { NSLog(@"bannerViewDidDismissScreen"); }
يمكنك الاطّلاع على مثال "مفوَّض الإعلان" لتنفيذ طرق تفويض إعلانات البانر في تطبيق iOS API التجريبي.
حالات الاستخدام
في ما يلي بعض الأمثلة على حالات الاستخدام لطرق أحداث الإعلانات هذه.
إضافة بانر إلى العرض الهرمي للعرض بعد تلقّي إعلان
قد تحتاج إلى تأخير إضافة GAMBannerView
إلى
التسلسل الهرمي لطريقة العرض إلى أن يتم تلقّي الإعلان يمكنك إجراء ذلك من خلال الاستماع إلى حدث "bannerViewDidReceiveAd:
" التالي:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) { // Add banner to view and add constraints as above. 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: GADBannerView) { 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: |
viewWillDisappear: من UIViewController |
bannerViewWillDismissScreen: |
viewWillAppear: من UIViewController |
bannerViewDidDismissScreen: |
viewDidAppear: من UIViewController |
احتساب عدد مرات الظهور يدويًا
يمكنك إرسال إشعارات مرات الظهور يدويًا إلى "مدير الإعلانات" إذا كانت لديك شروط خاصة تتعلق بوقت تسجيل مرة الظهور. يمكن تنفيذ ذلك من خلال تفعيل GAMBannerView
أولاً لمرات الظهور اليدوية قبل تحميل الإعلان:
Swift
bannerView.enableManualImpressions = true
Objective-C
self.bannerView.enableManualImpressions = YES;
عندما تلاحظ أنّ أحد الإعلانات قد تمّ إرجاعه بنجاح ويظهر على الشاشة، يمكنك تنشيط مرّة ظهور يدويًا:
Swift
bannerView.recordImpression()
Objective-C
[self.bannerView recordImpression];
أحداث التطبيقات
تتيح لك أحداث التطبيقات إنشاء إعلانات يمكنها إرسال رسائل إلى رمز التطبيق. ويمكن للتطبيق بعد ذلك اتخاذ إجراءات بناءً على هذه الرسائل.
يمكنك الاستماع إلى أحداث التطبيقات الخاصة بـ "مدير الإعلانات" باستخدام GADAppEventDelegate
.
وقد تقع هذه الأحداث في أي وقت خلال دورة حياة الإعلان، حتى قبل استدعاء السمة bannerViewDidReceiveAd:
لكائن GADBannerViewDelegate
.
Swift
// Implement your app event within this method. The delegate will be // notified when the SDK receives an app event message from the ad. // Called when the banner receives an app event. optional public func bannerView(_ banner: GAMBannerView, didReceiveAppEvent name: String, withInfo info: String?)
Objective-C
// Implement your app event within this method. The delegate will be // notified when the SDK receives an app event message from the ad. @optional // Called when the banner receives an app event. - (void)bannerView:(GAMBannerView *)banner didReceiveAppEvent:(NSString *)name withInfo:(NSString *)info;
يمكن تنفيذ طرق أحداث التطبيق في وحدة التحكم في العرض:
Swift
import GoogleMobileAds class ViewController: UIViewController, GADAppEventDelegate { }
Objective-C
@import GoogleMobileAds; @interface ViewController : UIViewController <GADAppEventDelegate> { } @end
تذكّر تحديد المفوَّض باستخدام السمة appEventDelegate
قبل تقديم طلب الإعلان.
Swift
bannerView.appEventDelegate = self
Objective-C
self.bannerView.appEventDelegate = self;
في ما يلي مثال يوضّح كيفية تغيير لون خلفية تطبيقك عن طريق تحديد اللون من خلال أحد أحداث التطبيق:
Swift
func bannerView(_ banner: GAMBannerView, didReceiveAppEvent name: String, withInfo info: String?) { if name == "color" { guard let info = info else { return } switch info { case "green": // Set background color to green. view.backgroundColor = UIColor.green case "blue": // Set background color to blue. view.backgroundColor = UIColor.blue default: // 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>
يمكنك الاطّلاع على مثال على أحداث التطبيقات في "مدير الإعلانات" لتنفيذ أحداث التطبيقات في تطبيق iOS API التجريبي.
مصادر إضافية
أمثلة على GitHub
- مثال على إعلانات البانر التكيُّفية الثابتة: Swift | Objective-C
- عرض توضيحي للميزات المتقدمة: Swift | Objective-C
الخطوات التالية
إعلانات البانر القابلة للتصغير
إعلانات البانر القابلة للتصغير هي إعلانات بانر يتم عرضها مبدئيًا على شكل تراكب أكبر، مع زر لتصغير الإعلان إلى حجم أصغر. ننصحك باستخدامها لتحسين أدائك بشكلٍ أكبر. اطّلِع على إعلانات البانر القابلة للتصغير للحصول على مزيد من التفاصيل.
إعلانات البانر التكيُّفية المضمّنة
إعلانات البانر التكيُّفية المضمّنة هي إعلانات بانر أكبر وأطول مقارنةً بإعلانات البانر التكيّفية الثابتة. فهي ذات ارتفاع متغير، ويمكن أن يصل طولها إلى نفس شاشة الجهاز. يُنصَح باستخدام إعلانات البانر التكيُّفية المضمّنة بدلاً من إعلانات البانر التكيُّفية الثابتة للتطبيقات التي تعرض إعلانات بانر في محتوى قابل للتمرير. راجع إعلانات البانر التكيُّفية المضمّنة لمزيد من التفاصيل.