Khi một quảng cáo gốc tải, Google Mobile Ads SDK (Legacy) sẽ gọi trình nghe cho định dạng quảng cáo tương ứng. Sau đó, ứng dụng của bạn chịu trách nhiệm hiển thị quảng cáo (nhưng không nhất thiết phải hiển thị ngay lập tức). Để việc hiển thị định dạng quảng cáo do hệ thống xác định trở nên dễ dàng hơn, SDK sẽ cung cấp cho bạn một số tài nguyên hữu ích, như mô tả dưới đây.
Xác định lớp NativeAdView
Xác định một lớp NativeAdView. Lớp này là một lớp ViewGroup và là vùng chứa cấp cao nhất cho lớp NativeAdView. Mỗi chế độ xem quảng cáo gốc chứa các thành phần quảng cáo gốc, chẳng hạn như phần tử chế độ xem MediaView hoặc phần tử chế độ xem Title, phải là phần tử con của đối tượng NativeAdView.
Bố cục XML
Thêm NativeAdView XML vào dự án:
<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
- Thêm thư mục JetpackCompose Utilities. Thư mục này bao gồm các trình trợ giúp để soạn đối tượng và thành phần
NativeAdView.
Soạn 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.
}
}
Xử lý quảng cáo gốc đã tải
Khi quảng cáo gốc tải, hãy xử lý sự kiện gọi lại, tăng cường chế độ xem quảng cáo gốc và thêm chế độ xem đó vào hệ phân cấp chế độ xem:
Java
AdLoader.Builder builder = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
.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);
}
});
Kotlin
val builder = AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
.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())
}
Xin lưu ý rằng tất cả thành phần của một quảng cáo gốc nhất định phải được hiển thị bên trong bố cục NativeAdView. Google Mobile Ads SDK (Legacy) cố gắng ghi lại cảnh báo khi
các thành phần gốc được hiển thị bên ngoài bố cục chế độ xem quảng cáo gốc.
Các lớp chế độ xem quảng cáo cũng cung cấp các phương thức dùng để đăng ký chế độ xem được sử dụng cho từng thành phần riêng lẻ và một phương thức để đăng ký chính đối tượng NativeAd.
Việc đăng ký các thành phần hiển thị theo cách này cho phép SDK tự động xử lý các tác vụ như:
- Lượt nhấp vào đường liên kết đặt phòng
- Ghi lại lượt hiển thị khi pixel đầu tiên xuất hiện trên màn hình
- Hiển thị lớp phủ Lựa chọn quảng cáo
Hiển thị quảng cáo gốc
Ví dụ sau đây minh hoạ cách hiển thị quảng cáo gốc:
Java
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);
}
Kotlin
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) {
Box(modifier = Modifier.padding(8.dp)) {
// Call the NativeAdView composable to display the native ad.
NativeAdView(nativeAd) {
Column(modifier = Modifier.fillMaxWidth()) {
Box {
Row(modifier = Modifier.fillMaxWidth()) {
// 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)
}
}
}
}
// Display the ad attribution.
NativeAdAttribution(
modifier = Modifier.align(Alignment.TopStart),
text = stringResource(R.string.attribution),
)
}
// Display the media asset.
NativeAdMediaView(modifier = Modifier.fillMaxWidth())
// If available, display the body asset.
nativeAd.body?.let {
NativeAdBodyView(modifier = Modifier.padding(5.dp)) { Text(text = it) }
}
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.
nativeAd.callToAction?.let { callToAction ->
NativeAdCallToActionView(Modifier.padding(5.dp)) { NativeAdButton(text = callToAction) }
}
}
}
}
}
}
Lớp phủ Lựa chọn quảng cáo
SDK sẽ thêm lớp phủ Lựa chọn quảng cáo vào mỗi chế độ xem quảng cáo. Để trống góc bạn muốn trong chế độ xem quảng cáo gốc để chèn biểu tượng Lựa chọn quảng cáo tự động. Ngoài ra, lớp phủ Lựa chọn quảng cáo cũng phải dễ thấy. Vì vậy, hãy chọn màu nền và hình ảnh phù hợp. Để biết thêm thông tin về giao diện và chức năng của lớp phủ, hãy xem phần Mô tả trường quảng cáo gốc.
Thuộc tính quảng cáo
Bạn phải hiển thị thuộc tính quảng cáo để cho biết rằng chế độ xem là một quảng cáo. Tìm hiểu thêm trong nguyên tắc chính sách của chúng tôi.
Xử lý lượt nhấp
Không triển khai bất kỳ trình xử lý lượt nhấp tuỳ chỉnh nào trên bất kỳ chế độ xem nào bên trên hoặc bên trong chế độ xem quảng cáo gốc. SDK sẽ xử lý các lượt nhấp vào thành phần chế độ xem quảng cáo, miễn là bạn điền và đăng ký đúng cách các chế độ xem thành phần.
Để theo dõi lượt nhấp, hãy triển khai lệnh gọi lại lượt nhấp Google Mobile Ads SDK (Legacy):
Java
AdLoader adLoader = new AdLoader.Builder(context, "ca-app-pub-3940256099942544/2247696110")
// ...
.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();
Kotlin
val adLoader = AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
// ...
.withAdListener(object : AdListener() {
override fun onAdFailedToLoad(adError: LoadAdError) {
// Handle the failure.
}
override fun onAdClicked() {
// Log the click event or other custom behavior.
}
})
.build()
ImageScaleType
Lớp MediaView có thuộc tính ImageScaleType khi hiển thị hình ảnh. Nếu bạn muốn thay đổi cách điều chỉnh tỷ lệ hình ảnh trong MediaView, hãy đặt ImageView.ScaleType tương ứng bằng phương thức setImageScaleType() của MediaView:
Java
mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
Kotlin
mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
MediaContent
Lớp MediaContent chứa dữ liệu liên quan đến nội dung nghe nhìn của quảng cáo gốc. Nội dung này được hiển thị bằng cách sử dụng lớp MediaView. Khi thuộc tính MediaView mediaContent được đặt bằng một thực thể MediaContent:
Nếu có thành phần video, thì video đó sẽ được lưu vào vùng đệm và bắt đầu phát bên trong
MediaView. Bạn có thể biết liệu một thành phần video có sẵn hay không bằng cách kiểm trahasVideoContent().Nếu quảng cáo không chứa thành phần video, thì thành phần
mainImagesẽ được tải xuống và đặt bên trongMediaView.
Huỷ quảng cáo
Sau khi bạn hiển thị quảng cáo gốc, hãy huỷ quảng cáo đó. Ví dụ sau đây sẽ huỷ một quảng cáo gốc:
Java
nativeAd.destroy();
Kotlin
nativeAd.destroy()
Ví dụ trên GitHub
Ví dụ về cách triển khai hoàn chỉnh quảng cáo gốc:
Các bước tiếp theo
Khám phá các chủ đề sau: