הצגה של פורמט מודעה מותאמת שמוגדר על ידי המערכת
כשמודעה מותאמת נטענת, האפליקציה תקבל אובייקט של מודעה מותאמת באמצעות אחת מהודעות הפרוטוקול 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
שמוגדר לשליחת בקשות לכמה פורמטים.
הנחת ה-UIViews
בשלב הראשון צריך להגדיר את UIViews
שיציגו נכסים של מודעות מותאמות.
תוכלו לעשות זאת בכלי ליצירת ממשקים, בדיוק כמו שהייתם יוצרים בכל קובץ אחר של ממשק תשלומים וירטואלי. כך עשויה להיראות הפריסה של מודעה מותאמת:
שימו לב לערך של הכיתה המותאמת אישית בפינה השמאלית העליונה של התמונה. מוגדרת ל-
GADNativeAdView
.
זוהי מחלקת הצגת המודעות המשמשת להצגת GADNativeAd
.
צריך גם להגדיר את הסיווג המותאם אישית של המאפיין GADMediaView
, המשמש להצגת הסרטון או התמונה של המודעה.
קישור שקעים לתצוגות מפורטות
אחרי שהגדרתם את התצוגות והקציתם את הפריסה הנכונה של הצפיות במודעות, עליכם לקשר את שקעי הנכסים של המודעה ל-UIViews
שיצרתם.
כך אפשר לקשר את שקעי הנכסים של הצפייה במודעה אל UIViews
שנוצר עבור מודעה:
בלוח השקעים, השקעים ב-GADNativeAdView
קושרו אל UIViews
כפי שמתואר בכלי ליצירת ממשק. כך ה-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 // In order 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 }
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 guaranteed to be 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 וב-Objective-C.
הורדת דוגמה מתקדמת של מודעות מותאמותתצוגת GADMedia
נכסי תמונות וסרטונים מוצגים למשתמשים באמצעות GADMediaView
.
זהו UIView
שניתן להגדיר בקובץ xib או לבנות באופן דינמי.
יש למקם אותו בתוך היררכיית התצוגה של GADNativeAdView
, כמו בכל תצוגת נכס אחרת.
בדומה לכל תצוגות הנכסים, תוכן המדיה צריך להיות מאוכלס. כדי להגדיר אותו, משתמשים במאפיין mediaContent
שב-GADMediaView
. הנכס mediaContent
של GADNativeAd
מכיל תוכן מדיה שאפשר להעביר אל GADMediaView
.
הנה קטע טקסט מתוך
דוגמה למודעות מותאמות מתקדמות
(Swift |
Objective-C)
איך להציג את GADMediaView
בנכסי המודעות המותאמות באמצעות GADMediaContent
מ-GADNativeAd
:
Swift
nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
Objective-C
nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;
ודאו שבקובץ של הכלי לבניית ממשקים לתצוגה של המודעה המותאמת, המחלקה המותאמת של התצוגות מוגדרת ל-GADMediaView
ושקישרתם אותה לשקע mediaView
.
שינוי המצב של תוכן התמונה
הכיתה GADMediaView
מכבדת את המאפיין UIView
contentMode
כשמציגים תמונות. כדי לשנות את קנה המידה של תמונה ב-GADMediaView
, צריך להגדיר אתUIViewContentMode
המתאים בנכס contentMode
של GADMediaView
כדי לעשות זאת.
לדוגמה, כדי למלא את השדה GADMediaView
כשתמונה מוצגת (במודעה אין סרטון):
Swift
nativeAdView.mediaView?.contentMode = .aspectFill
Objective-C
nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;
תוכן GADMedia
הסיווג GADMediaContent
מכיל את הנתונים הקשורים לתוכן המדיה של המודעה המותאמת, שמוצגת באמצעות הסיווג GADMediaView
. כאשר הם מוגדרים בנכס GADMediaView
mediaContent
:
אם נכס וידאו זמין, הוא נמצא בתהליך אגירת נתונים ומתחיל לפעול בתוך
GADMediaView
. תוכלו לדעת אם נכס וידאו זמין זמין בדוחhasVideoContent
.אם המודעה לא מכילה נכס וידאו, תתבצע הורדה של הנכס
mainImage
ובמקום זאת מיקום בGADMediaView
.
השלבים הבאים
מידע נוסף על פרטיות המשתמשים.