מודעות באנר

מודעות באנר הן מודעות מלבניות שתופסות חלק מהפריסה של האפליקציה. הן נשארות על המסך בזמן שהמשתמשים מבצעים אינטראקציה עם האפליקציה, מעוגנות בחלק העליון או התחתון של המסך או מוטמעות בתוכן בזמן שהמשתמש גולל. ייתכן שיתבצע רענון אוטומטי של מודעות באנר אחרי פרק זמן מסוים. לקבלת מידע נוסף, קראו את המאמר סקירה כללית של מודעות באנר.

במדריך הזה מוסבר איך להתחיל לעבוד עם מודעות באנר מותאמות מעוגנות. המודעות האלה משפרות את הביצועים על ידי אופטימיזציה של גודל המודעה בכל מכשיר לפי רוחב המודעה שציינתם.

מודעת באנר מותאמת מעוגנת

מודעות באנר מותאמות מעוגנות הן מודעות עם יחס גובה-רוחב קבוע, ולא מודעות רגילות בגודל קבוע. יחס הגובה-רוחב דומה לפורמט הסטנדרטי 320*50 המקובל בתחום. אחרי שמציינים את הרוחב המלא הזמין, תוצג מודעה עם גובה אופטימלי לרוחב הזה. הגובה האופטימלי לא משתנה בבקשות מאותו מכשיר, והתצוגות מסביב לא צריכות לזוז כשהמודעה מתעדכנת.

דרישות מוקדמות

ביצוע בדיקות תמיד באמצעות מודעות בדיקה

כשיוצרים ובודקים את האפליקציות, חשוב להשתמש במודעות בדיקה ולא במודעות פעילות בסביבת הייצור. אם לא תעשה זאת, ייתכן שהחשבון שלך יושעה.

הדרך הקלה ביותר לטעון מודעות בדיקה היא באמצעות המזהה הייעודי של יחידת המודעות לבדיקה עבור מודעות באנר ל-iOS: ca-app-pub-3940256099942544/2435281174

היא הוגדרה במיוחד להחזרת מודעות בדיקה לכל בקשה, וניתן להשתמש בה באפליקציות שלכם בזמן תכנות, בדיקה וניפוי באגים. הקפידו להחליף אותה במזהה יחידת המודעות שלכם לפני פרסום האפליקציה.

רוצים לדעת איך מודעות הבדיקה ב-Mobile Ads SDK פועלות במאמר מודעות בדיקה?

יצירת GADBannerView

מודעות באנר מוצגות באובייקטים GADBannerView, כך שהשלב הראשון בשילוב מודעות באנר הוא לכלול GADBannerView בהיררכיית התצוגות. בדרך כלל עושים זאת באופן פרוגרמטי או דרך בונה הממשקים.

באופן פרוגרמטי

ניתן גם ליצור מופע GADBannerView באופן ישיר. הנה דוגמה ליצירת GADBannerView, שנמצא במרכז החלק התחתון של האזור הבטוח במסך:

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GADBannerView!

  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 = GADBannerView(adSize: adaptiveSize)

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: GADBannerView) {
    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) GADBannerView *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 = [[GADBannerView 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

שים לב שבמקרה הזה אנחנו לא מגבילים רוחב או גובה, מכיוון שגודל המודעה שסופק יספק לבאנר את גודל התוכן הפנימי כך שיתאים לגודל התצוגה.

בונה ממשקים

ניתן להוסיף GADBannerView לסטוריבורד או לקובץ Xib. כשמשתמשים בשיטה הזו, חשוב להוסיף רק מגבלות מיקום בבאנר. לדוגמה, כשמציגים מודעת באנר מותאמת בתחתית המסך, מגדירים את החלק התחתון של תצוגת הבאנר בהתאם לחלק העליון של המדריך לפריסה התחתונה, ומגדירים X מרכזי ששווה ל-X המרכזי של תצוגת-העל.

גודל מודעת הבאנר עדיין מוגדר באופן פרוגרמטי:

Swift

  bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)

Objective-C

  self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);

טעינת מודעה

אחרי שה-GADBannerView מוגדר ומגדירים את המאפיינים שלו, זה הזמן לטעון מודעה. לשם כך, מפעילים את loadRequest: באובייקט GADRequest:

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...
  
  //  Set the ad unit ID and view controller that contains the GADBannerView.
  bannerView.adUnitID = "ca-app-pub-3940256099942544/2435281174"
  bannerView.rootViewController = self

  bannerView.load(GADRequest())
}

Objective-C

-   (void)viewDidLoad {
  [super viewDidLoad];
  ...
  
  //  Set the ad unit ID and view controller that contains the GADBannerView.
  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2435281174";
  self.bannerView.rootViewController = self;

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

GADRequest אובייקטים מייצגים בקשה אחת להצגת מודעה, ומכילים מאפיינים לדברים כמו מידע על טירגוט.

אם המודעה לא נטענת, אין צורך לבקש מודעה נוספת באופן מפורש כל עוד הגדרתם את הרענון של יחידת המודעות. Google Mobile Ads SDK פועל בהתאם לקצב הרענון שציינתם AdMob בממשק המשתמש. אם לא הפעלת רענון, יהיה עליך לשלוח בקשה חדשה.

אירועי מודעות

השימוש ב-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 API.

Swift יעד-ג

תרחישים לדוגמה

הנה כמה תרחישים לדוגמה לשימוש בשיטות האלה של אירועי מודעות.

הוספת באנר להיררכיית התצוגה אחרי קבלת מודעה

מומלץ לעכב את ההוספה של 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: viewWillDisappear: של UIViewController
bannerViewWillDismissScreen: viewWillAppear: של UIViewController
bannerViewDidDismissScreen: viewDidAppear: של UIViewController

מקורות מידע נוספים

דוגמאות ב-GitHub

  • דוגמה למודעות באנר מותאמות מעוגנות: Swift | Objective-C

השלבים הבאים

מודעות באנר ניתנות לכיווץ

מודעות באנר ניתנות לכיווץ הן מודעות באנר שמוצגות בהתחלה כשכבת-על גדולה יותר, עם לחצן לכיווץ המודעה לגודל קטן יותר. כדאי להשתמש בה כדי לבצע אופטימיזציה נוספת של הביצועים. פרטים נוספים זמינים במאמר מודעות באנר ניתנות לכיווץ.

מודעות באנר מותאמות המשולבות בתוכן הדף

מודעות באנר מותאמות מוטבעות הן מודעות באנר גדולות וגבוהות יותר בהשוואה למודעות באנר מותאמות מעוגנות. הגובה שלהם משתנה, והגובה שלהם יכול להיות זהה לזה של מסך המכשיר. מומלץ להשתמש במודעות באנר מותאמות מוטמעות במקום במודעות באנר מותאמות מעוגנות באפליקציות שמציבות מודעות באנר בתוכן שמאפשר גלילה. לפרטים נוספים, ראו מודעות באנר מותאמות מוטבעות.

עוד נושאים מעניינים