Quảng cáo gốc

Chọn nền tảng: Android iOS Android (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 lớp NativeAdView. Mỗi chế độ xem 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ử chế độ xem MediaView hoặc phần tử chế độ xem 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

  1. Thêm thư mục JetpackCompose Utilities. Thư mục này bao gồm các trình trợ giúp để soạn đối tượng và thành phần 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 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("ca-app-pub-3940256099942544/2247696110", 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("ca-app-pub-3940256099942544/2247696110", 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 được hiển thị bên trong bố cục NativeAdView. GMA Next-Gen SDK cố gắng ghi lại cảnh báo khi các thành phần 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 các 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 thành phần hiển thị theo cách này cho phép SDK tự động xử lý các tác vụ như:

  • Lượt nhấp vào đường liên kết đặt phòng
  • 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ủ Lựa chọn quảng cáo

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

Ví dụ sau đây minh hoạ cách hiển thị 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 vào mỗi chế độ xem quảng cáo. Để trống góc bạn muốn trong chế độ xem quảng cáo gốc để chèn biểu tượng Lựa chọn quảng cáo tự động. Ngoài ra, lớp phủ Lựa chọn quảng cáo cũng phải dễ 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 xem phần Mô tả trường quảng cáo gốc.

Thuộc tính quảng cáo

Bạn phải hiển thị thuộc tính quảng cáo để cho biết rằng chế độ 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.

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 bất kỳ chế độ xem nào bên trên hoặc bên trong chế độ xem quảng cáo gốc. SDK sẽ xử lý các lượt nhấp vào thành phần chế độ xem quảng cáo, miễn là bạn điền và đăng ký đúng cách 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ó thuộc tính ImageScaleType khi hiển thị hình ảnh. Nếu bạn muốn thay đổi cách điều chỉnh tỷ lệ 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 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 thuộc tính MediaView mediaContent được đặt bằng một thực thể 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 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 với AI, GMA Next-Gen SDK cung cấp một thành phần tóm tắt mẫu quảng cáo (creativeSummary) cho mẫu quảng cáo. Bạn có thể tích hợp quảng cáo vào quy trình trò chuyện của ứng dụng bằng một tin nhắn giới thiệu.

Thêm thành phần hiển thị 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ý thành phần hiển thị

Điền TextView bằng creativeSummary và đăng ký bằng thuộc tính creativeSummaryView trên đối tượng NativeAdView. Việc đăng ký chế độ xem này 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 đã sửa đổi

  • 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ới 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 được 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 hội thoại tuỳ chỉnh vào bả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.

Huỷ quảng cáo

Sau khi bạn hiển thị 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();

Các bước tiếp theo

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

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.