מודעות באנר הן מודעות מלבניות שתופסות חלק מהפריסה של האפליקציה. הן מוצגות במסך גם בזמן אינטראקציות של המשתמשים באפליקציה – מעוגנות בראש המסך או בתחתית המסך או משולבות בתוכן בזמן שמשתמשים גוללים בו. יכול להיות שיתבצע רענון אוטומטי של מודעות באנר אחרי פרק זמן מסוים. מידע נוסף זמין במאמר סקירה כללית בנושא מודעות באנר.
במדריך הזה מוסבר איך להתחיל להשתמש במודעות באנר מותאמות ומעוגנות. מודעות מהסוג הזה עוברות אופטימיזציה לגדלים של מכשירים שונים, כדי לשפר את הביצועים, והרוחב שלהן נקבע לפי הערך שאתם מציינים.
מודעת באנר מותאמת ומעוגנת
מודעות באנר מותאמות מעוגנות הן מודעות עם יחס גובה-רוחב קבוע, ולא מודעות בגודל קבוע רגיל. יחס הגובה-רוחב דומה לסטנדרט המקובל בתחום של 320x50. אחרי שמציינים את הרוחב המלא שזמין, המערכת מחזירה מודעה עם גובה אופטימלי לרוחב הזה. הגובה האופטימלי לא משתנה בין בקשות מאותו מכשיר, ולא צריך להזיז את התצוגות שמסביב כשהמודעה מתרעננת.
דרישות מוקדמות
- כדאי לעיין במדריך לתחילת העבודה.
תמיד כדאי לבצע בדיקות באמצעות מודעות בדיקה
כשמפתחים ובודקים אפליקציות, חשוב להשתמש במודעות בדיקה ולא במודעות פעילות שמוצגות למשתמשים. אם לא תעשו את זה, אנחנו עשויים להשעות את החשבון שלכם.
הדרך הכי קלה לטעון מודעות בדיקה היא להשתמש במזהה הייעודי של יחידת המודעות לבדיקה של באנרים ל-iOS:
/21775744923/example/adaptive-banner
הוא הוגדר במיוחד להחזרת מודעות בדיקה לכל בקשה, ואתם יכולים להשתמש בו באפליקציות שלכם בזמן כתיבת קוד, בדיקה וניפוי באגים. חשוב להקפיד להחליף אותו במזהה יחידת המודעות שלכם לפני פרסום האפליקציה.
מידע נוסף על אופן הפעולה של מודעות בדיקה ב-Mobile Ads SDK זמין במאמר מודעות בדיקה.
יצירת GAMBannerView
מודעות באנר מוצגות באובייקטים מסוג GAMBannerView
, ולכן השלב הראשון בשילוב מודעות באנר הוא לכלול GAMBannerView
בהיררכיית התצוגה. הפעולה הזו מתבצעת בדרך כלל באופן פרוגרמטי או באמצעות Interface Builder.
באופן פרוגרמטי
אפשר גם ליצור מופע של GAMBannerView
באופן ישיר.
בדוגמה הבאה נוצר GAMBannerView
:
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),
])
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)
}
מוסיפים את 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)
}
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],
]];
Interface Builder
אפשר להוסיף GAMBannerView
לקובץ storyboard או לקובץ xib. אם בחרתם בשיטה הזו, חשוב להוסיף אילוצי מיקום רק לבאנר. לדוגמה, כשמציגים מודעת באנר מותאמת בתחתית המסך, מגדירים את החלק התחתון של תצוגת הבאנר כך שיהיה שווה לחלק העליון של מדריך פריסת התחתית, ומגדירים את האילוץ centerX
כך שיהיה שווה ל-centerX
של תצוגת העל.
הגדרת גודל המודעה
מגדירים את המבנה GADSize
כסוג של מודעת באנר מותאמת ומעוגנת עם רוחב מוגדר:
Swift
// Request an anchored adaptive banner with a width of 375.
bannerView.adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
Objective-C
// Request an anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(375);
טעינת מודעה
אחרי שמוסיפים את GAMBannerView
ומגדירים את המאפיינים שלו, כמו adUnitID
,
הגיע הזמן לטעון מודעה. כדי לעשות את זה, קוראים ל-loadRequest:
באובייקט GAMRequest
:
Swift
bannerView.load(AdManagerRequest())
SwiftUI
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
Objective-C
[self.bannerView loadRequest:[GAMRequest request]];
אובייקטים מסוג 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.
})
}
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];
}
אירועים שקשורים למודעות
באמצעות GADBannerViewDelegate
, אפשר להאזין לאירועים במחזור החיים, כמו כשמודעה נסגרת או כשהמשתמש יוצא מהאפליקציה.
הרשמה לאירועים שקשורים לבאנרים
כדי להירשם לאירועים של מודעות באנר, מגדירים את המאפיין delegate
ב-GAMBannerView
לאובייקט שמטמיע את הפרוטוקול GADBannerViewDelegate
. בדרך כלל, המחלקה שמטמיעה מודעות באנר פועלת גם כמחלקה של נציג, ובמקרה כזה אפשר להגדיר את המאפיין delegate
כ-self
.
Swift
bannerView.delegate = self
SwiftUI
banner.delegate = context.coordinator
Objective-C
self.bannerView.delegate = self;
הטמעה של אירועים שקשורים למודעות באנר
כל אחת מהשיטות ב-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)
}
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");
}
אפשר לראות דוגמה לשימוש בשיטות של Ad Delegate בהטמעה באפליקציית ההדגמה של iOS API.
תרחישים לדוגמה
הנה כמה תרחישי שימוש לדוגמה בשיטות האלה של אירועים שקשורים למודעות.
הוספת באנר להיררכיית התצוגה אחרי קבלת מודעה
מומלץ להוסיף את 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
Objective-C
self.bannerView.enableManualImpressions = YES;
כשקובעים שמודעה הוחזרה בהצלחה ומוצגת במסך, אפשר להפעיל ידנית את אירוע הצגת החשיפה:
Swift
bannerView.recordImpression()
Objective-C
[self.bannerView recordImpression];
אירועים באפליקציה
אירועים באפליקציה מאפשרים לכם ליצור מודעות שיכולות לשלוח הודעות לקוד האפליקציה. אחרי כן, האפליקציה יכולה לבצע פעולות על סמך ההודעות האלה.
אפשר להאזין לאירועים ספציפיים באפליקציה ב-Ad Manager באמצעות GADAppEventDelegate
.
האירועים האלה יכולים להתרחש בכל שלב במהלך מחזור החיים של המודעה, גם לפני הקריאה של GADBannerViewDelegate
האובייקט bannerViewDidReceiveAd:
.
Swift
// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.
// Called when the banner receives an app event.
optional public func bannerView(_ banner: AdManagerBannerView,
didReceiveAppEvent name: String, withInfo info: String?)
Objective-C
// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.
@optional
// Called when the banner receives an app event.
- (void)bannerView:(GAMBannerView *)banner
didReceiveAppEvent:(NSString *)name
withInfo:(NSString *)info;
אפשר להטמיע את שיטות האירועים של האפליקציה בבקר תצוגה:
Swift
import GoogleMobileAds
class ViewController: UIViewController, AppEventDelegate {}
Objective-C
@import GoogleMobileAds;
@interface ViewController : UIViewController <GADAppEventDelegate> {}
@end
חשוב לזכור להגדיר את המשתמש עם ההרשאות באמצעות הנכס appEventDelegate
לפני ששולחים את הבקשה להצגת מודעה.
Swift
bannerView.appEventDelegate = self
Objective-C
self.bannerView.appEventDelegate = self;
הנה דוגמה שמראה איך לשנות את צבע הרקע של האפליקציה על ידי ציון הצבע דרך אירוע באפליקציה:
Swift
func bannerView(_ banner: AdManagerBannerView, didReceiveAppEvent name: String,
withInfo info: String?) {
if name == "color" {
guard let info = info else { return }
switch info {
case "green":
// Set background color to green.
view.backgroundColor = UIColor.green
case "blue":
// Set background color to blue.
view.backgroundColor = UIColor.blue
default:
// Set background color to black.
view.backgroundColor = UIColor.black
}
}
}
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];
}
}
}
והנה הקריאייטיב התואם ששולח הודעות על אירועים באפליקציה בנושא צבע אל 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 Demo app (אפליקציית הדגמה של iOS API).
מקורות מידע נוספים
דוגמאות ב-GitHub
- דוגמה למודעות באנר מותאמות ומעוגנות: Swift | SwiftUI | Objective-C
- הדגמה של תכונות מתקדמות: Swift | Objective-C
השלבים הבאים
מודעות באנר שאפשר לכווץ
מודעות באנר שאפשר לכווץ הן מודעות באנר שמוצגות בהתחלה כשכבת-על גדולה יותר, עם לחצן לכווץ את המודעה לגודל קטן יותר. כדאי להשתמש בה כדי לשפר עוד יותר את הביצועים. פרטים נוספים זמינים במאמר בנושא מודעות באנר שאפשר לכווץ.
מודעות באנר מותאמות שמוצגות בתוך הטקסט
מודעות באנר מותאמות שמוצגות בתוך הטקסט הן מודעות באנר גדולות וגבוהות יותר בהשוואה למודעות באנר מותאמות ומעוגנות. הגובה שלהן משתנה, והן יכולות להשתרע לכל אורכו של המסך. מומלץ להשתמש במודעות באנר מותאמות שמוצגות בתוך הטקסט באפליקציות שבהן מודעות הבאנר מוצגות בתוכן שניתן לגלילה, ולא במודעות באנר מעוגנות בגודל מותאם. פרטים נוספים זמינים במאמר בנושא באנרים מותאמים שמוצגים בתוך התוכן.