وقتی یک تبلیغ بومی بارگیری میشود، Google Mobile Ads SDK شنونده را برای قالب آگهی مربوطه فراخوانی میکند. سپس برنامه شما مسئول نمایش آگهی است، اگرچه لزوماً نباید فوراً این کار را انجام دهد. برای آسانتر کردن نمایش قالبهای تبلیغاتی تعریفشده توسط سیستم، SDK منابع مفیدی را ارائه میدهد که در زیر توضیح داده شده است.
کلاس NativeAdView
را تعریف کنید
یک کلاس NativeAdView
تعریف کنید. این کلاس یک کلاس ViewGroup
است و ظرف سطح بالای کلاس NativeAdView
است. هر نمای تبلیغات بومی حاوی دارایی های تبلیغاتی بومی است، مانند عنصر نمای MediaView
یا عنصر نمای Title
، که باید فرزند شی NativeAdView
باشد.
طرح بندی XML
یک XML NativeAdView
به پروژه خود اضافه کنید:
<com.google.android.gms.ads.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.gms.ads.nativead.NativeAdView>
Jetpack Compose
شامل ماژول 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.
}
}
آگهی بومی بارگذاری شده را مدیریت کنید
هنگامی که یک تبلیغ بومی بارگیری میشود، رویداد برگشت به تماس را مدیریت کنید، نمای تبلیغات بومی را افزایش دهید و آن را به سلسله مراتب مشاهده اضافه کنید:
جاوا
AdLoader.Builder builder = new AdLoader.Builder(this, "/21775744923/example/native")
.forNativeAd(new NativeAd.OnNativeAdLoadedListener() {
@Override
public void onNativeAdLoaded(NativeAd nativeAd) {
// Assumes you have a placeholder FrameLayout in your View layout
// (with ID fl_adplaceholder) where the ad is to be placed.
FrameLayout frameLayout =
findViewById(R.id.fl_adplaceholder);
// Assumes that your ad layout is in a file call native_ad_layout.xml
// in the res/layout folder
NativeAdView adView = (NativeAdView) getLayoutInflater()
.inflate(R.layout.native_ad_layout, null);
// This method sets the assets into the ad view.
displayNativeAd(nativeAd, adView);
frameLayout.removeAllViews();
frameLayout.addView(adView);
}
});
کاتلین
val builder = AdLoader.Builder(this, "/21775744923/example/native")
.forNativeAd { nativeAd ->
// Assumes you have a placeholder FrameLayout in your View layout
// (with ID fl_adplaceholder) where the ad is to be placed.
val frameLayout: FrameLayout = findViewById(R.id.fl_adplaceholder)
// Assumes that your ad layout is in a file call native_ad_layout.xml
// in the res/layout folder
val adView = layoutInflater
.inflate(R.layout.native_ad_layout, null) as NativeAdView
// This method sets the assets into the ad view.
displayNativeAd(nativeAd, adView)
frameLayout.removeAllViews()
frameLayout.addView(adView)
}
Jetpack Compose
@Composable
/** Load and display a native ad. */
fun NativeScreen() {
var nativeAd by remember { mutableStateOf<NativeAd?>(null) }
val context = LocalContext.current
var isDisposed by remember { mutableStateOf(false) }
DisposableEffect(Unit) {
// Load the native ad when we launch this screen
loadNativeAd(
context = context,
onAdLoaded = { ad ->
// Handle the native ad being loaded.
if (!isDisposed) {
nativeAd = ad
} else {
// Destroy the native ad if loaded after the screen is disposed.
ad.destroy()
}
},
)
// Destroy the native ad to prevent memory leaks when we dispose of this screen.
onDispose {
isDisposed = true
nativeAd?.destroy()
nativeAd = null
}
}
// Display the native ad view with a user defined template.
nativeAd?.let { adValue -> DisplayNativeAdView(adValue) }
}
fun loadNativeAd(context: Context, onAdLoaded: (NativeAd) -> Unit) {
val adLoader =
AdLoader.Builder(context, NATIVE_AD_UNIT_ID)
.forNativeAd { nativeAd -> onAdLoaded(nativeAd) }
.withAdListener(
object : AdListener() {
override fun onAdFailedToLoad(error: LoadAdError) {
Log.e(TAG, "Native ad failed to load: ${error.message}")
}
override fun onAdLoaded() {
Log.d(TAG, "Native ad was loaded.")
}
override fun onAdImpression() {
Log.d(TAG, "Native ad recorded an impression.")
}
override fun onAdClicked() {
Log.d(TAG, "Native ad was clicked.")
}
}
)
.build()
adLoader.loadAd(AdRequest.Builder().build())
}
توجه داشته باشید که همه داراییهای یک آگهی بومی معین باید در طرح NativeAdView
ارائه شوند. Google Mobile Ads SDK سعی میکند زمانی که داراییهای بومی خارج از طرحبندی نمای تبلیغاتی بومی ارائه میشوند، هشداری را ثبت کند.
کلاسهای ad view همچنین روشهایی را ارائه میدهند که برای ثبت نمای مورد استفاده برای هر دارایی جداگانه و یکی برای ثبت خود شی NativeAd
استفاده میشوند. ثبت نماها به این روش به SDK اجازه می دهد تا به طور خودکار وظایفی مانند:
- ضبط کلیک ها
- ضبط برداشت زمانی که اولین پیکسل روی صفحه قابل مشاهده است
- نمایش همپوشانی AdChoices برای خلاقیتهای پشتیبان بومی — در حال حاضر محدود به گروه منتخبی از ناشران است
نمایش آگهی بومی
مثال زیر نحوه نمایش یک تبلیغ بومی را نشان می دهد:
جاوا
private void displayNativeAd(ViewGroup parent, NativeAd ad) {
// Inflate a layout and add it to the parent ViewGroup.
LayoutInflater inflater = (LayoutInflater) parent.getContext()
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
NativeAdView adView = (NativeAdView) inflater
.inflate(R.layout.ad_layout_file, parent);
// Locate the view that will hold the headline, set its text, and call the
// NativeAdView's setHeadlineView method to register it.
TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline);
headlineView.setText(ad.getHeadline());
adView.setHeadlineView(headlineView);
// Repeat the process for the other assets in the NativeAd
// using additional view objects (Buttons, ImageViews, etc).
// If you use a MediaView, call theNativeAdView.setMediaView() method
// before calling the NativeAdView.setNativeAd() method.
MediaView mediaView = (MediaView) adView.findViewById(R.id.ad_media);
adView.setMediaView(mediaView);
// Register the native ad with its ad view.
adView.setNativeAd(ad);
// Ensure that the parent view doesn't already contain an ad view.
parent.removeAllViews();
// Place the AdView into the parent.
parent.addView(adView);
}
کاتلین
fun displayNativeAd(parent: ViewGroup, ad: NativeAd) {
// Inflate a layout and add it to the parent ViewGroup.
val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
as LayoutInflater
val adView = inflater.inflate(R.layout.ad_layout_file, parent) as NativeAdView
// Locate the view that will hold the headline, set its text, and use the
// NativeAdView's headlineView property to register it.
val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
headlineView.text = ad.headline
adView.headlineView = headlineView
// Repeat the process for the other assets in the NativeAd using
// additional view objects (Buttons, ImageViews, etc).
val mediaView = adView.findViewById<MediaView>(R.id.ad_media)
adView.mediaView = mediaView
// Call the NativeAdView's setNativeAd method to register the
// NativeAdObject.
adView.setNativeAd(ad)
// Ensure that the parent view doesn't already contain an ad view.
parent.removeAllViews()
// Place the AdView into the parent.
parent.addView(adView)
}
Jetpack Compose
@Composable
/** Display a native ad with a user defined template. */
fun DisplayNativeAdView(nativeAd: NativeAd) {
val context = LocalContext.current
Box(modifier = Modifier.padding(8.dp).wrapContentHeight(Alignment.Top)) {
// Call the NativeAdView composable to display the native ad.
NativeAdView {
// Inside the NativeAdView composable, display the native ad assets.
Column(Modifier.align(Alignment.TopStart).wrapContentHeight(Alignment.Top)) {
// Display the ad attribution.
NativeAdAttribution(text = context.getString(R.string.attribution))
Row {
// If available, display the icon asset.
nativeAd.icon?.let { icon ->
NativeAdIconView(Modifier.padding(5.dp)) {
icon.drawable?.toBitmap()?.let { bitmap ->
Image(bitmap = bitmap.asImageBitmap(), "Icon")
}
}
}
Column {
// If available, display the headline asset.
nativeAd.headline?.let {
NativeAdHeadlineView {
Text(text = it, style = MaterialTheme.typography.headlineLarge)
}
}
// If available, display the star rating asset.
nativeAd.starRating?.let {
NativeAdStarRatingView {
Text(text = "Rated $it", style = MaterialTheme.typography.labelMedium)
}
}
}
}
// If available, display the body asset.
nativeAd.body?.let { NativeAdBodyView { Text(text = it) } }
// Display the media asset.
NativeAdMediaView(Modifier.fillMaxWidth().height(500.dp).fillMaxHeight())
Row(Modifier.align(Alignment.End).padding(5.dp)) {
// If available, display the price asset.
nativeAd.price?.let {
NativeAdPriceView(Modifier.padding(5.dp).align(Alignment.CenterVertically)) {
Text(text = it)
}
}
// If available, display the store asset.
nativeAd.store?.let {
NativeAdStoreView(Modifier.padding(5.dp).align(Alignment.CenterVertically)) {
Text(text = it)
}
}
// If available, display the call to action asset.
// Note: The Jetpack Compose button implements a click handler which overrides the native
// ad click handler, causing issues. Use the NativeAdButton which does not implement a
// click handler. To handle native ad clicks, use the NativeAd AdListener onAdClicked
// callback.
nativeAd.callToAction?.let { callToAction ->
NativeAdCallToActionView(Modifier.padding(5.dp)) { NativeAdButton(text = callToAction) }
}
}
}
}
}
}
همپوشانی AdChoices
هنگامی که یک آگهی پرکننده بازگردانده می شود، یک پوشش AdChoices به عنوان نمای تبلیغ توسط SDK اضافه می شود. اگر برنامه شما از پسپردههای تبلیغاتی بومی استفاده میکند، در گوشه دلخواه خود در نمای تبلیغاتی بومی خود فضایی برای نشانواره AdChoices درج شده بهطور خودکار بگذارید. همچنین، مهم است که پوشش AdChoices دیده شود، بنابراین رنگ های پس زمینه و تصاویر را به طور مناسب انتخاب کنید. برای اطلاعات بیشتر در مورد ظاهر و عملکرد پوشش، به دستورالعملهای اجرای تبلیغات بومی برنامهریزی شده مراجعه کنید.
تخصیص آگهی برای تبلیغات بومی برنامهریزیشده
هنگام نمایش تبلیغات بومی برنامهریزی شده، باید یک انتساب آگهی را نمایش دهید تا نشان دهد که این نما یک تبلیغ است. در دستورالعمل های خط مشی ما بیشتر بیاموزید.
رسیدگی به کلیک ها
هیچ کنترل کننده کلیک سفارشی را روی هیچ نمایی در داخل یا در نمای تبلیغاتی بومی اجرا نکنید. کلیکها روی داراییهای نمایش آگهی تا زمانی که بازدیدهای دارایی را به درستی پر کرده و ثبت کنید، توسط SDK مدیریت میشود.
برای گوش دادن به کلیکها، پاسخ تماس کلیکی Google Mobile Ads SDK را اجرا کنید:
جاوا
AdLoader adLoader = new AdLoader.Builder(context, "/21775744923/example/native")
// ...
.withAdListener(new AdListener() {
@Override
public void onAdFailedToLoad(LoadAdError adError) {
// Handle the failure by logging.
}
@Override
public void onAdClicked() {
// Log the click event or other custom behavior.
}
})
.build();
کاتلین
val adLoader = AdLoader.Builder(this, "/21775744923/example/native")
// ...
.withAdListener(object : AdListener() {
override fun onAdFailedToLoad(adError: LoadAdError) {
// Handle the failure.
}
override fun onAdClicked() {
// Log the click event or other custom behavior.
}
})
.build()
ImageScaleType
کلاس MediaView
دارای ویژگی ImageScaleType
هنگام نمایش تصاویر است. اگر می خواهید نحوه مقیاس بندی یک تصویر را در MediaView
تغییر دهید، ImageView.ScaleType
مربوطه را با استفاده از متد setImageScaleType()
MediaView
تنظیم کنید:
جاوا
mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
کاتلین
mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
MediaContent
کلاس MediaContent
داده های مربوط به محتوای رسانه ای تبلیغ بومی را نگه می دارد که با استفاده از کلاس MediaView
نمایش داده می شود. هنگامی که ویژگی MediaView
mediaContent
با یک نمونه MediaContent
تنظیم می شود:
اگر دارایی ویدیویی در دسترس باشد، بافر شده و در
MediaView
شروع به پخش میکند. با بررسیhasVideoContent()
میتوانید متوجه شوید که یک دارایی ویدیو در دسترس است.اگر تبلیغ حاوی دارایی ویدیو نباشد، دارایی
mainImage
دانلود شده و در داخلMediaView
قرار می گیرد.
∂## تبلیغ را نابود کنید
پس از نمایش یک تبلیغ بومی، تبلیغ را از بین ببرید. مثال زیر یک تبلیغ بومی را از بین می برد:
جاوا
nativeAd.destroy();
کاتلین
nativeAd.destroy()
کد تبلیغات بومی را تست کنید
آگهی های فروش مستقیم
اگر میخواهید آزمایش کنید تبلیغات بومی با فروش مستقیم چگونه هستند، میتوانید از این شناسه واحد تبلیغات Ad Manager استفاده کنید:
/21775744923/example/native
برای ارائه نمونه تبلیغات نصب برنامه و محتوا و همچنین یک قالب آگهی بومی سفارشی با دارایی های زیر پیکربندی شده است:
- عنوان (متن)
- تصویر اصلی (تصویر)
- عنوان (متن)
شناسه قالب برای قالب تبلیغات بومی سفارشی 10063170
است.
تبلیغات پشتیبان بومی
پر کردن Ad Exchange به گروه منتخبی از ناشران محدود می شود. برای آزمایش رفتار تبلیغات پشتیبان بومی، از این واحد تبلیغاتی Ad Manager استفاده کنید:
/21775744923/example/native-backfill
این نمونه تبلیغات نصب برنامه و محتوایی را ارائه می دهد که شامل پوشش AdChoices است.
به یاد داشته باشید قبل از پخش زنده، کد خود را برای مراجعه به واحد تبلیغات واقعی و شناسه های الگو به روز کنید.
نمونه هایی در GitHub
مثال اجرای کامل تبلیغات بومی:
مراحل بعدی
موضوعات زیر را بررسی کنید: