מודעות באנר

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

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

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

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

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

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

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

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

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

במאמר מודעות בדיקה מוסבר איך פועלות מודעות הבדיקה של Mobile Ads SDK.

יצירת GADBannerView

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

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

אפשר גם ליצור מופע ישיר של 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 המרכזי כך ששווה למרכז של תצוגת העל.

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

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 מסומנת כאופציונלית, לכן צריך רק להטמיע את ה-methods הרצויות. הדוגמה הבאה מממשת כל method ורושמת הודעה במסוף:

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

ראו את הדוגמה להענקת גישה למודעות כדי להטמיע שיטות להענקת גישה למודעות באנר באפליקציית ההדגמה ל-API ל-iOS.

SWIFT Objective-C

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

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

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

מומלץ להשהות את ההוספה של 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 יש שיטות להודיע לכם על אירועים, למשל כשקליק גורם להצגה או לסגירה של שכבת-על. אם אתם רוצים לבדוק אם האירועים האלה נבעו ממודעות, אתם צריכים להירשם ל-methods GADBannerViewDelegate.

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

שיטת GADBannerViewDelegate אמצעי תשלום ב-iOS
bannerViewWillPresentScreen: viewWillDisappear: של UIViewController
bannerViewWillDismissScreen: viewWillAppear: של UIViewController
bannerViewDidDismissScreen: viewDidAppear: של UIViewController

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

דוגמאות ב-GitHub

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

השלבים הבאים

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

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

מודעות באנר מותאמות שמוצגות בתוך הטקסט

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

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