Hiển thị một Coroutine
Khi một quảng cáo gốc tải, SDK quảng cáo trên thiết bị di động của Google sẽ gọi trình nghe để định dạng quảng cáo tương ứng. Sau đó, ứng dụng sẽ chịu trách nhiệm hiển thị quảng cáo (mặc dù ứng dụng không nhất thiết phải làm việc đó ngay lập tức). Để hiển thị định dạng quảng cáo do hệ thống xác định dễ dàng hơn, SDK sẽ cung cấp một số tài nguyên hữu ích, như được mô tả bên dưới.
Lớp NativeAdView
Đối với định dạng NativeAd
, sẽ có giá trị tương ứng
NativeAdView
. Đây là một lớp
ViewGroup
mà nhà xuất bản nên sử dụng làm gốc cho NativeAd
. Đáp
NativeAdView
đơn lẻ tương ứng với một quảng cáo gốc.
Mỗi chế độ xem được dùng để hiển thị nội dung của quảng cáo đó (ImageView
hiển thị
thành phần ảnh chụp màn hình) phải là phần tử con của NativeAdView
.
Hệ phân cấp khung hiển thị cho một quảng cáo gốc sử dụng
LinearLayout
để hiển thị lượt xem nội dung có thể có dạng như sau:
<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>
// Other assets such as image or media view, call to action, etc follow.
...
</LinearLayout>
</com.google.android.gms.ads.nativead.NativeAdView>
Dưới đây là ví dụ sẽ tạo NativeAdView
và
sẽ điền NativeAd
vào đó:
Java
AdLoader.Builder builder = new AdLoader.Builder(this, "AD_UNIT_ID")
.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 text, images and the native ad, etc into the ad
// view.
populateNativeAdView(nativeAd, adView);
frameLayout.removeAllViews();
frameLayout.addView(adView);
}
});
Kotlin
val builder = AdLoader.Builder(this, "AD_UNIT_ID")
.forNativeAd { nativeAd ->
// 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 text, images and the native ad, etc into the ad
// view.
populateNativeAdView(nativeAd, adView)
// Assumes you have a placeholder FrameLayout in your View layout
// (with id ad_frame) where the ad is to be placed.
ad_frame.removeAllViews()
ad_frame.addView(adView)
}
Lưu ý rằng tất cả nội dung của một quảng cáo gốc nhất định phải hiển thị bên trong
Bố cục NativeAdView
. SDK Quảng cáo của Google trên thiết bị di động cố gắng ghi lại một cảnh báo khi
thành phần quảng cáo 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 phương thức dùng để đăng ký chế độ xem được dùng cho
từng thành phần riêng lẻ và một thành phần để đăng ký chính đối tượng NativeAd
.
Việc đăng ký các chế độ xem theo cách này cho phép SDK tự động xử lý các công việc
chẳng hạn như:
- Ghi lại lượt nhấp
- Ghi lại lượt hiển thị khi pixel đầu tiên hiển thị trên màn hình
- Hiển thị lớp phủ Lựa chọn quảng cáo
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. Để khoảng trống trong góc ưa thích trong chế độ xem quảng cáo gốc cho biểu trưng Lựa chọn quảng cáo được chèn tự động. Ngoài ra, quan trọng là lớp phủ Lựa chọn quảng cáo phải dễ nhìn thấy, vì vậy, hãy chọn màu nền và hình ảnh một cách 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 Mô tả trường quảng cáo gốc.
Mô hình phân bổ quảng cáo
Bạn phải hiển thị một thuộc tính quảng cáo để biểu thị rằng lượt xem đó là một quảng cáo. Tìm hiểu thêm trong chính sách của chúng tôi nguyên tắc.
Ví dụ về mã
Dưới đây là các bước để hiển thị quảng cáo gốc:
- Tạo một thực thể của lớp
NativeAdView
. - Đối với mỗi thành phần quảng cáo sẽ hiển thị:
- Điền vào thành phần hiển thị thành phần bằng thành phần trong đối tượng quảng cáo.
- Đăng ký chế độ xem tài sản bằng lớp
ViewGroup
.
- Đăng ký
MediaView
nếu bố cục quảng cáo gốc của bạn bao gồm một nội dung nghe nhìn lớn. - Đăng ký đối tượng quảng cáo bằng lớp
ViewGroup
.
Dưới đây là một hàm mẫu sẽ hiển thị NativeAd
:
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 above process for the other assets in the NativeAd
// using additional view objects (Buttons, ImageViews, etc).
...
// If the app is using a MediaView, it should be
// instantiated and passed to setMediaView. This view is a little different
// in that the asset is populated automatically, so there's one less step.
MediaView mediaView = (MediaView) adView.findViewById(R.id.ad_media);
adView.setMediaView(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);
}
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 above 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)
}
Sau đây là các nhiệm vụ riêng lẻ:
Tăng cường bố cục
Java
LayoutInflater inflater = (LayoutInflater) parent.getContext() .getSystemService(Context.LAYOUT_INFLATER_SERVICE); NativeAdView adView = (NativeAdView) inflater .inflate(R.layout.ad_layout_file, parent);
Kotlin
val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater val adView = inflater.inflate(R.layout.ad_layout_file, parent) as NativeAdView
Mã này đang tăng cường một bố cục XML có chứa các khung hiển thị để hiển thị một quảng cáo gốc quảng cáo rồi định vị một tham chiếu đến
NativeAdView
. Xin lưu ý rằng bạn cũng có thể sử dụng lại mộtNativeAdView
hiện có nếu có một thẻ trong mảnh hoặc hoạt động của bạn, hoặc thậm chí có thể tự động tạo một thực thể mà không cần dùng tệp bố cục.Điền và đăng ký chế độ xem tài sản
Mã mẫu này định vị chế độ xem được dùng để hiển thị dòng tiêu đề, đặt văn bản của dòng tiêu đề đó sử dụng nội dung chuỗi do đối tượng quảng cáo cung cấp và đăng ký nội dung đó với Đối tượng
NativeAdView
:Java
TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline); headlineView.setText(ad.getHeadline()); adView.setHeadlineView(headlineView);
Kotlin
val headlineView = adView.findViewById<TextView>(R.id.ad_headline) headlineView.text = ad.headline adView.headlineView = headlineView
Quá trình này xác định vị trí, đặt giá trị và đăng ký khung hiển thị bằng bạn nên lặp lại lớp chế độ xem quảng cáo cho từng nội dung do mà ứng dụng sẽ hiển thị.
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 mọi khung hiển thị ở trên hoặc trong chế độ xem quảng cáo gốc. Để tự quan sát các sự kiện nhấp chuột, hãy sử dụng quảng cáo trình nghe.
SDK sẽ xử lý số lượt nhấp vào thành phần lượt xem quảng cáo, miễn là bạn làm việc đúng cách điền và đăng ký chế độ xem tài sản, như đã thảo luận trong phần trước.
Dưới đây là một ví dụ về cách sử dụng trình nghe quảng cáo để quan sát sự kiện lượt nhấp:
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, altering the UI, and so on. } @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 by logging, altering the UI, and so on. } }) .build()
Đăng ký MediaView
Bạn phải sử dụng
MediaView
thay vìImageView
nếu bạn muốn đưa thành phần hình ảnh chính vào bố cục cho quảng cáo gốc quảng cáo.MediaView
là mộtView
đặc biệt được thiết kế để hiển thị nội dung nghe nhìn chính, video hoặc hình ảnh.MediaView
có thể được xác định trong bố cục XML hoặc được tạo động. Nó phải được đặt bên trong hệ phân cấp khung hiển thị củaNativeAdView
, giống như bất kỳ chế độ xem nội dung khác. Các ứng dụng sử dụngMediaView
phải đăng ký tài khoản này vớiNativeAdView
:Java
MediaView mediaView = adView.findViewById(R.id.ad_media); adView.setMediaView(mediaView);
Kotlin
adView.mediaView = adView.findViewById<MediaView>(R.id.ad_media)
Tương tự như với tất cả các chế độ xem tài sản, bạn phải điền nội dung vào chế độ xem nội dung nghe nhìn. Việc này được thực hiện bằng cách sử dụng
getMediaContent()
để truy xuất nội dung nghe nhìn có thể được chuyển đếnMediaView
. Dưới đây là một đoạn mã cài đặt nội dung nghe nhìn cho phương tiện chế độ xem:Java
mediaView.setMediaContent(nativeAd.getMediaContent());
Kotlin
mediaView.mediaContent = nativeAd.mediaContent
ImageScaleType
Lớp
MediaView
có một thuộc tínhImageScaleType
khi hiển thị hình ảnh. Nếu bạn muốn thay đổi cách chuyển tỷ lệ hình ảnh trongMediaView
, hãy đặtImageView.ScaleType
tương ứng bằng cách sử dụngsetImageScaleType()
củaMediaView
: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ớpMediaView
. Khi Thuộc tínhMediaView
mediaContent
được đặt bằng một thực thểMediaContent
:Nếu có nội dung video, 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 quảng cáo có chứa thành phần video hay không bằng cách chọnhasVideoContent()
.Nếu quảng cáo không chứa thành phần video thì thành phần
mainImage
sẽ được tải xuống và được đặt bên trongMediaView
.
Theo mặc định,
mainImage
là thành phần hình ảnh được tải xuống đầu tiên. NếusetReturnUrlsForImageAssets(true)
đã được dùng,mainImage
lànull
và bạn phải đặt thuộc tínhmainImage
thành hình ảnh được tải xuống theo cách thủ công. Xin lưu ý rằng hệ thống sẽ chỉ sử dụng hình ảnh này khi không có sẵn nội dung video.Đăng ký đối tượng quảng cáo gốc
Bước cuối cùng này sẽ đăng ký đối tượng quảng cáo gốc với chế độ xem chịu trách nhiệm hiển thị quảng cáo:
Java
adView.setNativeAd(ad);
Kotlin
adView.setNativeAd(ad)
Huỷ quảng cáo
Khi hiển thị xong quảng cáo gốc, bạn nên huỷ bỏ quảng cáo đó để quảng cáo là nơi thu gom rác đúng cách.
Java
nativeAd.destroy();
Kotlin
nativeAd.destroy()
Ví dụ trên GitHub
Hoàn tất ví dụ về việc triển khai quảng cáo gốc:
Các bước tiếp theo
Khám phá các chủ đề sau: