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

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

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

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

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

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

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

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

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

/21775744923/example/adaptive-banner

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

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

إنشاء GAMBannerView

تظهر إعلانات البانر في GAMBannerView عناصر، لذا فإنّ الخطوة الأولى نحو دمج إعلانات البانر هي تضمين GAMBannerView في التسلسل الهرمي للعرض. ويتم ذلك عادةً إما برمجيًا أو من خلال Interface Builder.

برمجيًا

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

Swift

// Initialize the banner view.
bannerView = AdManagerBannerView()
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),
])
AdManagerBannerSnippets.swift

SwiftUI

لاستخدام AdManagerBannerView، أنشئ 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)
  }
BannerContentView.swift

أضِف 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)
}
BannerContentView.swift

Objective-C

// Initialize the banner view.
GAMBannerView *bannerView = [[GAMBannerView 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;
AdManagerBannerSnippets.m

Interface Builder

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

ضبط حجم الإعلان

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

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

Swift

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

Objective-C

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

تحميل إعلان

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

Swift

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

SwiftUI

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

Objective-C

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

[self.bannerView loadRequest:[GAMRequest request]];
AdManagerBannerSnippets.m

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

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

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

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

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

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

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

Swift

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

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];
}
BannerSnippets.m

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

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

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

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

Swift

bannerView.delegate = self
AdManagerBannerSnippets.swift

SwiftUI

banner.delegate = context.coordinator
BannerContentView.swift

Objective-C

bannerView.delegate = self;
AdManagerBannerSnippets.m

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

تم وضع علامة "اختياري" على كل طريقة من الطرق في 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.")
}
AdManagerBannerSnippets.swift

Objective-C

- (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
  NSLog(@"bannerViewDidReceiveAd");
}

- (void)bannerView:(GAMBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
  NSLog(@"bannerView:didFailToReceiveAdWithError: %@", error.localizedDescription);
}

- (void)bannerViewDidRecordImpression:(GAMBannerView *)bannerView {
  NSLog(@"bannerViewDidRecordImpression");
}

- (void)bannerViewWillPresentScreen:(GAMBannerView *)bannerView {
  NSLog(@"bannerViewWillPresentScreen");
}

- (void)bannerViewWillDismissScreen:(GAMBannerView *)bannerView {
  NSLog(@"bannerViewWillDismissScreen");
}

- (void)bannerViewDidDismissScreen:(GAMBannerView *)bannerView {
  NSLog(@"bannerViewDidDismissScreen");
}
AdManagerBannerSnippets.m

اطّلِع على مثال Ad Delegate للاطّلاع على تنفيذ طرق تفويض البانر في تطبيق iOS API Demo.

Swift Objective-C

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

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

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

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

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  // Add banner to view and add constraints.
  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: BannerView) {
  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
AdManagerBannerSnippets.swift

Objective-C

self.bannerView.enableManualImpressions = YES;
AdManagerBannerSnippets.m

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

Swift

bannerView.recordImpression()
AdManagerBannerSnippets.swift

Objective-C

[self.bannerView recordImpression];
AdManagerBannerSnippets.m

ملاحظة: يتم إطلاق مرّات الظهور تلقائيًا عند استدعاء bannerViewDidReceiveAd: معاودة الاتصال. عليك استخدام هذه الميزة فقط إذا كنت تريد تسجيل مرّات الظهور في وقت مختلف.

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

يمكنك الاستماع إلى الأحداث في التطبيقات الخاصة بـ "مدير الإعلانات" باستخدام GADAppEventDelegate. قد تحدث هذه الأحداث في أي وقت خلال فترة عرض الإعلان، حتى قبل استدعاء bannerViewDidReceiveAd: في عنصر GADBannerViewDelegate.

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

Swift

// Set this property before making the request for an ad.
bannerView.appEventDelegate = self
AdManagerBannerSnippets.swift

Objective-C

// Set this property before making the request for an ad.
self.bannerView.appEventDelegate = self;
AdManagerBannerSnippets.m

في ما يلي مثال يوضّح كيفية تغيير لون خلفية تطبيقك من خلال تحديد اللون من حدث في التطبيق:

Swift

func bannerView(
  _ banner: AdManagerBannerView, didReceiveAppEvent name: String, withInfo info: String?
) {
  if name == "color" {
    if info == "green" {
      // Set background color to green.
      view.backgroundColor = UIColor.green
    } else if info == "blue" {
      // Set background color to blue.
      view.backgroundColor = UIColor.blue
    } else {
      // Set background color to black.
      view.backgroundColor = UIColor.black
    }
  }
}
AdManagerBannerSnippets.swift

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];
    }
  }
}
AdManagerBannerSnippets.m

في ما يلي تصميم الإعلان المقابل الذي يرسل رسائل حدث في التطبيق باللون إلى 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>

اطّلِع على مثال Ad Manager App Events للاطّلاع على تنفيذ الأحداث في التطبيقات في تطبيق iOS API Demo.

Swift Objective-C

مراجع إضافية

أمثلة على GitHub

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

• عرض توضيحي للميزات المتقدّمة: Swift | Objective-C

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

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

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

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

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

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

• خصوصية المستخدم