כשמודעה מותאמת נטענת, Google Mobile Ads SDK (בטא) מפעיל את מאזין האירועים של פורמט המודעה המתאים. האחריות להצגת המודעה מוטלת על האפליקציה, אבל היא לא חייבת להציג אותה באופן מיידי. כדי להקל על הצגת פורמטים של מודעות שמוגדרים על ידי המערכת, ה-SDK מציע כמה משאבים שימושיים, כמו שמתואר בהמשך.
הגדרת הכיתה NativeAdView
מגדירים כיתת NativeAdView
. הכיתה הזו היא כיתה מסוג ViewGroup
והיא מאגר ברמה העליונה לכיתה מסוג NativeAdView
. כל תצוגה של מודעה מותאמת מכילה נכסים של מודעות מותאמות, כמו רכיב התצוגה MediaView
או רכיב התצוגה Title
, שחייבים להיות צאצאים של האובייקט NativeAdView
.
פריסת XML
מוסיפים קובץ XML NativeAdView
לפרויקט:
<com.google.android.libraries.ads.mobile.sdk.nativead.NativeAdView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical">
<LinearLayout
android:orientation="horizontal">
<ImageView
android:id="@+id/ad_app_icon" />
<TextView
android:id="@+id/ad_headline" />
</LinearLayout>
<!--Add remaining assets such as the image and media view.-->
</LinearLayout>
</com.google.android.libraries.ads.mobile.sdk.nativead.NativeAdView>
Jetpack פיתוח נייטיב
כולל את המודול JetpackComposeDemo/compose-util
שכולל כלי עזר ליצירת NativeAdView
והנכסים שלו.
בעזרת המודול compose-util
, יוצרים NativeAdView
:
import com.google.android.gms.compose_util.NativeAdAttribution
import com.google.android.gms.compose_util.NativeAdView
@Composable
/** Display a native ad with a user defined template. */
fun DisplayNativeAdView(nativeAd: NativeAd) {
NativeAdView {
// Display the ad attribution.
NativeAdAttribution(text = context.getString("Ad"))
// Add remaining assets such as the image and media view.
}
}
טיפול במודעה מותאמת שנטענה
כשמודעה מותאמת נטענת, צריך לטפל באירוע הקריאה החוזרת, להרחיב את התצוגה של המודעה המותאמת ולהוסיף אותה להיררכיית התצוגה:
Kotlin
// Build an ad request with native ad options to customize the ad.
val adTypes = listOf(NativeAd.NativeAdType.NATIVE)
val adRequest = NativeAdRequest
.Builder("ca-app-pub-3940256099942544/2247696110", adTypes)
.build()
val adCallback =
object : NativeAdLoaderCallback {
override fun onNativeAdLoaded(nativeAd: NativeAd) {
activity?.runOnUiThread {
val nativeAdBinding = NativeAdBinding.inflate(layoutInflater)
val adView = nativeAdBinding.root
val frameLayout = myActivityLayout.nativeAdPlaceholder
// Populate and register the native ad asset views.
displayNativeAd(nativeAd, nativeAdBinding)
// Remove all old ad views and add the new native ad
// view to the view hierarchy.
frameLayout.removeAllViews()
frameLayout.addView(adView)
}
}
}
// Load the native ad with our request and callback.
NativeAdLoader.load(adRequest, adCallback)
Java
// Build an ad request with native ad options to customize the ad.
List<NativeAd.NativeAdType> adTypes = Arrays.asList(NativeAd.NativeAdType.NATIVE);
NativeAdRequest adRequest = new NativeAdRequest
.Builder("ca-app-pub-3940256099942544/2247696110", adTypes)
.build();
NativeAdLoaderCallback adCallback = new NativeAdLoaderCallback() {
@Override
public void onNativeAdLoaded(NativeAd nativeAd) {
if (getActivity() != null) {
getActivity()
.runOnUiThread(() -> {
// Inflate the native ad view and add it to the view hierarchy.
NativeAdBinding nativeAdBinding = NativeAdBinding.inflate(getLayoutInflater());
NativeAdView adView = (NativeAdView) nativeAdBinding.getRoot();
FrameLayout frameLayout = myActivityLayout.nativeAdPlaceholder;
// Populate and register the native ad asset views.
displayNativeAd(nativeAd, nativeAdBinding);
// Remove all old ad views and add the new native ad
// view to the view hierarchy.
frameLayout.removeAllViews();
frameLayout.addView(adView);
});
}
}
};
// Load the native ad with our request and callback.
NativeAdLoader.load(adRequest, adCallback);
הערה: כל הנכסים של מודעה מותאמת מסוימת צריכים להיות מוצגים בתוך התג NativeAdView
layout. Google Mobile Ads SDK (בטא) מנסה לרשום אזהרה ביומן כשנכסים מותאמים מוצגים מחוץ לפריסת תצוגת המודעה המותאמת.
בנוסף, מחלקות התצוגה של המודעות מספקות שיטות לרישום התצוגה שמשמשת כל נכס בנפרד, ושיטה לרישום האובייקט NativeAd
עצמו.
רישום התצוגות בצורה הזו מאפשר ל-SDK לטפל אוטומטית במשימות כמו:
- קליקים להקלטה
- תיעוד חשיפות כשהפיקסל הראשון גלוי במסך
- הצגת שכבת העל של AdChoices
הצגת המודעה המותאמת
בדוגמה הבאה מוסבר איך להציג מודעה מותאמת:
Kotlin
private fun displayNativeAd(nativeAd: NativeAd, nativeAdBinding : NativeAdBinding) {
// Set the native ad view elements.
val nativeAdView = nativeAdBinding.root
nativeAdView.advertiserView = nativeAdBinding.adAdvertiser
nativeAdView.bodyView = nativeAdBinding.adBody
nativeAdView.callToActionView = nativeAdBinding.adCallToAction
nativeAdView.headlineView = nativeAdBinding.adHeadline
nativeAdView.iconView = nativeAdBinding.adAppIcon
nativeAdView.priceView = nativeAdBinding.adPrice
nativeAdView.starRatingView = nativeAdBinding.adStars
nativeAdView.storeView = nativeAdBinding.adStore
// Set the view element with the native ad assets.
nativeAdBinding.adAdvertiser.text = nativeAd.advertiser
nativeAdBinding.adBody.text = nativeAd.body
nativeAdBinding.adCallToAction.text = nativeAd.callToAction
nativeAdBinding.adHeadline.text = nativeAd.headline
nativeAdBinding.adAppIcon.setImageDrawable(nativeAd.icon?.drawable)
nativeAdBinding.adPrice.text = nativeAd.price
nativeAd.starRating?.toFloat().let { value ->
nativeAdBinding.adStars.rating = value
}
nativeAdBinding.adStore.text = nativeAd.store
// Hide views for assets that don't have data.
nativeAdBinding.adAdvertiser.visibility = getAssetViewVisibility(nativeAd.advertiser)
nativeAdBinding.adBody.visibility = getAssetViewVisibility(nativeAd.body)
nativeAdBinding.adCallToAction.visibility = getAssetViewVisibility(nativeAd.callToAction)
nativeAdBinding.adHeadline.visibility = getAssetViewVisibility(nativeAd.headline)
nativeAdBinding.adAppIcon.visibility = getAssetViewVisibility(nativeAd.icon)
nativeAdBinding.adPrice.visibility = getAssetViewVisibility(nativeAd.price)
nativeAdBinding.adStars.visibility = getAssetViewVisibility(nativeAd.starRating)
nativeAdBinding.adStore.visibility = getAssetViewVisibility(nativeAd.store)
// Inform Google Mobile Ads SDK (beta) that you have finished populating
// the native ad views with this native ad.
nativeAdView.registerNativeAd(nativeAd, nativeAdBinding.adMedia)
}
/**
* Determines the visibility of an asset view based on the presence of its asset.
*
* @param asset The native ad asset to check for nullability.
* @return [View.VISIBLE] if the asset is not null, [View.INVISIBLE] otherwise.
*/
private fun getAssetViewVisibility(asset: Any?): Int {
return if (asset == null) View.INVISIBLE else View.VISIBLE
}
Java
private void displayNativeAd(ad: NativeAd, nativeAdBinding : NativeAdBinding) {
// Set the native ad view elements.
NativeAdView nativeAdView = nativeAdBinding.getRoot();
nativeAdView.setAdvertiserView(nativeAdBinding.adAdvertiser);
nativeAdView.setBodyView(nativeAdBinding.adBody);
nativeAdView.setCallToActionView(nativeAdBinding.adCallToAction);
nativeAdView.setHeadlineView(nativeAdBinding.adHeadline);
nativeAdView.setIconView(nativeAdBinding.adAppIcon);
nativeAdView.setPriceView(nativeAdBinding.adPrice);
nativeAdView.setStarRatingView(nativeAdBinding.adStars);
nativeAdView.setStoreView(nativeAdBinding.adStore);
// Set the view element with the native ad assets.
nativeAdBinding.adAdvertiser.setText(nativeAd.getAdvertiser());
nativeAdBinding.adBody.setText(nativeAd.getBody());
nativeAdBinding.adCallToAction.setText(nativeAd.getCallToAction());
nativeAdBinding.adHeadline.setText(nativeAd.getHeadline());
if (nativeAd.getIcon() != null) {
nativeAdBinding.adAppIcon.setImageDrawable(nativeAd.getIcon().getDrawable());
}
nativeAdBinding.adPrice.setText(nativeAd.getPrice());
if (nativeAd.getStarRating() != null) {
nativeAdBinding.adStars.setRating(nativeAd.getStarRating().floatValue());
}
nativeAdBinding.adStore.setText(nativeAd.getStore());
// Hide views for assets that don't have data.
nativeAdBinding.adAdvertiser.setVisibility(getAssetViewVisibility(nativeAd.getAdvertiser()));
nativeAdBinding.adBody.setVisibility(getAssetViewVisibility(nativeAd.getBody()));
nativeAdBinding.adCallToAction.setVisibility(getAssetViewVisibility(nativeAd.getCallToAction()));
nativeAdBinding.adHeadline.setVisibility(getAssetViewVisibility(nativeAd.getHeadline()));
nativeAdBinding.adAppIcon.setVisibility(getAssetViewVisibility(nativeAd.getIcon()));
nativeAdBinding.adPrice.setVisibility(getAssetViewVisibility(nativeAd.getPrice()));
nativeAdBinding.adStars.setVisibility(getAssetViewVisibility(nativeAd.getStarRating()));
nativeAdBinding.adStore.setVisibility(getAssetViewVisibility(nativeAd.getStore()));
// Inform Google Mobile Ads SDK (beta) that you have finished populating
// the native ad views with this native ad.
nativeAdView.registerNativeAd(nativeAd, nativeAdBinding.adMedia);
}
/**
* Determines the visibility of an asset view based on the presence of its asset.
*
* @param asset The native ad asset to check for nullability.
* @return {@link View#VISIBLE} if the asset is not null, {@link View#INVISIBLE} otherwise.
*/
private int getAssetViewVisibility(Object asset) {
return (asset == null) ? View.INVISIBLE : View.VISIBLE;
}
שכבת-על של AdChoices
ערכת ה-SDK מוסיפה שכבת-על של AdChoices לכל תצוגת מודעה. משאירים מקום בפינה המועדפת בתצוגת המודעה המקורית ללוגו AdChoices שמוכנס באופן אוטומטי. בנוסף, חשוב שיהיה קל לראות את שכבת-העל של AdChoices, לכן צריך לבחור בקפידה את צבעי הרקע והתמונות. מידע נוסף על המראה והתפקוד של שכבת העל זמין במאמר תיאורים של שדות במודעות מותאמות.
סימן למודעה
חובה להציג סימן למודעה כדי לציין שהצפייה היא במודעה. מידע נוסף זמין בהנחיות המדיניות שלנו.
טיפול בקליקים
אל תטמיעו מטפלים מותאמים אישית של קליקים בתצוגות שמעל או בתוך תצוגת המודעה המקורית. ערכת ה-SDK מטפלת בקליקים על נכסי התצוגה של המודעה, בתנאי שמילאתם את הפרטים של תצוגות הנכסים ורשמתם אותם בצורה נכונה.
כדי להאזין לקליקים, מטמיעים את callback הקליקים של Google Mobile Ads SDK (בטא):
Kotlin
private fun setEventCallback(nativeAd: NativeAd) {
nativeAd.adEventCallback =
object : NativeAdEventCallback {
override fun onAdClicked() {
Log.d(Constant.TAG, "Native ad recorded a click.")
}
}
}
Java
private void setEventCallback(NativeAd nativeAd) {
nativeAd.setAdEventCallback(new NativeAdEventCallback() {
@Override
public void onAdClicked() {
Log.d(Constant.TAG, "Native ad recorded a click.");
}
});
}
ImageScaleType
למחלקת MediaView
יש מאפיין ImageScaleType
כשמוצגות תמונות. כדי לשנות את אופן שינוי הגודל של תמונה ב-MediaView
, צריך להגדיר את ImageView.ScaleType
המתאים באמצעות השיטה setImageScaleType()
של MediaView
:
Kotlin
nativeAdViewBinding.mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
Java
nativeAdViewBinding.mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
MediaContent
הנתונים שקשורים לתוכן המדיה של המודעה המקורית מאוחסנים במחלקה MediaContent
, והם מוצגים באמצעות המחלקה MediaView
. כשהמאפיין MediaView
mediaContent
מוגדר עם מופע MediaContent
:
אם נכס וידאו זמין, הוא נטען למאגר ומתחיל לפעול בתוך התג
MediaView
. כדי לדעת אם נכס וידאו זמין, אפשר לבדוק אתhasVideoContent()
.אם המודעה לא מכילה נכס וידאו, נכס
mainImage
יורד ומוצב בתוךMediaView
.
השמדת מודעה
אחרי שמציגים מודעה מותאמת, צריך להשמיד את המודעה. בדוגמה הבאה מוצגת השמדה של מודעה מקומית:
Kotlin
nativeAd.destroy()
Java
nativeAd.destroy();
השלבים הבאים
כדאי לעיין בנושאים הבאים:
דוגמה
מורידים ומריצים את האפליקציה לדוגמה שמדגימה את השימוש ב-Google Mobile Ads SDK (בטא).