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

اختيار النظام الأساسي: Android iOS Unity Flutter Android (قديم)

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

يتناول هذا الدليل كيفية تحميل "إعلان بانر تكيُّفي ثابت" في تطبيق iOS.

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

قبل المتابعة، عليك إعداد Google Mobile Ads SDK.

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

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

أسهل طريقة لتحميل الإعلانات الاختبارية هي استخدام رقم تعريف وحدة إعلانية اختبارية مخصّصة لإعلانات البانر على iOS:

ca-app-pub-3940256099942544/2435281174

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

لمزيد من المعلومات حول طريقة عمل الإعلانات الاختبارية في Google Mobile Ads SDK، يُرجى الاطّلاع على الإعلانات الاختبارية.

إنشاء GADBannerView

يتم عرض "إعلانات البانر" في عناصر GADBannerView، لذا فإنّ الخطوة الأولى لدمج "إعلانات البانر" هي تضمين GADBannerView في هيكلية طرق العرض. ويتم ذلك عادةً إما آليًا أو من خلال Interface Builder.

آليًا

يمكن أيضًا إنشاء مثيل GADBannerView مباشرةً. ينشئ المثال التالي GADBannerView:

Swift

// Initialize the banner view.
bannerView = BannerView()
bannerView.delegate = self

bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
NSLayoutConstraint.activate([
  // Align the banner's bottom edge with the safe area's bottom edge
  bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
  // Center the banner horizontally in the view
  bannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
])

SwiftUI

لاستخدام BannerView، أنشِئ UIViewRepresentable:

private struct BannerViewContainer: UIViewRepresentable {
  typealias UIViewType = BannerView
  let adSize: AdSize

  init(_ adSize: AdSize) {
    self.adSize = adSize
  }

  func makeUIView(context: Context) -> BannerView {
    let banner = BannerView(adSize: adSize)
    banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
    banner.load(Request())
    banner.delegate = context.coordinator
    return banner
  }

  func updateUIView(_ uiView: BannerView, context: Context) {}

  func makeCoordinator() -> BannerCoordinator {
    return BannerCoordinator(self)
  }

أضِف UIViewRepresentable إلى التسلسل الهرمي للعرض، مع تحديد قيمتَي height وwidth:

var body: some View {
  Spacer()
  // Request an anchored adaptive banner with a width of 375.
  let adSize = largeAnchoredAdaptiveBanner(width: 375)
  BannerViewContainer(adSize)
    .frame(width: adSize.size.width, height: adSize.size.height)
}

Objective-C

// Initialize the banner view.
GADBannerView *bannerView = [[GADBannerView alloc] init];
bannerView.delegate = self;
UIView *view = self.view;

bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[view addSubview:bannerView];

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
[NSLayoutConstraint activateConstraints:@[
  // Align the banner's bottom edge with the safe area's bottom edge
  [bannerView.bottomAnchor
      constraintEqualToAnchor:view.safeAreaLayoutGuide.bottomAnchor],
  // Center the banner horizontally in the view
  [bannerView.centerXAnchor constraintEqualToAnchor:view.centerXAnchor],
]];

self.bannerView = bannerView;

Interface Builder

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

تحديد حجم الإعلان

توفّر "إعلانات البانر التكيّفية الكبيرة" تنسيقًا أكبر مصمّمًا للتنسيقات غير القابلة للتمرير. مقارنةً بـ "إعلانات البانر التكيُّفية الثابتة" العادية، تتيح هذه الإعلانات حدًا أقصى للارتفاع أكبر (يصل إلى% 20 من ارتفاع الشاشة، بين 50 و150 نقطة). تم تحسين هذه المساحة الإضافية لمحتوى الفيديو.

يحصل المثال التالي على حجم "إعلان بانر تكيُّفي ثابت كبير":

Swift

// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)

Objective-C

// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);

اضبط حجم الإعلان على قيمة أصغر من حجم شاشة الجهاز أو مساوية له. لتحديد الحد الأقصى لحجم الشاشة على الإصدار 26 من نظام التشغيل iOS والإصدارات الأحدث، استخدِم السمة UIWindowScene.effectiveGeometry.coordinateSpace. على الإصدار 18 من iOS والإصدارات الأقدم، استخدِم السمة UIWindowScene.coordinateSpace. للحصول على تفاصيل حول قيود الحجم، يُرجى الاطّلاع على متطلبات حجم طلب عرض الإعلان.

تحميل إعلان

بعد إعداد GADBannerView وخصائصه، مثل adUnitID، يحين وقت تحميل الإعلان. ويتم ذلك من خلال استدعاء loadRequest: على عنصر GADRequest:

Swift

func loadBannerAd(bannerView: BannerView) {
  // Request a large anchored adaptive banner with a width of 375.
  bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
  bannerView.load(Request())
}

SwiftUI

banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())

Objective-C

// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);

[self.bannerView loadRequest:[GADRequest request]];

تمثّل عناصر GADRequest طلب عرض إعلان واحدًا، وتحتوي على سمات لأمور مثل معلومات الاستهداف.

إعادة تحميل إعلان

إذا ضبطت وحدتك الإعلانية لإعادة التحميل، لن تحتاج إلى طلب إعلان آخر عند تعذُّر تحميل الإعلان. Google Mobile Ads SDK تحترم أي معدّل إعادة تحميل حدّدته في واجهة مستخدم AdMob. إذا لم تفعّل إعادة التحميل، أرسِل طلبًا جديدًا. لمزيد من التفاصيل حول إعادة تحميل الوحدات الإعلانية، مثل ضبط معدّل إعادة التحميل، يُرجى الاطّلاع على ضبط خيار إعادة التحميل التلقائية لإعلانات البانر.

التعامل مع تغييرات الاتجاه

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

Swift

override func viewWillTransition(
  to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator
) {
  coordinator.animate(alongsideTransition: { _ in
    // Load a new ad for the new orientation.
  })
}

Objective-C

- (void)viewWillTransitionToSize:(CGSize)size
       withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
  [coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
    // Load a new ad for the new orientation.
  } completion:nil];
}

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

من خلال استخدام GADBannerViewDelegate، يمكنك الاستماع إلى الأحداث التي تتم في مراحل النشاط، مثل إغلاق إعلان أو مغادرة المستخدم للتطبيق.

التسجيل في أحداث البانر

للتسجيل في أحداث الإعلانات الصورية، اضبط السمة delegate في GADBannerView على عنصر ينفّذ البروتوكول GADBannerViewDelegate. بشكل عام، الفئة التي تنفّذ "إعلانات البانر" تعمل أيضًا كفئة المفوَّض، وفي هذه الحالة، يمكن ضبط السمة delegate على self.

Swift

bannerView.delegate = self

SwiftUI

banner.delegate = context.coordinator

Objective-C

bannerView.delegate = self;

تنفيذ أحداث إعلانات البانر

تم وضع علامة &quot;اختياري&quot; على كل طريقة في GADBannerViewDelegate، لذا عليك تنفيذ الطرق التي تريدها فقط. ينفّذ هذا المثال كل طريقة ويسجّل رسالة في وحدة التحكّم:

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  print("Banner ad loaded.")
}

func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
  print("Banner ad failed to load: \(error.localizedDescription)")
}

func bannerViewDidRecordImpression(_ bannerView: BannerView) {
  print("Banner ad recorded an impression.")
}

func bannerViewDidRecordClick(_ bannerView: BannerView) {
  print("Banner ad recorded a click.")
}

func bannerViewWillPresentScreen(_ bannerView: BannerView) {
  print("Banner ad will present screen.")
}

func bannerViewWillDismissScreen(_ bannerView: BannerView) {
  print("Banner ad will dismiss screen.")
}

func bannerViewDidDismissScreen(_ bannerView: BannerView) {
  print("Banner ad did dismiss screen.")
}

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");
}

يمكنك الاطّلاع على مثال "مفوَّض الإعلانات" (Ad Delegate) لمعرفة كيفية تنفيذ طرق تفويض إعلانات البانر في تطبيق iOS API Demo.

Swift Objective-C

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

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

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

قد تحتاج إلى تأخير إضافة GADBannerView إلى هيكلية طرق العرض إلى ما بعد تلقّي الإعلان. يمكنك إجراء ذلك من خلال الاستماع إلى حدث bannerViewDidReceiveAd::

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  // Add banner to view and add constraints.
  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: BannerView) {
  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: ‫viewWillDisappear: في UIViewController
bannerViewWillDismissScreen: ‫UIViewController‏ viewWillAppear:
bannerViewDidDismissScreen: ‫viewDidAppear: في UIViewController

مراجع إضافية

أمثلة على GitHub

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

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

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

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

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

استكشاف مواضيع أخرى