Quảng cáo gốc

Hiển thị NativeAd

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 để có đị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). Để 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ả bên dưới.

Xác định lớp NativeAdView

Xác định lớp NativeAdView. Lớp này là lớp ViewGroup và là vùng chứa cấp cao nhất cho lớp NativeAdView. Mỗi khung hiển thị 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ử khung hiển thị MediaView hoặc phần tử khung hiển thị 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.libraries.ads.mobile.sdk.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.libraries.ads.mobile.sdk.nativead.NativeAdView>

Jetpack Compose

Thêm mô-đun JetpackComposeDemo/compose-util bao gồm các trình trợ giúp để soạn NativeAdView và các thành phần của mô-đun đó.

Sử dụng mô-đun compose-util, hãy soạn một 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ý aad 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:

Kotlin

// Build an ad request with native ad options to customize the ad.
val adTypes = listOf(NativeAd.NativeAdType.NATIVE)
val adRequest = NativeAdRequest
  .Builder("/21775744923/example/native", adTypes)
  .build()

val adCallback =
  object : NativeAdLoaderCallback {
    override fun onNativeAdLoaded(nativeAd: NativeAd) {
      activity?.runOnUiThread {

        val nativeAdBinding = NativeAdBinding.inflate(layoutInflater)
        val adView = nativeAdBinding.root
        val frameLayout = myActivityLayout.nativeAdPlaceholder

        // Populate and register the native ad asset views.
        displayNativeAd(nativeAd, nativeAdBinding)

        // Remove all old ad views and add the new native ad
        // view to the view hierarchy.
        frameLayout.removeAllViews()
        frameLayout.addView(adView)
      }
    }
  }

// Load the native ad with our request and callback.
NativeAdLoader.load(adRequest, adCallback)

Java

// Build an ad request with native ad options to customize the ad.
List<NativeAd.NativeAdType> adTypes = Arrays.asList(NativeAd.NativeAdType.NATIVE);
NativeAdRequest adRequest = new NativeAdRequest
                                .Builder("/21775744923/example/native", adTypes)
                                .build();

NativeAdLoaderCallback adCallback = new NativeAdLoaderCallback() {
    @Override
    public void onNativeAdLoaded(NativeAd nativeAd) {
      if (getActivity() != null) {
        getActivity()
          .runOnUiThread(() -> {
            // Inflate the native ad view and add it to the view hierarchy.
            NativeAdBinding nativeAdBinding = NativeAdBinding.inflate(getLayoutInflater());
            NativeAdView adView = (NativeAdView) nativeAdBinding.getRoot();
            FrameLayout frameLayout = myActivityLayout.nativeAdPlaceholder;

            // Populate and register the native ad asset views.
            displayNativeAd(nativeAd, nativeAdBinding);

            // Remove all old ad views and add the new native ad
            // view to the view hierarchy.
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        });
      }
    }
};

// Load the native ad with our request and callback.
NativeAdLoader.load(adRequest, adCallback);

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 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ẽ tìm cách ghi nhật ký cảnh báo khi tài sản quảng cáo gốc hiển thị bên ngoài bố cục của 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 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 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 số 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ỉ có một số nhà xuất bản đủ điều kiện để sử dụng tính năng này

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 chế độ xem quảng cáo khi một quảng cáo chèn lấp được trả về. 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 một khoảng ở góc bạn muốn đặt 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, bạn phải đảm bảo rằng người dùng dễ dàng nhìn thấy lớp phủ Lựa chọn quảng cáo, 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ề hình thức và chức năng của lớp phủ, hãy tham khảo nguyên tắc 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 để cho người dùng biết họ đang thấy quảng cáo. Hãy xem nguyên tắc chính sách của chúng tôi để biết thêm.

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 bản sao 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 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.
    2. Đăng ký chế độ xem thành phần bằng lớp NativeAdView.

  3. Đăng ký đối tượng quảng cáo bằng lớp NativeAdView.

Dưới đây là một hàm mẫu sẽ hiển thị NativeAd:

Kotlin

private fun displayNativeAd(nativeAd: NativeAd, nativeAdBinding : NativeAdBinding) {
  // Set the native ad view elements.
  val nativeAdView = nativeAdBinding.root
  nativeAdView.advertiserView = nativeAdBinding.adAdvertiser
  nativeAdView.bodyView = nativeAdBinding.adBody
  nativeAdView.callToActionView = nativeAdBinding.adCallToAction
  nativeAdView.headlineView = nativeAdBinding.adHeadline
  nativeAdView.iconView = nativeAdBinding.adAppIcon
  nativeAdView.priceView = nativeAdBinding.adPrice
  nativeAdView.starRatingView = nativeAdBinding.adStars
  nativeAdView.storeView = nativeAdBinding.adStore

  // Set the view element with the native ad assets.
  nativeAdBinding.adAdvertiser.text = nativeAd.advertiser
  nativeAdBinding.adBody.text = nativeAd.body
  nativeAdBinding.adCallToAction.text = nativeAd.callToAction
  nativeAdBinding.adHeadline.text = nativeAd.headline
  nativeAdBinding.adAppIcon.setImageDrawable(nativeAd.icon?.drawable)
  nativeAdBinding.adPrice.text = nativeAd.price
  nativeAd.starRating?.toFloat().let { value ->
    nativeAdBinding.adStars.rating = value
  }
  nativeAdBinding.adStore.text = nativeAd.store

  // Hide views for assets that don't have data.
  nativeAdBinding.adAdvertiser.visibility = getAssetViewVisibility(nativeAd.advertiser)
  nativeAdBinding.adBody.visibility = getAssetViewVisibility(nativeAd.body)
  nativeAdBinding.adCallToAction.visibility = getAssetViewVisibility(nativeAd.callToAction)
  nativeAdBinding.adHeadline.visibility = getAssetViewVisibility(nativeAd.headline)
  nativeAdBinding.adAppIcon.visibility = getAssetViewVisibility(nativeAd.icon)
  nativeAdBinding.adPrice.visibility = getAssetViewVisibility(nativeAd.price)
  nativeAdBinding.adStars.visibility = getAssetViewVisibility(nativeAd.starRating)
  nativeAdBinding.adStore.visibility = getAssetViewVisibility(nativeAd.store)

  // Inform the Google Mobile Ads SDK that you have finished populating
  // the native ad views with this native ad.
  nativeAdView.registerNativeAd(nativeAd, nativeAdBinding.adMedia)
}

/**
* Determines the visibility of an asset view based on the presence of its asset.
*
* @param asset The native ad asset to check for nullability.
* @return [View.VISIBLE] if the asset is not null, [View.INVISIBLE] otherwise.
*/
private fun getAssetViewVisibility(asset: Any?): Int {
  return if (asset == null) View.INVISIBLE else View.VISIBLE
}

Java

private void displayNativeAd(ad: NativeAd, nativeAdBinding : NativeAdBinding) {
  // Set the native ad view elements.
  NativeAdView nativeAdView = nativeAdBinding.getRoot();
  nativeAdView.setAdvertiserView(nativeAdBinding.adAdvertiser);
  nativeAdView.setBodyView(nativeAdBinding.adBody);
  nativeAdView.setCallToActionView(nativeAdBinding.adCallToAction);
  nativeAdView.setHeadlineView(nativeAdBinding.adHeadline);
  nativeAdView.setIconView(nativeAdBinding.adAppIcon);
  nativeAdView.setPriceView(nativeAdBinding.adPrice);
  nativeAdView.setStarRatingView(nativeAdBinding.adStars);
  nativeAdView.setStoreView(nativeAdBinding.adStore);

  // Set the view element with the native ad assets.
  nativeAdBinding.adAdvertiser.setText(nativeAd.getAdvertiser());
  nativeAdBinding.adBody.setText(nativeAd.getBody());
  nativeAdBinding.adCallToAction.setText(nativeAd.getCallToAction());
  nativeAdBinding.adHeadline.setText(nativeAd.getHeadline());
  if (nativeAd.getIcon() != null) {
      nativeAdBinding.adAppIcon.setImageDrawable(nativeAd.getIcon().getDrawable());
  }
  nativeAdBinding.adPrice.setText(nativeAd.getPrice());
  if (nativeAd.getStarRating() != null) {
      nativeAdBinding.adStars.setRating(nativeAd.getStarRating().floatValue());
  }
  nativeAdBinding.adStore.setText(nativeAd.getStore());

  // Hide views for assets that don't have data.
  nativeAdBinding.adAdvertiser.setVisibility(getAssetViewVisibility(nativeAd.getAdvertiser()));
  nativeAdBinding.adBody.setVisibility(getAssetViewVisibility(nativeAd.getBody()));
  nativeAdBinding.adCallToAction.setVisibility(getAssetViewVisibility(nativeAd.getCallToAction()));
  nativeAdBinding.adHeadline.setVisibility(getAssetViewVisibility(nativeAd.getHeadline()));
  nativeAdBinding.adAppIcon.setVisibility(getAssetViewVisibility(nativeAd.getIcon()));
  nativeAdBinding.adPrice.setVisibility(getAssetViewVisibility(nativeAd.getPrice()));
  nativeAdBinding.adStars.setVisibility(getAssetViewVisibility(nativeAd.getStarRating()));
  nativeAdBinding.adStore.setVisibility(getAssetViewVisibility(nativeAd.getStore()));

  // Inform the Google Mobile Ads SDK that you have finished populating
  // the native ad views with this native ad.
  nativeAdView.registerNativeAd(nativeAd, nativeAdBinding.adMedia);
}

/**
* Determines the visibility of an asset view based on the presence of its asset.
*
* @param asset The native ad asset to check for nullability.
* @return {@link View#VISIBLE} if the asset is not null, {@link View#INVISIBLE} otherwise.
*/
private int getAssetViewVisibility(Object asset) {
    return (asset == null) ? View.INVISIBLE : View.VISIBLE;
}

Sau đây là các nhiệm vụ riêng lẻ:

  1. Tăng cường bố cục

    Kotlin

     // Remove all old ad views when loading a new native ad.
 binding.nativeViewContainer.removeAllViews()

 // Inflate the native ad view and add it to the view hierarchy.
 val nativeAdBinding = NativeAdBinding.inflate(layoutInflater)
 binding.nativeViewContainer.addView(nativeAdBinding.root)

    Java

     // Remove all old ad views when loading a new native ad.
 binding.nativeViewContainer.removeAllViews();

 // Inflate the native ad view and add it to the view hierarchy.
 NativeAdBinding nativeAdBinding = NativeAdBinding.inflate(getLayoutInflater());
 binding.nativeViewContainer.addView(nativeAdBinding.getRoot());

    Mã này đang tăng cường sử dụng bố cục XML có chứa các chế độ xem để hiển thị quảng cáo gốc, 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ế độ 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 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:

    Kotlin

     nativeAdView.headlineView = nativeAdBinding.adHeadline
 nativeAdBinding.adHeadline.text = nativeAd.headline
 nativeAdBinding.adHeadline.visibility = getAssetViewVisibility(nativeAd.headline)

    Java

     nativeAdView.setHeadlineView(nativeAdBinding.adHeadline);
 nativeAdBinding.adHeadline.setText(nativeAd.getHeadline());
 nativeAdBinding.adHeadline.setVisibility(getAssetViewVisibility(nativeAd.getHeadline()));

    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 chế độ xem ở trên hoặc trong chế độ xem quảng cáo gốc. SDK sẽ xử lý số lượt nhấp vào tài sản chế độ xem quảng cáo, miễn là bạn điền và đăng ký chính xác chế độ xem tài sản như đã nêu ở mục trước đó.

    Để nghe các lượt nhấp, hãy triển khai lệnh gọi lại lượt nhấp của SDK quảng cáo trên thiết bị di động của Google:

    Kotlin

     private fun setEventCallback(nativeAd: NativeAd) {
   nativeAd.adEventCallback =
     object : NativeAdEventCallback {
       override fun onAdClicked() {
         Log.d(Constant.TAG, "Native ad recorded a click.")
       }
     }
 }

    Java

     private void setEventCallback(NativeAd nativeAd) {
   nativeAd.setAdEventCallback(new NativeAdEventCallback() {
       @Override
       public void onAdClicked() {
         Log.d(Constant.TAG, "Native ad recorded a click.");
       }
   });
 }

  4. Đăng ký MediaView

    Bạn bắt buộc 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.

    Kotlin

    // Get the media asset view.
val mediaView = nativeAdBinding.adMedia

    Java

    // Get the media asset view.
MediaView mediaView = nativeAdBinding.adMedia;

    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 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:

    Kotlin

    nativeAdViewBinding.mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP

    Java

    nativeAdViewBinding.mediaView.setImageScaleType(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 bạn đặt thuộc tính MediaView mediaContent bằng bản sao 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 quảng cáo có chứa thành phần video 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.

    Nếu disableImageDownloading(true) được sử dụng, mainImage sẽ là null và bạn phải đặt thuộc tính mainImage này 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.

  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ị đối tượng đó, cùng với chế độ xem cho thành phần nội dung đa phương tiện.

    Kotlin

     // Inform the Google Mobile Ads SDK that you have finished populating
 // the native ad views with this native ad and media content asset.
 nativeAdView.registerNativeAd(nativeAd, mediaView)

    Java

     // Inform the Google Mobile Ads SDK that you have finished populating
 // the native ad views with this native ad and media content asset.
 nativeAdView.registerNativeAd(nativeAd, mediaView);

Huỷ quảng cáo

Sau khi hoàn thành việc hiển thị quảng cáo gốc, bạn nên huỷ quảng cáo đó để quảng cáo được thu gom rác đúng cách.

Kotlin

nativeAd.destroy()

Java

nativeAd.destroy();

Kiểm thử 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

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)
  • 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 tuỳ chỉnh là 10063170.

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

Tính năng chèn lấp Ad Exchange chỉ dành cho một số nhà xuất bản. Để 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:

/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ã mẫu và mã đơn vị quảng cáo thực tế của bạn trước khi chạy quảng cáo.

Các bước tiếp theo

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

Ví dụ:

Tải và chạy ứng dụng mẫu minh hoạ cách sử dụng SDK quảng cáo trên thiết bị di động của Google thế hệ mới.