Trang này được dịch bởi Cloud Translation API.

Quảng cáo gốc nâng cao

Hiển thị một lớp

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 xử lý để biết định dạng quảng cáo tương ứng. Sau đó, ứng dụng của bạn sẽ chịu trách nhiệm hiển thị quảng cáo (mặc dù không nhất thiết phải làm việc đó ngay lập tức). Để giúp hiển thị các định dạng quảng cáo do hệ thống xác định một cách dễ dàng hơn, SDK sẽ cung cấp một số tài nguyên hữu ích như mô tả dưới đây.

`NativeAdView` lớp

Đối với định dạng NativeAd, sẽ có lớp NativeAdView tương ứng. Lớp này là một ViewGroup mà nhà xuất bản nên sử dụng làm lớp gốc cho NativeAd. Một NativeAdView sẽ tương ứng với một quảng cáo gốc. Mỗi chế độ xem dùng để hiển thị thành phần của quảng cáo đó (ví dụ: ImageView hiển thị thành phần ảnh chụp màn hình) phải là đối tượng con của đối tượng NativeAdView.

Hệ phân cấp chế độ xem cho một quảng cáo gốc sử dụng LinearLayout để hiển thị chế độ xem thành phần của quảng cáo 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à điền sẵn NativeAd:

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ả tài sản 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 trên thiết bị di động của Google sẽ cố gắng ghi lại cảnh báo khi thành phần gốc hiển thị bên ngoài bố cục khung hiển thị quảng cáo gốc.

Các lớp khung hiển thị quảng cáo cũng cung cấp phương thức dùng để đăng ký khung hiển thị được sử dụng cho từng tài sả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 lượt 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 các 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 cho mẫu quảng cáo chèn lấp gốc – hiện chỉ giới hạn cho một nhóm nhà xuất bản được chọn

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 dưới dạng chế độ xem quảng cáo khi hệ thống trả về một quảng cáo chèn lấp. Nếu ứng dụng của bạn sử dụng tính năng chèn lấp quảng cáo gốc, hãy để trống góc ưu tiên của chế độ xem quảng cáo gốc để hệ thống tự động chèn biểu trưng Lựa chọn quảng cáo. Ngoài ra, 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 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 tham khảo hướng dẫn triển khai quảng cáo gốc có lập trình.

Thuộc tính quảng cáo cho quảng cáo gốc có lập trình

Khi hiển thị quảng cáo gốc có lập trình, 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 nguyên tắc chính sách của chúng tôi.

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ị:
1. Điền vào chế độ xem nội dung bằng nội dung trong đối tượng quảng cáo.
2. Đăng ký chế độ xem thành phần bằng lớp ViewGroup.
Đăng ký MediaView nếu bố cục quảng cáo gốc bao gồm một thành phần nội dung nghe nhìn có dung lượng 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)
}

Dưới đây là các tác 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 bố cục XML có chứa các khung hiển thị để hiển thị quảng cáo gốc và sau đó định vị một mục tham chiếu đến NativeAdView. Xin lưu ý rằng bạn cũng có thể sử dụng lại NativeAdView hiện có nếu chế độ đó có trong mảnh hoặc hoạt động của bạn, hay thậm chí tự động tạo một thực thể mà không cần sử dụng tệp bố cục.
Điền và đăng ký chế độ xem tài sản

Mã mẫu này sẽ định vị chế độ xem dùng để hiển thị dòng tiêu đề, đặt văn bản của dòng tiêu đề đó bằng cách sử dụng thành phần chuỗi do đối tượng quảng cáo cung cấp và đăng ký thành phần đó 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
```
Bạn nên lặp lại quy trình xác định vị trí chế độ xem, đặt giá trị chế độ xem và đăng ký chế độ xem đó với lớp chế độ xem quảng cáo cho từng thành phần do đối tượng quảng cáo gốc cung cấp mà ứng dụng sẽ hiển thị.

Xử lý lượt nhấp

Đừng triển khai bất kỳ trình xử lý lượt nhấp tuỳ chỉnh nào trên mọi chế độ xem ở 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 trình nghe quảng cáo.

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 điền và đăng ký chính xác chế độ xem thành phần, như đã trình bày ở phần trước.

Dưới đây là ví dụ sử dụng trình xử lý quảng cáo để quan sát các sự kiện nhấp chuột:

Java

AdLoader adLoader = new AdLoader.Builder(context, "/6499/example/native")
    ...
    .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, "/6499/example/native")
    ...
    .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 thành phần MediaView thay vì thành phần ImageView nếu muốn đưa thành phần hình ảnh chính vào bố cục cho quảng cáo gốc.

MediaView là một View đặc biệt được thiết kế để hiển thị thành phần nội dung nghe nhìn chính, có thể là video hoặc hình ảnh.

MediaView có thể được xác định trong bố cục XML hoặc được tạo tự động. Bạn nên đặt chế độ xem này bên trong hệ phân cấp chế độ xem của NativeAdView, giống như mọi chế độ xem tài sản khác. Các ứng dụng sử dụng MediaView phải đăng ký mã này với NativeAdView:
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. Bạn có thể thực hiện việc này bằng cách sử dụng phương thức getMediaContent() để truy xuất nội dung nghe nhìn có thể được chuyển đến MediaView. Dưới đây là đoạn mã giúp cài đặt nội dung nghe nhìn cho chế độ xem nội dung nghe nhìn:
Java
```
mediaView.setMediaContent(nativeAd.getMediaContent());
```
Kotlin
```
mediaView.mediaContent = nativeAd.mediaContent
```
ImageScaleType

Lớp MediaView có một thuộc tính ImageScaleType khi hiển thị hình ảnh. Nếu bạn muốn thay đổi cách chuyển tỷ lệ hình ảnh trong MediaView, hãy đặt ImageView.ScaleType tương ứng bằng cách sử dụ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 hiển thị bằng cách sử dụng lớp MediaView. Khi bạn đặt thuộc tính MediaView mediaContent bằng một thực thể MediaContent:
- Nếu có tài sả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 tài sản video có thể sử dụng hay không bằng cách chọn hasVideoContent().
- 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à đặt bên trong MediaView.
Theo mặc định, mainImage là thành phần hình ảnh được tải xuống đầu tiên. Nếu setReturnUrlsForImageAssets(true) được sử dụng, thì mainImage sẽ là null và bạn phải đặt thuộc tính mainImage cho hình ảnh 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 khung hiển thị chịu trách nhiệm hiển thị đối tượng đó:
Java
```
adView.setNativeAd(ad);
```
Kotlin
```
adView.setNativeAd(ad)
```

Huỷ quảng cáo

Sau khi hiển thị xong quảng cáo gốc, bạn nên hủy quảng cáo đó để quảng cáo được thu gom rác đúng cách.

Java

nativeAd.destroy();
        .inflate(R.layout.ad_layout_file, parent);

Kotlin

nativeAd.destroy()

Thử nghiệm mã quảng cáo gốc

Quảng cáo bán trực tiếp

Nếu muốn thử nghiệm xem quảng cáo gốc bán trực tiếp sẽ trông như thế nào, bạn có thể sử dụng mã đơn vị quảng cáo Ad Manager sau:

/6499/example/native

Mã này được định cấu hình để phân phát quảng cáo nội dung và quảng cáo cài đặt ứng dụng mẫu, cũng như định dạng quảng cáo gốc tuỳ chỉnh với các thành phần sau:

Dòng tiêu đề (văn bản)
Hình ảnh chính (hình ảnh)
Chú thích (văn bản)

Mã mẫu cho định dạng quảng cáo gốc tuỳ chỉnh là 10063170.

Quảng cáo chèn lấp gốc

Hiện tại, chỉ một số nhà xuất bản có thể sử dụng tính năng chèn lấp Ad Exchange. Để kiểm tra hoạt động của quảng cáo chèn lấp gốc, hãy sử dụng đơn vị quảng cáo Ad Manager sau:

/6499/example/native-backfill

Đơn vị này phân phát quảng cáo nội dung và quảng cáo cài đặt ứng dụng mẫu chứa lớp phủ Lựa chọn quảng cáo.

Hãy nhớ cập nhật mã để tham chiếu đến mã mẫu và đơn vị quảng cáo thực tế của bạn trước khi chạy quảng cáo.

Ví dụ trên GitHub

Hoàn tất ví dụ về quảng cáo gốc:

Java Kotlin

Các bước tiếp theo

Khám phá các chủ đề sau:

Quảng cáo gốc nâng cao

Hiển thị một lớp

NativeAdView lớp

Java

Kotlin

Lớp phủ Lựa chọn quảng cáo

Thuộc tính quảng cáo cho quảng cáo gốc có lập trình

Ví dụ về mã

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

ImageScaleType

Java

Kotlin

MediaContent

Java

Kotlin

Huỷ quảng cáo

Java

Kotlin

Thử nghiệm mã quảng cáo gốc

Quảng cáo bán trực tiếp

Quảng cáo chèn lấp gốc

Ví dụ trên GitHub

Các bước tiếp theo

`NativeAdView` lớp