Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

Hiển thị quảng cáo gốc

Khi một quảng cáo gốc tải, GMA Next-Gen SDK 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 một lớp NativeAdView. Mỗi khung hiển thị quảng cáo gốc đều 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. Các thành phần này phải là thành phần con của đối tượng NativeAdView.

Bố cục XML

Thêm một NativeAdView XML vào dự án của bạ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

Đưa thư mục JetpackCompose Utilities vào. Thư mục này bao gồm các đối tượng và thành phần hỗ trợ để tạo đối tượng 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 một quảng cáo gốc tải, hãy xử lý sự kiện gọi lại, tăng chế độ xem quảng cáo gốc và thêm chế độ xem đó vào hệ phân cấp khung hiển thị:

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 cho một quảng cáo gốc nhất định đều phải được hiển thị trong bố cục NativeAdView. GMA Next-Gen SDK cố gắng ghi lại một cảnh báo khi các thành phần gốc đượ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 chế độ xem quảng cáo cũng cung cấp các 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 phương thức để đăng ký chính đối tượng NativeAd. Việc đăng ký các khung hiển thị theo cách này cho phép SDK tự động xử lý các tác vụ như:

Ghi lại lượt nhấp
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ủ AdChoices cho mẫu quảng cáo thay thế tự nhiên – hiện chỉ giới hạn cho một số nhóm nhà xuất bản

Hiển thị quảng cáo gốc

Ví dụ sau đây minh hoạ cách hiển thị một quảng cáo gốc:

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 GMA Next-Gen 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 GMA Next-Gen 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;
}

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 một lượt xem quảng cáo khi quảng cáo thay thế được trả về. Nếu ứng dụng của bạn sử dụng tính năng nguồn quảng cáo thay thế cho quảng cáo gốc, hãy chừa chỗ ở góc ưu tiên trong lượt xem quảng cáo gốc để tự động chèn biểu tượ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 trông thật dễ nhìn, 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 nguyên tắc triển khai quảng cáo gốc có lập trình.

Phân bổ giá trị đóng góp cho quảng cáo đối với 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 khung hiển thị đó là một quảng cáo. Tìm hiểu thêm trong hướng dẫn về 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 mọi khung hiển thị ở trên hoặc trong khung hiển thị quảng cáo gốc. SDK sẽ xử lý các lượt nhấp vào thành phần của chế độ xem quảng cáo miễn là bạn điền và đăng ký chính xác 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 GMA Next-Gen SDK:

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

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 thu phóng hình ảnh trong MediaView, hãy đặt ImageView.ScaleType tương ứng bằ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 lưu giữ 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 phiên bản 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 một thành phần video có sẵn 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.

Thêm bản tóm tắt mẫu quảng cáo

Trong các ứng dụng trò chuyện và trò chuyện bằng AI, GMA Next-Gen SDK cung cấp một thành phần tóm tắt sáng tạo (creativeSummary) cho mẫu quảng cáo. Bạn có thể tích hợp quảng cáo vào luồng trò chuyện của ứng dụng bằng một thông báo giới thiệu.

Thêm view văn bản vào bố cục

Thêm TextView cho thành phần tóm tắt mẫu quảng cáo bên trong bố cục vùng chứa NativeAdView:

<TextView
    android:id="@+id/ad_creative_summary"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="13sp" />

Điền và đăng ký khung hiển thị

Điền TextView bằng creativeSummary rồi đăng ký bằng thuộc tính creativeSummaryView trên đối tượng NativeAdView. Việc đăng ký khung hiển thị cho phép tự động theo dõi lượt nhấp cho thành phần tóm tắt mẫu quảng cáo.

Kotlin

private fun populateCreativeSummary(
  nativeAd: NativeAd,
  nativeAdBinding: NativeAdBinding,
  nativeAdView: NativeAdView,
) {
  val summary = nativeAd.creativeSummary
  if (summary == null) {
    nativeAdBinding.adCreativeSummary.visibility = View.GONE
    return
  }

  nativeAdBinding.adCreativeSummary.text = summary
  nativeAdBinding.adCreativeSummary.visibility = View.VISIBLE
  nativeAdView.creativeSummaryView = nativeAdBinding.adCreativeSummary
}

Java

private void populateCreativeSummary(
    NativeAd nativeAd, NativeAdBinding nativeAdBinding, NativeAdView nativeAdView) {
  String summary = nativeAd.getCreativeSummary();
  if (summary == null) {
    nativeAdBinding.adCreativeSummary.setVisibility(View.GONE);
    return;
  }

  nativeAdBinding.adCreativeSummary.setText(summary);
  nativeAdBinding.adCreativeSummary.setVisibility(View.VISIBLE);
  nativeAdView.setCreativeSummaryView(nativeAdBinding.adCreativeSummary);
}

Theo dõi lượt nhấp và văn bản đã chỉnh sửa

Hiển thị trực tiếp: Khi bạn hiển thị chính xác chuỗi creativeSummary do SDK cung cấp, hãy đăng ký chuỗi đó vào thuộc tính creativeSummaryView bên trong vùng chứa NativeAdView để bật tính năng xử lý lượt nhấp của SDK.
Phần giới thiệu đã sửa đổi: Nếu ứng dụng của bạn sửa đổi, tóm tắt hoặc thêm văn bản đàm thoại tuỳ chỉnh vào phần tóm tắt mẫu quảng cáo, hãy đặt văn bản đã sửa đổi bên ngoài vùng chứa NativeAdView.

Hủy bỏ quảng cáo

Sau khi bạn hiển thị một 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:

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 quảng cáo gốc được bán trực tiếp, bạn có thể sử dụng mã đơn vị quảng cáo Ad Manager này:

/21775744923/example/native

Mã này được thiết lập để 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 cho định dạng quảng cáo gốc tuỳ chỉnh là 10063170.

Quảng cáo gốc thay thế

Tính năng quảng cáo thay thế của Ad Exchange chỉ dành cho một số nhà xuất bản. Để kiểm thử hành vi của quảng cáo thay thế gốc, hãy sử dụng đơn vị quảng cáo Ad Manager sau:

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

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

Ví dụ

Tải xuống và chạy ứng dụng mẫu minh hoạ cách sử dụng GMA Next-Gen SDK.

Hiển thị quảng cáo gốc Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Xác định lớp NativeAdView

Bố cục XML

Jetpack Compose

Xử lý quảng cáo gốc đã tải

Kotlin

Java

Hiển thị quảng cáo gốc

Kotlin

Java

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

Phân bổ giá trị đóng góp cho quảng cáo đối với quảng cáo gốc có lập trình

Xử lý lượt nhấp

Kotlin

Java

ImageScaleType

Kotlin

Java

MediaContent

Thêm bản tóm tắt mẫu quảng cáo

Thêm view văn bản vào bố cục

Điền và đăng ký khung hiển thị

Kotlin

Java

Theo dõi lượt nhấp và văn bản đã chỉnh sửa

Hủy bỏ quảng cáo

Kotlin

Java

Kiểm thử mã quảng cáo gốc

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

Quảng cáo gốc thay thế

Các bước tiếp theo

Ví dụ

Hiển thị quảng cáo gốc

Xác định lớp `NativeAdView`