הצגת פורמט של מודעה מותאמת שמוגדרת על ידי המערכת
כשמודעה מותאמת נטענת, האפליקציה מקבלת אובייקט של מודעה מותאמת באמצעות אחת מהודעות הפרוטוקול GADAdLoaderDelegate
. לאחר מכן, האפליקציה שלכם אחראית להצגת המודעה (אבל היא לא חייבת לעשות זאת באופן מיידי).
כדי להקל על הצגת פורמטים של מודעות שמוגדרים על ידי המערכת, ב-SDK יש כמה מקורות מידע שימושיים.
GADNativeAdView
ל-GADNativeAd
יש גם את הכיתה המתאימה 'תצוגת מודעה': GADNativeAdView
.
סיווג התצוגה של המודעה הוא UIView
שבעלי תוכן דיגיטלי צריכים להשתמש בו כדי להציג את המודעה.
לדוגמה, GADNativeAdView
יחיד יכול להציג מופע יחיד של GADNativeAd
. כל אחד מהאובייקטים מסוג UIView
שמשמשים להצגת הנכסים של המודעה צריך להיות תצוגת משנה של אובייקט GADNativeAdView
.
לדוגמה, אם הצגתם מודעה ב-UITableView
, היררכיית התצוגה של אחת התאים עשויה להיראות כך:
בכיתה GADNativeAdView
יש גם את IBOutlets
, שמשמשת לרישום התצוגה שמשמשת כל נכס בנפרד, וגם שיטה לרישום האובייקט GADNativeAd
עצמו. רישום התצוגות בדרך הזו מאפשר ל-SDK לטפל באופן אוטומטי במשימות כמו:
- הקלטת קליקים.
- תיעוד חשיפות (כשהפיקסל הראשון גלוי במסך).
- הצגת שכבת-העל של AdChoices.
שכבת-העל של AdChoices
במודעות מותאם אישית עקיפות (שמוצגות דרך AdMob למטרות מילוי חוסרים או דרך Ad Exchange או AdSense), שכבת-העל של AdChoices מתווספת על ידי ה-SDK. משאירים מקום בפינה המועדפת בתצוגת המודעה המוטמעת כדי להציג את הלוגו של AdChoices שיתווסף באופן אוטומטי. בנוסף, חשוב לוודא ששכבת-העל של AdChoices ממוקמת על גבי תוכן שמאפשר להבחין בסמל בקלות. מידע נוסף על המראה והפונקציונליות של שכבת-העל זמין בהנחיות להטמעה של מודעות מותאמות באופן פרוגרמטי.
סימון למודעה
כשמציגים מודעות מותאמות פרוגרמטיות, צריך להציג שיוך מודעה כדי לציין שהתצוגה היא מודעה.קוד לדוגמה
נראה איך מציגים מודעות מותאמות באמצעות תצוגות שנטענות באופן דינמי מקובצי XIB. זוהי גישה שימושית מאוד כשמשתמשים ב-GADAdLoaders
שהוגדרה לבקש כמה פורמטים.
סידור תצוגות ה-UIView
השלב הראשון הוא להגדיר את הפריסה של UIViews
שבו יוצגו נכסי המודעות המותאמות.
אפשר לעשות זאת ב-Interface Builder כמו שיוצרים כל קובץ xib אחר. כך יכול להיראות הפריסה של מודעה מותאמת:
שימו לב לערך של Custom Class בפינה השמאלית העליונה של התמונה. ההגדרה היא
GADNativeAdView
.
זוהי הכיתה של תצוגת המודעה שמשמשת להצגת GADNativeAd
.
צריך גם להגדיר את הכיתה בהתאמה אישית של GADMediaView
, שמשמשת להצגת הסרטון או התמונה של המודעה.
קישור ערוצי הפצה לתצוגות מפורטות
אחרי שיוצרים את התצוגות ומקצים את סוג התצוגה הנכון של המודעה לפריסת האתר, מקשרים את נכסי ה-Asset Outlet של תצוגת המודעה ל-UIViews
שיצרתם.
כך אפשר לקשר את נכסי ה-Asset Outlet של תצוגת המודעה ל-UIViews
שנוצר למודעה:
בחלונית השקעים, השקעים ב-GADNativeAdView
מקושרים ל-UIViews
שמתוכנן ב-Interface Builder. כך מערכת ה-SDK תדע איזה נכס מוצג באיזה UIView
.
חשוב גם לזכור שהפלטפורמות האלה מייצגות את התצוגות שאפשר ללחוץ עליהן במודעה.
הצגת המודעה
אחרי שהפריסה מושלמת והמקורות מקושרים, מוסיפים לאפליקציה את הקוד הבא כדי להציג מודעה אחרי שהיא נטענת:
Swift
// Mark: - GADNativeAdLoaderDelegate
func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADNativeAd) {
print("Received native ad: \(nativeAd)")
refreshAdButton.isEnabled = true
// Create and place ad in view hierarchy.
let nibView = Bundle.main.loadNibNamed("NativeAdView", owner: nil, options: nil)?.first
guard let nativeAdView = nibView as? GADNativeAdView else {
return
}
setAdView(nativeAdView)
// Set ourselves as the native ad delegate to be notified of native ad events.
nativeAd.delegate = self
// Populate the native ad view with the native ad assets.
// The headline and mediaContent are guaranteed to be present in every native ad.
(nativeAdView.headlineView as? UILabel)?.text = nativeAd.headline
nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
// This app uses a fixed width for the GADMediaView and changes its height to match the aspect
// ratio of the media it displays.
if let mediaView = nativeAdView.mediaView, nativeAd.mediaContent.aspectRatio > 0 {
let heightConstraint = NSLayoutConstraint(
item: mediaView,
attribute: .height,
relatedBy: .equal,
toItem: mediaView,
attribute: .width,
multiplier: CGFloat(1 / nativeAd.mediaContent.aspectRatio),
constant: 0)
heightConstraint.isActive = true
}
// These assets are not guaranteed to be present. Check that they are before
// showing or hiding them.
(nativeAdView.bodyView as? UILabel)?.text = nativeAd.body
nativeAdView.bodyView?.isHidden = nativeAd.body == nil
(nativeAdView.callToActionView as? UIButton)?.setTitle(nativeAd.callToAction, for: .normal)
nativeAdView.callToActionView?.isHidden = nativeAd.callToAction == nil
(nativeAdView.iconView as? UIImageView)?.image = nativeAd.icon?.image
nativeAdView.iconView?.isHidden = nativeAd.icon == nil
(nativeAdView.starRatingView as? UIImageView)?.image = imageOfStars(
fromStarRating: nativeAd.starRating)
nativeAdView.starRatingView?.isHidden = nativeAd.starRating == nil
(nativeAdView.storeView as? UILabel)?.text = nativeAd.store
nativeAdView.storeView?.isHidden = nativeAd.store == nil
(nativeAdView.priceView as? UILabel)?.text = nativeAd.price
nativeAdView.priceView?.isHidden = nativeAd.price == nil
(nativeAdView.advertiserView as? UILabel)?.text = nativeAd.advertiser
nativeAdView.advertiserView?.isHidden = nativeAd.advertiser == nil
// For the SDK to process touch events properly, user interaction should be disabled.
nativeAdView.callToActionView?.isUserInteractionEnabled = false
// Associate the native ad view with the native ad object. This is
// required to make the ad clickable.
// Note: this should always be done after populating the ad views.
nativeAdView.nativeAd = nativeAd
}
SwiftUI
יצירת מודל תצוגה
יוצרים מודל תצוגה (view) שטעון מודעה מותאמת ומפרסם שינויים בנתונים של מודעה מותאמת:
import GoogleMobileAds
class NativeAdViewModel: NSObject, ObservableObject, GADNativeAdLoaderDelegate {
@Published var nativeAd: GADNativeAd?
private var adLoader: GADAdLoader!
func refreshAd() {
adLoader = GADAdLoader(
adUnitID: "ca-app-pub-3940256099942544/3986624511",
// The UIViewController parameter is optional.
rootViewController: nil,
adTypes: [.native], options: nil)
adLoader.delegate = self
adLoader.load(GADRequest())
}
func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADNativeAd) {
// Native ad data changes are published to its subscribers.
self.nativeAd = nativeAd
nativeAd.delegate = self
}
func adLoader(_ adLoader: GADAdLoader, didFailToReceiveAdWithError error: Error) {
print("\(adLoader) failed with error: \(error.localizedDescription)")
}
}
יצירת UIViewRepresentable
יוצרים UIViewRepresentable
עבור GADNativeView
ומירשם למינוי לשינויים בנתונים בכיתה ViewModel
:
private struct NativeAdView: UIViewRepresentable {
typealias UIViewType = GADNativeAdView
// Observer to update the UIView when the native ad value changes.
@ObservedObject var nativeViewModel: NativeAdViewModel
func makeUIView(context: Context) -> GADNativeAdView {
return
Bundle.main.loadNibNamed(
"NativeAdView",
owner: nil,
options: nil)?.first as! GADNativeAdView
}
func updateUIView(_ nativeAdView: GADNativeAdView, context: Context) {
guard let nativeAd = nativeViewModel.nativeAd else { return }
// Each UI property is configurable using your native ad.
(nativeAdView.headlineView as? UILabel)?.text = nativeAd.headline
nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
(nativeAdView.bodyView as? UILabel)?.text = nativeAd.body
(nativeAdView.iconView as? UIImageView)?.image = nativeAd.icon?.image
(nativeAdView.starRatingView as? UIImageView)?.image = imageOfStars(from: nativeAd.starRating)
(nativeAdView.storeView as? UILabel)?.text = nativeAd.store
(nativeAdView.priceView as? UILabel)?.text = nativeAd.price
(nativeAdView.advertiserView as? UILabel)?.text = nativeAd.advertiser
(nativeAdView.callToActionView as? UIButton)?.setTitle(nativeAd.callToAction, for: .normal)
// For the SDK to process touch events properly, user interaction should be disabled.
nativeAdView.callToActionView?.isUserInteractionEnabled = false
// Associate the native ad view with the native ad object. This is required to make the ad
// clickable.
// Note: this should always be done after populating the ad views.
nativeAdView.nativeAd = nativeAd
}
הוספת התצוגה להיררכיית התצוגות
הקוד הבא מדגים הוספה של UIViewRepresentable
להיררכיית התצוגה:
struct NativeContentView: View {
// Single source of truth for the native ad data.
@StateObject private var nativeViewModel = NativeAdViewModel()
var body: some View {
ScrollView {
VStack(spacing: 20) {
NativeAdView(nativeViewModel: nativeViewModel) // Updates when the native ad data changes.
.frame(minHeight: 300) // minHeight determined from xib.
Objective-C
#pragma mark GADNativeAdLoaderDelegate implementation
- (void)adLoader:(GADAdLoader *)adLoader didReceiveNativeAd:(GADNativeAd *)nativeAd {
NSLog(@"Received native ad: %@", nativeAd);
self.refreshButton.enabled = YES;
// Create and place ad in view hierarchy.
GADNativeAdView *nativeAdView =
[[NSBundle mainBundle] loadNibNamed:@"NativeAdView" owner:nil options:nil].firstObject;
[self setAdView:nativeAdView];
// Set the mediaContent on the GADMediaView to populate it with available
// video/image asset.
nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;
// Populate the native ad view with the native ad assets.
// The headline is present in every native ad.
((UILabel *)nativeAdView.headlineView).text = nativeAd.headline;
// These assets are not guaranteed to be present. Check that they are before
// showing or hiding them.
((UILabel *)nativeAdView.bodyView).text = nativeAd.body;
nativeAdView.bodyView.hidden = nativeAd.body ? NO : YES;
[((UIButton *)nativeAdView.callToActionView)setTitle:nativeAd.callToAction
forState:UIControlStateNormal];
nativeAdView.callToActionView.hidden = nativeAd.callToAction ? NO : YES;
((UIImageView *)nativeAdView.iconView).image = nativeAd.icon.image;
nativeAdView.iconView.hidden = nativeAd.icon ? NO : YES;
((UIImageView *)nativeAdView.starRatingView).image = [self imageForStars:nativeAd.starRating];
nativeAdView.starRatingView.hidden = nativeAd.starRating ? NO : YES;
((UILabel *)nativeAdView.storeView).text = nativeAd.store;
nativeAdView.storeView.hidden = nativeAd.store ? NO : YES;
((UILabel *)nativeAdView.priceView).text = nativeAd.price;
nativeAdView.priceView.hidden = nativeAd.price ? NO : YES;
((UILabel *)nativeAdView.advertiserView).text = nativeAd.advertiser;
nativeAdView.advertiserView.hidden = nativeAd.advertiser ? NO : YES;
// In order for the SDK to process touch events properly, user interaction
// should be disabled.
nativeAdView.callToActionView.userInteractionEnabled = NO;
// Associate the native ad view with the native ad object. This is
// required to make the ad clickable.
nativeAdView.nativeAd = nativeAd;
}
דוגמה מלאה ב-GitHub
כדי לראות דוגמה מלאה לשילוב של מודעות מותאמות ב-Swift, ב-SwiftUI וב-Objective-C, אפשר לעבור לקישור המתאים ב-GitHub.
דוגמה למודעות מותאמות מסוג Advanced ב-Swift דוגמה למודעות מותאמות ב-SwiftUI דוגמה למודעות מותאמות מסוג Advanced ב-Objective-CGADMediaView
נכסי תמונות וסרטונים מוצגים למשתמשים דרך GADMediaView
.
זהו UIView
שאפשר להגדיר בקובץ XIB או ליצור באופן דינמי.
צריך למקם אותו בהיררכיית התצוגות של GADNativeAdView
, כמו כל תצוגה מפורטת אחרת של נכס.
כמו בכל תצוגות הנכסים, צריך לאכלס את התוכן של תצוגת המדיה. ההגדרה הזו מתבצעת באמצעות המאפיין mediaContent
ב-GADMediaView
. הנכס mediaContent
של GADNativeAd
מכיל תוכן מדיה שאפשר להעביר ל-GADMediaView
.
לפניכם קטע קוד מהדוגמה למודעה מותאמת מסוג Advanced (Swift | Objective-C) שמראה איך לאכלס את GADMediaView
בנכסי המודעה המותאמת באמצעות GADMediaContent
מ-GADNativeAd
:
Swift
nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
Objective-C
nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;
מוודאים שבקובץ ה-builder של הממשק של תצוגת המודעה המותאמת אישית, מגדירים את הכיתה בהתאמה אישית של התצוגות כ-GADMediaView
ומחברים אותה לשקע mediaView
.
שינוי מצב תוכן התמונה
הכיתה GADMediaView
מתייחסת למאפיין UIView
contentMode
כשמציגים תמונות. כדי לשנות את אופן התאמת התמונה ל-GADMediaView
, מגדירים את הערך המתאים של UIViewContentMode
בנכס contentMode
של GADMediaView
.
לדוגמה, כדי למלא את השדה GADMediaView
כשמוצגת תמונה (למודעה אין וידאו):
Swift
nativeAdView.mediaView?.contentMode = .aspectFill
Objective-C
nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;
GADMediaContent
הכיתה GADMediaContent
מכילה את הנתונים שקשורים לתוכן המדיה של המודעה המותאמת, שמוצג באמצעות הכיתה GADMediaView
. כשהיא מוגדרת במאפיין GADMediaView
mediaContent
:
אם נכס הווידאו זמין, הוא נשמר במטמון ומתחיל לפעול בתוך
GADMediaView
. כדי לבדוק אם נכס וידאו זמין, אפשר לבדוק את הערך שלhasVideoContent
.אם המודעה לא מכילה נכס וידאו, המערכת מורידת את נכס ה-
mainImage
ומציבה אותו בתוך ה-GADMediaView
במקום זאת.