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

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 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 thực hiện 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.

NativeAdView lớp

Đố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 đó:

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);
        }
});

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 cho quảng cáo thay thế gốc quảng cáo—hiện được giới hạn cho một nhóm nhà xuất bản chọn lọc

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 dưới dạng chế độ xem quảng cáo khi quảng cáo thay thế bị trả lại. Nếu ứng dụng của bạn sử dụng chèn lấp quảng cáo gốc, hãy để lại khoảng trống quảng cáo ưu tiên góc của 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 nền màu sắc và hình ảnh phù hợp. Để biết thêm thông tin về lớp phủ giao diện và chức năng, đề cập đến cách triển khai quảng cáo gốc có lập trình nguyên tắc.

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ị thuộc tính quảng cáo cho biểu thị rằng lượt xem đó là 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 cần thực hiện để hiển thị quảng cáo gốc:

1. Tạo một thực thể của lớp NativeAdView.
2. Đối với mỗi thành phần quảng cáo sẽ hiển thị:
   1. Điền tài sản trong đối tượng quảng cáo vào chế độ xem tài sản.
   2. Đăng ký chế độ xem thành phần bằng lớp ViewGroup.
3. Đă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.
4. Đă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:

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);
}

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à từng nhiệm vụ:

1. 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 NativeAdView hiện có nếu chế độ xem đó có trong mảnh hoặc hoạt động của bạn, hay thậm chí là tự động tạo một bản sao mà không cần sử dụng tệp bố cục.

2. Điền và đăng ký chế độ xem thành phầ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
   

   Quy trình này bao gồm việc xác định vị trí chế độ xem, đặt giá trị chế độ xem cũng như đăng ký chế độ xem đó bằng lớp chế độ xem quảng cáo. Quy trình này sẽ lặp lại cho từng thành phần của đối tượng quảng cáo gốc mà ứng dụng sẽ hiển thị.

3. 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ụ sử dụng quảng cáo trình nghe để quan sát sự kiện nhấp chuột:

   Java

   AdLoader adLoader = new AdLoader.Builder(context, "/21775744923/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, "/21775744923/example/native")
       ...
       .withAdListener(object : AdListener() {
           override fun onAdFailedToLoad(adError: LoadAdError) {
               // Handle the failure by logging, altering the UI, and so on.
           }
       })
       .build()
   

4. Đă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ột View đặ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ủa NativeAdView, giống như bất kỳ chế độ xem nội dung khác. Các ứng dụng sử dụng MediaView phải đăng ký tài khoản 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 thành phầ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 đến MediaView. 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í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 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 đa phương tiện của quảng cáo gốc đượ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ó 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 tài sản video có thể sử dụng hay không bằng cách kiểm tra 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 dùng, mainImage là null và bạn phải đặt thuộc tính mainImage 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.

5. Đă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ỷ bỏ 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.

nativeAd.destroy();

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:

/21775744923/example/native

Thẻ 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, đồng thời đị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)
• MainImage (hình ảnh)
• Chú thích (văn bản)

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

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

Hiện tại, chỉ có một số nhà xuất bản đủ điều kiện để có thể sử dụng tính năng chèn lấp Ad Exchange. Người nhận bạn có thể kiểm tra hành vi 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:

/21775744923/example/native-backfill

Đơn vị này sẽ 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ủ AdChoices.

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

Ví dụ trên GitHub

Hoàn tất ví dụ về việc triển khai quảng cáo gốc:

Java Kotlin

Các bước tiếp theo

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

• Quyền riêng tư của người dùng
• Khởi chạy SDK và tải quảng cáo được tối ưu hoá (thử nghiệm)