إعلانات البانر

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

تحتل إعلانات البانر موضعًا داخل تصميم التطبيق، إما في أعلى شاشة الجهاز أو أسفلها. وهي تبقى على الشاشة بينما يتفاعل المستخدمون مع التطبيق، ويمكن إعادة تحميلها تلقائيًا بعد فترة معينة من الوقت. إذا كنت مستخدمًا جديدًا لإعلانات الجوّال، فهي نقطة بداية رائعة. دراسة حالة.

يوضّح لك هذا الدليل كيفية دمج إعلانات البانر من 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".

Swift Purpose-C

حالات الاستخدام

في ما يلي بعض الأمثلة على حالات استخدام طرق أحداث الإعلانات هذه.

إضافة إعلان بانر إلى التدرّج الهرمي للعرض بعد تلقّي الإعلان

قد تحتاج إلى تأخير في إضافة 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));

مراجع إضافية

أمثلة على GitHub

  • مثال على إعلانات البانر: Swift | Purpose-C

  • إصدار تجريبي للميزات المتقدمة: Swift | Purpose-C

  • مثال على UITableView لإعلان البانر على GitHub: Swift | Purpose-C

برامج فيديو تعليمية حول "إعلانات المرآب" على الأجهزة الجوّالة

قصص النجاح