במדריך הזה מוסבר איך לטעון מודעת באנר מותאמת ומעוגנת באפליקציה ל-iOS.
דרישות מוקדמות
לפני שממשיכים, מגדירים את Google Mobile Ads SDK.
תמיד כדאי לבצע בדיקות באמצעות מודעות בדיקה
כשמפתחים ובודקים את האפליקציות, חשוב להשתמש במודעות בדיקה ולא במודעות פעילות לפרסום מוצרים. אם לא תעשו את זה, אנחנו עלולים להשעות את החשבון שלכם.
הדרך הכי קלה לטעון מודעות בדיקה היא להשתמש במזהה יחידת המודעות הייעודי לבדיקה שלנו לבאנרים ל-iOS:
/21775744923/example/adaptive-banner
הוא הוגדר במיוחד כדי להחזיר לכל בקשה מודעות בדיקה, ואתם יכולים להשתמש בו באפליקציות שלכם בזמן כתיבת קוד, בדיקה וניפוי באגים. חשוב להקפיד להחליף אותו במזהה יחידת המודעות שלכם לפני פרסום האפליקציה.
מידע נוסף על אופן הפעולה של Google Mobile Ads SDK מודעות בדיקה זמין במאמר מודעות בדיקה.
יצירת GAMBannerView
מודעות באנר מוצגות באובייקטים מסוג GAMBannerView, ולכן השלב הראשון בשילוב מודעות באנר הוא לכלול GAMBannerView בהיררכיית התצוגה. הפעולה הזו מתבצעת בדרך כלל באופן פרוגרמטי או באמצעות Interface Builder.
באופן פרוגרמטי
אפשר גם ליצור מופע של GAMBannerView ישירות.
בדוגמה הבאה נוצר GAMBannerView:
Swift
// Initialize the banner view.
bannerView = AdManagerBannerView()
bannerView.delegate = self
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 = largeAnchoredAdaptiveBanner(width: 375)
BannerViewContainer(adSize)
.frame(width: adSize.size.width, height: adSize.size.height)
}
Objective-C
// Initialize the banner view.
GAMBannerView *bannerView = [[GAMBannerView alloc] init];
bannerView.delegate = self;
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;
Interface Builder
אפשר להוסיף GAMBannerView לקובץ storyboard או לקובץ xib. כשמשתמשים בשיטה הזו, חשוב להוסיף אילוצי מיקום רק לבאנר. לדוגמה,
כשמציגים מודעת באנר מותאמת בתחתית המסך, מגדירים את החלק התחתון
של תצוגת הבאנר כך שיהיה שווה לחלק העליון של מדריך פריסת התחתית, ומגדירים את האילוץ
centerX
כך שיהיה שווה ל-centerX של תצוגת העל.
הגדרת גודל המודעה
מודעות באנר מותאמות גדולות הן פורמט גדול יותר שמיועד לפריסות שבהן אין גלילה. בהשוואה למודעות באנר מותאמות ומעוגנות רגילות, מודעות הבאנר האלה מאפשרות גובה מקסימלי גדול יותר (עד 20% מגובה המסך, בין 50 ל-150 נקודות). המרחב המוגדל הזה מותאם לתוכן וידאו.
בדוגמה הבאה מוצג גודל של מודעת באנר מותאמת ומעוגנת גדולה:
Swift
// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
Objective-C
// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);
טעינת מודעה
אחרי שמטמיעים את GAMBannerView ומגדירים את המאפיינים שלו, כמו adUnitID,
הגיע הזמן לטעון מודעה. כדי לעשות זאת, קוראים ל-loadRequest: באובייקט GAMRequest:
Swift
func loadBannerAd(bannerView: AdManagerBannerView) {
// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
bannerView.load(AdManagerRequest())
}
SwiftUI
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
Objective-C
// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);
[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
bannerView.delegate = self;
הטמעה של אירועים שקשורים למודעות באנר
כל אחת מהשיטות ב-GADBannerViewDelegate מסומנת כאופציונלית, כך שצריך להטמיע רק את השיטות שרוצים. בדוגמה הזו מיושמת כל שיטה ומוצגת הודעה במסוף:
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
print("Banner ad loaded.")
}
func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
print("Banner ad failed to load: \(error.localizedDescription)")
}
func bannerViewDidRecordImpression(_ bannerView: BannerView) {
print("Banner ad recorded an impression.")
}
func bannerViewDidRecordClick(_ bannerView: BannerView) {
print("Banner ad recorded a click.")
}
func bannerViewWillPresentScreen(_ bannerView: BannerView) {
print("Banner ad will present screen.")
}
func bannerViewWillDismissScreen(_ bannerView: BannerView) {
print("Banner ad will dismiss screen.")
}
func bannerViewDidDismissScreen(_ bannerView: BannerView) {
print("Banner ad did dismiss screen.")
}
Objective-C
- (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
NSLog(@"bannerViewDidReceiveAd");
}
- (void)bannerView:(GAMBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
NSLog(@"bannerView:didFailToReceiveAdWithError: %@", error.localizedDescription);
}
- (void)bannerViewDidRecordImpression:(GAMBannerView *)bannerView {
NSLog(@"bannerViewDidRecordImpression");
}
- (void)bannerViewWillPresentScreen:(GAMBannerView *)bannerView {
NSLog(@"bannerViewWillPresentScreen");
}
- (void)bannerViewWillDismissScreen:(GAMBannerView *)bannerView {
NSLog(@"bannerViewWillDismissScreen");
}
- (void)bannerViewDidDismissScreen:(GAMBannerView *)bannerView {
NSLog(@"bannerViewDidDismissScreen");
}
אפשר לעיין בדוגמה Ad Delegate כדי לראות הטמעה של שיטות 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];
אירועים באפליקציה
אפשר להשתמש ב-GADAppEventDelegate כדי להאזין לאירועים ספציפיים באפליקציה שקשורים ל-Ad Manager.
האירועים האלה יכולים להתרחש בכל שלב במחזור החיים של המודעה, גם לפני הקריאה ל-bannerViewDidReceiveAd: של אובייקט GADBannerViewDelegate.
כדי להירשם לאירועים באפליקציה, מגדירים את מאפיין הנציג ב-GAMBannerView לאובייקט שמטמיע את הפרוטוקול GADAppEventDelegate. בדרך כלל, הסיווג שמטמיע מודעות באנר פועל גם כסיווג של נציג, ובמקרה כזה אפשר להגדיר את מאפיין הנציג כ-self.
Swift
// Set this property before making the request for an ad.
bannerView.appEventDelegate = self
Objective-C
// Set this property before making the request for an ad.
self.bannerView.appEventDelegate = self;
הדוגמה הבאה מראה איך לשנות את צבע הרקע של האפליקציה על ידי ציון הצבע מאירוע באפליקציה:
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
}
}
}
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>
דוגמה להטמעה של אירועים באפליקציה זמינה באפליקציית ההדגמה של iOS API בנושא אירועים באפליקציה ב-Ad Manager.
מקורות מידע נוספים
דוגמאות ב-GitHub
- דוגמה למודעות באנר מותאמות ומעוגנות: Swift | SwiftUI | Objective-C
- הדגמה של תכונות מתקדמות: Swift | Objective-C
השלבים הבאים
מודעות באנר שאפשר לכווץ
מודעות באנר שאפשר לכווץ הן מודעות באנר שמוצגות בהתחלה כשכבת-על גדולה יותר, עם כפתור שאפשר ללחוץ עליו כדי לכווץ את המודעה לגודל קטן יותר. כדאי להשתמש בה כדי לשפר עוד יותר את הביצועים. פרטים נוספים זמינים במאמר בנושא מודעות באנר שאפשר לכווץ.
מודעות באנר מותאמות שמוצגות בתוך הטקסט
מודעות באנר מותאמות שמוצגות בתוך הטקסט הן מודעות באנר גדולות וגבוהות יותר בהשוואה למודעות באנר מותאמות ומעוגנות. הגובה שלהם משתנה, והם יכולים להיות בגובה של מסך המכשיר. מומלץ להשתמש במודעות באנר מותאמות שמוצגות בתוך הטקסט באפליקציות שבהן מודעות הבאנר מוצגות בתוכן שניתן לגלילה, ולא במודעות באנר מעוגנות בגודל מותאם. פרטים נוספים מופיעים במאמר בנושא באנרים מותאמים בגוף הטקסט.