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

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

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

إعلان بانر تكيُّفي ثابت

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

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:

طريقة 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 التجريبي.

Swift هدف-ج

مصادر إضافية

أمثلة على GitHub

  • مثال على إعلانات البانر التكيُّفية الثابتة: Swift | Objective-C

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

إعلانات البانر القابلة للتصغير

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

إعلانات البانر التكيُّفية المضمّنة

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

الاطّلاع على مواضيع أخرى