מודעות באנר

בחירת פלטפורמה: Android iOS Unity Flutter

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

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

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

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

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

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

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

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

הדרך הכי קלה לטעון מודעות בדיקה היא להשתמש במזהה הייעודי של יחידת המודעות לבדיקה של באנרים ל-iOS:

ca-app-pub-3940256099942544/2435281174

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

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

יצירת GADBannerView

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

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

אפשר גם ליצור מופע של GADBannerView באופן ישיר. בדוגמה הבאה נוצר GADBannerView:

Swift

// Initialize the BannerView.
bannerView = BannerView()

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),
])
BannerSnippets.swift

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)
  }
BannerContentView.swift

מוסיפים את UIViewRepresentable להיררכיית התצוגה, ומציינים ערכים של height ושל width:

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

Objective-C

// Initialize the GADBannerView.
self.bannerView = [[GADBannerView alloc] init];

self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:self.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
    [self.bannerView.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor],
    // Center the banner horizontally in the view
    [self.bannerView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
]];
BannerSnippets.m

Interface Builder

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

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

Swift

// Request an anchored adaptive banner with a width of 375.
bannerView.adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
ViewController.swift

Objective-C

// Request an anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(375);
ViewController.m

טעינת מודעה

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

Swift

bannerView.load(Request())
ViewController.swift

SwiftUI

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

Objective-C

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

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

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

רענון מודעה

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

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

אירועים שקשורים למודעות

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

הרשמה לאירועים שקשורים לבאנרים

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

Swift

bannerView.delegate = self
ViewController.swift

SwiftUI

banner.delegate = context.coordinator
BannerContentView.swift

Objective-C

self.bannerView.delegate = self;
ViewController.m

הטמעה של אירועים שקשורים למודעות באנר

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

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  print(#function)
}

func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
  print(#function + ": " + error.localizedDescription)
}

func bannerViewDidRecordClick(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewDidRecordImpression(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewWillPresentScreen(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewWillDismissScreen(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewDidDismissScreen(_ bannerView: BannerView) {
  print(#function)
}
ViewController.swift

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

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

‫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:	‫viewWillAppear: של UIViewController
bannerViewDidDismissScreen:	‫viewDidAppear: של UIViewController

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

דוגמאות ב-GitHub

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

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

השלבים הבאים

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

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

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

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

עיון בנושאים נוספים

• פרטיות המשתמשים