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

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

يوضّح لك هذا الدليل كيفية دمج إعلانات البانر منAd Manager في أحد تطبيقات iOS. وبالإضافة إلى مقتطفات الرموز والتعليمات، يتضمّن التقرير معلومات حول تحديد حجم إعلانات البانر بشكلٍ صحيح وروابط تؤدي إلى موارد إضافية.

المتطلبات الأساسية

الاختبار دائمًا مع الإعلانات الاختبارية

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

تتمثل أسهل طريقة لتحميل الإعلانات الاختبارية في استخدام رقم تعريف الوحدة الإعلانية التجريبية المخصّص لإعلانات البانر لنظام التشغيل iOS: /6499/example/banner

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

لمزيد من المعلومات عن آلية عمل الإعلانات الاختبارية في "SDK لإعلانات الأجهزة الجوّالة"، اطّلع على الإعلانات الاختبارية.

إنشاء GAMBannerView

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

أداة إنشاء الواجهة

يمكن إضافة GAMBannerView إلى مخطط القصة أو ملف xib كأي طريقة عرض عادية. عند استخدام هذه الطريقة، احرص على إضافة قيود العرض والارتفاع لتتناسب مع حجم الإعلان الذي تريد عرضه. على سبيل المثال، عند عرض بانر (320×50)، استخدِم قيدًا للعرض يبلغ 320 نقطة وقيدًا للارتفاع يبلغ 50 نقطة.

آليًا

يمكن أيضًا إنشاء مثيل GAMBannerView مباشرةً. في ما يلي مثال على كيفية إنشاء GAMBannerView، بالمحاذاة إلى وسط الجزء السفلي من المنطقة الآمنة على الشاشة، وبحجم بانر 320×50:

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GAMBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    // In this case, we instantiate the banner with desired ad size.
    bannerView = GAMBannerView(adSize: GADAdSizeBanner)

    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];
  
  // In this case, we instantiate the banner with desired ad size.
  self.bannerView = [[GAMBannerView 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.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

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

إذا كنت لا تريد استخدام حجم عادي محدّد باستخدام حجم ثابت، يمكنك ضبط حجم مخصّص باستخدام GADAdSizeFromCGSize. راجِع قسم حجم البانر للحصول على مزيد من المعلومات.

ضبط GAMBannerView المواقع

لتحميل الإعلانات وعرضها، يتطلب GAMBannerView ضبط بعض الخصائص.

  • rootViewController - تُستخدَم وحدة التحكم في العرض هذه لتقديم تراكب عند النقر على الإعلان. يجب عادةً ضبطها على وحدة التحكّم في طريقة العرض التي تتضمّن GAMBannerView.
  • adUnitID - رقم تعريف الوحدة الإعلانية الذي يجب أن يتم من خلاله GAMBannerView تحميل الإعلانات.

إليك مثال على رمز يوضّح كيفية ضبط السمتَين المطلوبتَين في طريقة viewDidLoad في UIViewController:

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "/6499/example/banner"
  bannerView.rootViewController = self
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"/6499/example/banner";
  self.bannerView.rootViewController = self;
}

تحميل إعلان

وبعد ضبط GAMBannerView وضبط خصائصه، يحين وقت تحميل الإعلان. ويتم ذلك من خلال استدعاء loadRequest: على كائن GAMRequest:

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "/6499/example/banner"
  bannerView.rootViewController = self
  bannerView.load(GAMRequest())
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"/6499/example/banner";
  self.bannerView.rootViewController = self;
  [self.bannerView loadRequest:[GAMRequest request]];
}

GAMRequest تمثل الكائنات طلب إعلان واحدًا، وتحتوي على خصائص لأشياء مثل معلومات الاستهداف.

إذا تعذّر تحميل إعلانك، لن تحتاج إلى طلب إعلان آخر بوضوح طالما كنت قد أعددت وحدتك الإعلانية لإعادة التحميل، وذلك لأنّ حزمة تطوير البرامج (SDK) لإعلانات Google على الأجهزة الجوّالة تلتزم بأي معدّل تحديث حدّدته في واجهة المستخدم فيAd Manager . في حال عدم تفعيل إعادة التحميل، ستحتاج إلى إصدار طلب جديد.

أحداث الإعلانات

من خلال استخدام 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.

Swift الهدف-ج

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

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

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

يمكنك تأخير إضافة 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:

طريقة GADBannerView بدقة طريقة iOS
bannerViewWillPresentScreen: viewWillDisappear: في UIViewController
bannerViewWillDismissScreen: viewWillAppear: في UIViewController
bannerViewDidDismissScreen: viewDidAppear: في UIViewController

يسرد الجدول التالي أحجام البانر العادية.

الحجم بالنقاط (عرض × ارتفاع) الوصف مدى التوفّر ثابت حجم الإعلان
320x50 بانر الهواتف والأجهزة اللوحية GADAdSizeBanner
320×100 بانر كبير الهواتف والأجهزة اللوحية GADAdSizeLargeBanner
300 × 250 إعلان مستطيل متوسط من مكتب الإعلانات التفاعلية (IAB) الهواتف والأجهزة اللوحية GADAdSizeMediumRectangle
468×60 بانر بالحجم الكامل لمكتب الإعلانات التفاعلية الأجهزة اللوحية GADAdSizeFullBanner
728×90 قائمة صدارة IAB الأجهزة اللوحية GADAdSizeLeaderboard
العرض الذي تم إدخاله × الارتفاع التكيُّفي إعلان البانر التكيُّفي الهواتف والأجهزة اللوحية لا ينطبق

أحجام إعلانات مخصصة

لتحديد حجم بانر مخصّص، اضبط الحجم المطلوب باستخدام GADAdSizeFromCGSize، كما هو موضّح هنا:

Swift

let adSize = GADAdSizeFromCGSize(CGSize(width: 300, height: 50))

Objective-C

GADAdSize size = GADAdSizeFromCGSize(CGSizeMake(300, 50));

حجم إعلان مخصص

بالإضافة إلى الوحدات الإعلانية العادية، يسمح لك "مدير إعلانات Google" بعرض أيّ وحدة إعلانية في التطبيق. ويجب أن يتطابق حجم الإعلان (العرض والارتفاع) المحدّد لطلب إعلان مع أبعاد عرض الإعلان (GAMBannerView) المعروض في التطبيق. لضبط حجم مخصّص، استخدِم GADAdSizeFromCGSize.

Swift

// Define custom GADAdSize of 250x250 for GAMBannerView.
let customAdSize = GADAdSizeFromCGSize(CGSize(width: 250, height: 250))
bannerView = GAMBannerView(adSize: customAdSize)

Objective-C

// Define custom GADAdSize of 250x250 for GAMBannerView
GADAdSize customAdSize = GADAdSizeFromCGSize(CGSizeMake(250, 250));
self.bannerView = [[GAMBannerView alloc] initWithAdSize:customAdSize];

شاهد مثال "أحجام إعلانات متعددة" في "مدير الإعلانات" لتنفيذ حجم إعلان مخصّص في التطبيق التجريبي لواجهة برمجة تطبيقات iOS.

Swift الهدف-ج

أحجام إعلانات متعددة

يسمح لك "مدير الإعلانات" بتحديد أحجام إعلانات متعددة قد تكون مؤهَّلة للعرض في GAMBannerView. هناك ثلاث خطوات مطلوبة لاستخدام هذه الميزة:

  1. في واجهة مستخدم "مدير الإعلانات"، يمكنك إنشاء عنصر يستهدف الوحدة الإعلانية نفسها المرتبطة بتصميمات إعلانات ذات أحجام مختلفة.

  2. في تطبيقك، اضبط سمة validAdSizes على GAMBannerView:

    Swift

    // Define an optional array of GADAdSize to specify all valid sizes that are appropriate
    // for this slot. Never create your own GADAdSize directly. Use one of the
    // predefined standard ad sizes (such as GADAdSizeBanner), or create one using
    // the GADAdSizeFromCGSize method.
    //
    // Note: Ensure that the allocated GAMBannerView is defined with an ad size. Also note
    // that all desired sizes should be included in the validAdSizes array.
    bannerView.validAdSizes = [NSValueFromGADAdSize(GADAdSizeBanner),
        NSValueFromGADAdSize(GADAdSizeMediumRectangle),
        NSValueFromGADAdSize(GADAdSizeFromCGSize(CGSize(width: 120, height: 20)))]
    

    Objective-C

    // Define an optional array of GADAdSize to specify all valid sizes that are appropriate
    // for this slot. Never create your own GADAdSize directly. Use one of the
    // predefined standard ad sizes (such as GADAdSizeBanner), or create one using
    // the GADAdSizeFromCGSize method.
    //
    // Note: Ensure that the allocated GAMBannerView is defined with an ad size. Also note
    // that all desired sizes should be included in the validAdSizes array.
    self.bannerView.validAdSizes = @[
        NSValueFromGADAdSize(GADAdSizeBanner),
        NSValueFromGADAdSize(GADAdSizeMediumRectangle),
        NSValueFromGADAdSize(GADAdSizeFromCGSize(CGSizeMake(120, 20)))
    ];
    
  3. يمكنك تطبيق طريقة GADAdSizeDelegate لرصد أي تغيير في حجم الإعلان.

    Swift

    public func bannerView(_ bannerView: GADBannerView, willChangeAdSizeTo size: GADAdSize)
    

    Objective-C

    • (void)bannerView:(GAMBannerView *)view willChangeAdSizeTo:(GADAdSize)size;
  4. تذكّر تحديد المفوَّض قبل تقديم طلب إنشاء إعلان.

    Swift

    bannerView.adSizeDelegate = self

    Objective-C

    self.bannerView.adSizeDelegate = self;

شاهد مثال "أحجام إعلانات متعددة" في "مدير الإعلانات" لتنفيذ حجم إعلان مخصّص في التطبيق التجريبي لواجهة برمجة تطبيقات iOS.

Swift الهدف-ج

احتساب عدد مرات الظهور يدويًا

يمكنك إرسال إشعارات مرات الظهور يدويًا إلى "مدير الإعلانات" إذا كانت لديك شروط خاصة لوقت تسجيل مرة ظهور. يمكن تنفيذ ذلك من خلال تفعيل GAMBannerView أولاً لمرات الظهور اليدوية قبل تحميل إعلان:

Swift

bannerView.enableManualImpressions = true

Objective-C

self.bannerView.enableManualImpressions = YES;

عندما تكتشف أنّ أحد الإعلانات قد تم عرضه بنجاح ويظهر على الشاشة، يمكنك تنشيط مرة الظهور يدويًا:

Swift

bannerView.recordImpression()

Objective-C

[self.bannerView recordImpression];

أحداث التطبيقات

تتيح لك أحداث التطبيقات إنشاء إعلانات يمكنها إرسال رسائل إلى رمز التطبيق. ويمكن للتطبيق بعد ذلك اتخاذ إجراءات بناءً على هذه الرسائل.

يمكنك الاطّلاع على أحداث التطبيقات الخاصة بـ "مدير إعلانات Google" باستخدام 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 التجريبي.

Swift الهدف-ج

مراجع إضافية

أمثلة على GitHub

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

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

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

الخطوات التالية

مزيد من المعلومات عن خصوصية المستخدم