מודעות באנר

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

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

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

• מבצעים את כל ההוראות למדריך לתחילת העבודה.

תמיד לבדוק עם מודעות בדיקה

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

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

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

למידע נוסף על אופן הפעולה של מודעות בדיקה של SDK למודעות לנייד, ניתן לעיין במאמר מודעות בדיקה.

יצירת GADBannerView

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

הכלי לבניית ממשקים

ניתן להוסיף GADBannerView ללוח סטורי או לקובץ Xbox, כמו כל תצוגה אופיינית. בעת שימוש בשיטה זו, הקפידו להוסיף מגבלות רוחב וגובה שתואמות לגודל המודעה שאתם רוצים להציג. לדוגמה, כשמציגים מודעת באנר (320x50), משתמשים במגבלת רוחב של 320 נקודות ובמגבלת גובה של 50 נקודות.

פרוגרמטי

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

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    // In this case, we instantiate the banner with desired ad size.
    bannerView = GADBannerView(adSize: GADAdSizeBanner)

    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];
  
  // In this case, we instantiate the banner with desired ad size.
  self.bannerView = [[GADBannerView alloc]
      initWithAdSize:GADAdSizeBanner];

  [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

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

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

הגדרת GADBannerView נכסים

כדי לטעון ולהציג מודעות, GADBannerView נדרשים כמה נכסים.

• rootViewController - בקר התצוגה הזה משמש להצגת שכבת-על כאשר לוחצים על המודעה. בדרך כלל צריך להגדיר אותו כבקר התצוגה שמכיל את GADBannerView.
• adUnitID - זהו מזהה יחידת המודעות שממנו GADBannerViewצריך לטעון מודעות.

זוהי דוגמה לקוד שמראה איך להגדיר את שני מאפייני החובה בשיטה viewDidLoad של UIViewController:

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
  bannerView.rootViewController = self
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
}

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

טעינת מודעה

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

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
  bannerView.rootViewController = self
  bannerView.load(GADRequest())
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  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");
}

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

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

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

שיטת GADBannerViewDelegate	שיטת iOS
bannerViewWillPresentScreen:	viewWillDisappear:ViewUIController's
bannerViewWillDismissScreen:	viewWillAppear:ViewUIController's
bannerViewDidDismissScreen:	viewDidAppear:ViewUIController's

גדלים של מודעות באנר

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

גודל בנקודות (WxH)	תיאור	זמינות	קבוע גודל המודעה
320x50	באנר	טלפונים וטאבלטים	GADAdSizeBanner
320x100	מודעת באנר גדולה	טלפונים וטאבלטים	GADAdSizeLargeBanner
300x250	מלבן בינוני של IAB	טלפונים וטאבלטים	GADAdSizeMediumRectangle
468x60	באנר בגודל מלא של IAB	טאבלטים	GADAdSizeFullBanner
728x90	Leaderboard של IAB	טאבלטים	GADAdSizeLeaderboard
רוחב נתון x גובה ניתן להתאמה	מודעת באנר מותאמת	טלפונים וטאבלטים	לא רלוונטי

גדלים מותאמים אישית של מודעות

כדי להגדיר גודל מותאם אישית של מודעות באנר, הגדירו את הגודל הרצוי באמצעותGADAdSizeFromCGSize, כפי שמוצג כאן:

Swift

let adSize = GADAdSizeFromCGSize(CGSize(width: 300, height: 50))

Objective-C

GADAdSize size = GADAdSizeFromCGSize(CGSizeMake(300, 50));

משאבים נוספים

דוגמאות ב-GitHub

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

• הדגמה של התכונות המתקדמות: Swift | Objective-C

• דוגמה ל-UITableView של GitHub: Swift | Objective-C

מדריכי וידאו לסדנה לנייד

• הטמעה של מודעות באנר
• שיטות מומלצות לשימוש במודעות באנר

סיפורי הצלחה

• דוגמה לשימוש לדוגמה