تحتل إعلانات البانر موضعًا داخل تصميم التطبيق، إما في أعلى شاشة الجهاز أو أسفلها. وهي تبقى على الشاشة بينما يتفاعل المستخدمون مع التطبيق، ويمكن إعادة تحميلها تلقائيًا بعد فترة معينة من الوقت. إذا كنت مستخدمًا جديدًا لإعلانات الجوّال، فهي نقطة بداية رائعة. دراسة حالة.
يوضّح لك هذا الدليل كيفية دمج إعلانات البانر من AdMob إلى تطبيقات iOS. بالإضافة إلى مقتطفات الرمز والتعليمات، يتضمّن هذا الملف معلومات حول تغيير حجم إعلانات البانر بشكل سليم وروابط إلى موارد إضافية.
المتطلبات الأساسية
- أكمِل دليل البدء.
الاختبار دائمًا باستخدام الإعلانات التجريبية
عند إنشاء تطبيقاتك واختبارها، احرص على استخدام إعلانات تجريبية بدلاً من إعلانات الإنتاج المباشر. ويمكن أن يؤدي عدم الالتزام بذلك إلى تعليق حسابك.
إن أسهل طريقة لتحميل إعلانات تجريبية هي استخدام رقم تعريف الوحدة الإعلانية الاختبارية المخصصة لنا لإعلانات بانر iOS:
ca-app-pub-3940256099942544/2934735716
وقد تم ضبطها خصيصًا لعرض إعلانات اختبارية لكل طلب، ويمكنك استخدامها في تطبيقاتك أثناء الترميز والاختبار وتصحيح الأخطاء. ما عليك سوى التأكّد من استبداله برقم تعريف الوحدة الإعلانية قبل نشر تطبيقك.
للاطّلاع على مزيد من المعلومات حول آلية عمل الإعلانات الاختبارية لحزمة تطوير البرامج (SDK) للإعلانات على الأجهزة الجوّالة، راجِع الإعلانات الاختبارية.
إنشاء GADBannerView
يتم عرض إعلانات البانر في عناصر GADBannerView
، لذا الخطوة الأولى نحو دمج إعلانات البانر هي تضمين GADBannerView
في التدرّج الهرمي للعرض. ويتم ذلك عادةً باستخدام أداة إنشاء الواجهة أو آليًا.
أداة إنشاء الواجهات
يمكن إضافة GADBannerView
إلى لوحة العمل أو ملف xib مثل أي طريقة عرض عادية. عند استخدام هذه الطريقة، تأكد من إضافة قيود على العرض والارتفاع بما يتناسب مع حجم الإعلان الذي تريد عرضه. على سبيل المثال،
عند عرض إعلان بانر (320x50)، يمكنك استخدام قيد عرض يبلغ 320 نقطة،
وحد ارتفاع 50 نقطة.
آليًا
يمكن أيضًا إنشاء مثيل GADBannerView
مباشرةً.
في ما يلي مثال على كيفية إنشاء GADBannerView
يتماشى مع الجزء السفلي من المنطقة الآمنة للشاشة، بحجم بانر 320x50:
Swift
import GoogleMobileAds import UIKit class ViewController: UIViewController { var bannerView: GADBannerView! override func viewDidLoad() { super.viewDidLoad() // In this case, we instantiate the banner with desired ad size. bannerView = GADBannerView(adSize: GADAdSizeBanner) addBannerViewToView(bannerView) } func addBannerViewToView(_ bannerView: GADBannerView) { bannerView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(bannerView) view.addConstraints( [NSLayoutConstraint(item: bannerView, attribute: .bottom, relatedBy: .equal, toItem: bottomLayoutGuide, attribute: .top, 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) GADBannerView *bannerView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // In this case, we instantiate the banner with desired ad size. self.bannerView = [[GADBannerView alloc] initWithAdSize:GADAdSizeBanner]; [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.bottomLayoutGuide attribute:NSLayoutAttributeTop multiplier:1 constant:0], [NSLayoutConstraint constraintWithItem:bannerView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0] ]]; } @end
تجدر الإشارة إلى أنّنا في هذه الحالة لا نفرض قيودًا على العرض أو الارتفاع، لأنّ حجم الإعلان المقدَّم سيمنح بانر حجم محتوى أساسيًا لتحديد حجم العرض.
إذا لم تكن تريد استخدام حجم عادي محدّد ثابت، يمكنك ضبط حجم مخصّص باستخدام GADAdSizeFromCGSize
.
اطّلع على قسم حجم إعلان البانر لمزيد من المعلومات.
إعداد GADBannerView المواقع
لتحميل الإعلانات وعرضها، يتطلب GADBannerView
إعداد بعض الخصائص.
rootViewController
- تُستخدم وحدة التحكم في طريقة العرض هذه لتقديم تراكب عند النقر على الإعلان. ويجب عادةً ضبطها على وحدة التحكّم بالملف الشخصي التي تحتوي علىGADBannerView
.adUnitID
: هذا هو رقم تعريف الوحدة الإعلانية الذي يجب أن يحمّل منهGADBannerView
الإعلانات.
في ما يلي مثال على الرمز يوضّح كيفية ضبط الخاصيّتَين المطلوبتَين في طريقة viewDidLoad
في UIViewController:
Swift
override func viewDidLoad() { super.viewDidLoad() ... bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716" bannerView.rootViewController = self }
Objective-C
- (void)viewDidLoad { [super viewDidLoad]; ... self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716"; self.bannerView.rootViewController = self; }
تحميل إعلان
بعد إعداد GADBannerView
وضبط خصائصه، حان الوقت لتحميل إعلان. ويتم ذلك من خلال استدعاء loadRequest:
على الكائن GADRequest
:
Swift
override func viewDidLoad() { super.viewDidLoad() ... bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716" bannerView.rootViewController = self bannerView.load(GADRequest()) }
Objective-C
- (void)viewDidLoad { [super viewDidLoad]; ... self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716"; self.bannerView.rootViewController = self; [self.bannerView loadRequest:[GADRequest request]]; }
GADRequest تمثل الكائنات طلب إعلان واحدًا، وتحتوي على خصائص لأشياء مثل معلومات الاستهداف.
أحداث الإعلانات
وباستخدام GADBannerViewDelegate
، يمكنك الاستماع إلى
أحداث مراحل النشاط، مثل إغلاق إعلان أو مغادرة المستخدم للتطبيق.
التسجيل في أحداث إعلانات البانر
للتسجيل في أحداث إعلانات البانر، يجب ضبط السمة delegate
على
GADBannerView
على عنصر ينفّذ
بروتوكول GADBannerViewDelegate
. وبوجه عام، تعمل الفئة التي تنفّذ إعلانات البانر أيضًا كفئة تفويض، وفي هذه الحالة، يمكن ضبط السمة delegate
على self
.
Swift
import GoogleMobileAds import UIKit class ViewController: UIViewController, GADBannerViewDelegate { var bannerView: GADBannerView! override func viewDidLoad() { super.viewDidLoad() ... bannerView.delegate = self } }
Objective-C
@import GoogleMobileAds; @interface ViewController () <GADBannerViewDelegate> @property(nonatomic, strong) GADBannerView *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".
حالات الاستخدام
في ما يلي بعض الأمثلة على حالات استخدام طرق أحداث الإعلانات هذه.
إضافة إعلان بانر إلى التدرّج الهرمي للعرض بعد تلقّي الإعلان
قد تحتاج إلى تأخير في إضافة GADBannerView
إلى التدرّج الهرمي للعرض حتى بعد تلقّي الإعلان. ويمكنك تنفيذ هذا الإجراء من خلال الاستماع إلى الفعالية bannerViewDidReceiveAd:
:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) { // Add banner to view and add constraints as above. addBannerViewToView(bannerView) }
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)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:(GADBannerView *)bannerView { bannerView.alpha = 0; [UIView animateWithDuration:1.0 animations:^{ bannerView.alpha = 1; }]; }
إيقاف التطبيق مؤقتًا واستئنافه
يستخدم بروتوكول GADBannerViewDelegate
طرقًا لإعلامك بالأحداث، مثلاً عندما تؤدي النقرة إلى عرض تراكب أو رفضه.
وإذا أردت تتبّع ما إذا كانت هذه الأحداث ناتجة عن إعلانات، يمكنك التسجيل في طرق GADBannerViewDelegate
هذه.
لالتقاط جميع أنواع العروض التقديمية المركّبة أو الاستدعاءات الخارجية للمتصفح، وليس فقط تلك التي تأتي من النقرات على الإعلانات، من الأفضل أن يستمع تطبيقك إلى الطرق المكافئة على UIViewController
أو UIApplication
. في ما يلي جدول يعرض طرق iOS المكافئة التي يتم استدعاؤها في آنٍ واحد مع طرق GADBannerViewDelegate
:
طريقة GADBannerViewDelegate | طريقة iOS |
---|---|
bannerViewWillPresentScreen: |
UIViewController's viewWillDisappear: |
bannerViewWillDismissScreen: |
UIViewController's viewWillAppear: |
bannerViewDidDismissScreen: |
UIViewController's viewDidAppear: |
أحجام البانر
يسرد الجدول التالي أحجام إعلانات البانر العادية.
الحجم بالنقاط (WxH) | الوصف | أماكن التوفّر | ثابت حجم الإعلان |
---|---|---|---|
320 × 50 | "بانر" | الهواتف والأجهزة اللوحية | GADAdSizeBanner |
320×100 | بانر كبير | الهواتف والأجهزة اللوحية | GADAdSizeLargeBanner |
300 × 250 | مستطيل متوسط IAB | الهواتف والأجهزة اللوحية | GADAdSizeMediumRectangle |
468×60 | بانر IAB بالحجم الكامل | الأجهزة اللوحية | GADAdSizeFullBanner |
728×90 | لوحة الصدارة في مكتب الإعلانات التفاعلية (IAB) | الأجهزة اللوحية | GADAdSizeLeaderboard |
العرض المتوفّر × الارتفاع التكيّفي | إعلان بانر تكيُّفي | الهواتف والأجهزة اللوحية | لا ينطبق |
أحجام الإعلانات المخصصة
لتحديد حجم بانر مخصّص، يمكنك ضبط الحجم الذي تريده باستخدام
GADAdSizeFromCGSize
، كما هو موضّح
هنا:
Swift
let adSize = GADAdSizeFromCGSize(CGSize(width: 300, height: 50))
Objective-C
GADAdSize size = GADAdSizeFromCGSize(CGSizeMake(300, 50));