מודעות באנר

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

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

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

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

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

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

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

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

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

/21775744923/example/adaptive-banner

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

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

יצירת GAMBannerView

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

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

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

Swift

// Initialize the banner view.
bannerView = AdManagerBannerView()

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 = currentOrientationAnchoredAdaptiveBanner(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];
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 לקובץ storyboard או לקובץ xib. אם בחרתם בשיטה הזו, חשוב להוסיף את אילוצי המיקום רק לבאנר. לדוגמה, כשמציגים מודעת באנר מותאמת בתחתית המסך, מגדירים את החלק התחתון של תצוגת הבאנר כך שיהיה שווה לחלק העליון של מדריך הפריסה התחתון, ומגדירים את האילוץ centerX כך שיהיה שווה ל-centerX של תצוגת העל.

הגדרת גודל המודעה

מגדירים את המבנה GADSize למודעת באנר מותאמת מסוג עוגן עם רוחב מוגדר:

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

טעינת מודעה

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

Swift

bannerView.load(AdManagerRequest())
ViewController.swift

SwiftUI

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

Objective-C

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

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

רענון מודעה

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

טיפול בשינויים בכיוון

כשכיוון המסך של האפליקציה משתנה, למשל מ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
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

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

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

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

מומלץ להוסיף את 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

ספירה ידנית של חשיפות

אתם יכולים לשלוח פינגים של חשיפות ל-Ad Manager באופן ידני אם יש לכם תנאים מיוחדים שקובעים מתי צריך לתעד חשיפה. כדי לעשות את זה, צריך קודם להפעיל 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

אירועים באפליקציה

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

כדי להירשם לאירועים באפליקציה, צריך להגדיר את מאפיין הנציג ב-GAMBannerView לאובייקט שמטמיע את הפרוטוקול GADAppEventDelegate. בדרך כלל, הסיווג שמטמיע מודעות באנר פועל גם כסיווג של נציג, ובמקרה כזה אפשר להגדיר את מאפיין הנציג כ-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 (אירועים באפליקציה ב-Ad Manager) מוסבר איך מטמיעים אירועים באפליקציה באפליקציית ההדגמה של iOS API.

‫Swift ‫Objective-C

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

דוגמאות ב-GitHub

השלבים הבאים

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

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

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

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

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