หน้านี้ได้รับการแปลโดย Cloud Translation API

โฆษณาเนทีฟ

เมื่อโฆษณาเนทีฟโหลด SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google (เบต้า) จะเรียกใช้ Listener สำหรับ รูปแบบโฆษณาที่เกี่ยวข้อง จากนั้นแอปของคุณจะมีหน้าที่แสดงโฆษณา แม้ว่าจะไม่จำเป็นต้องแสดงทันทีก็ตาม SDK มีแหล่งข้อมูลที่มีประโยชน์บางอย่างตามที่อธิบายไว้ด้านล่างเพื่อช่วยให้การแสดงรูปแบบโฆษณาที่ระบบกำหนดง่ายขึ้น

กำหนดคลาส `NativeAdView`

กำหนดชั้นเรียน NativeAdView คลาสนี้เป็นคลาสViewGroup และเป็นคอนเทนเนอร์ระดับบนสุดสำหรับคลาส NativeAdView มุมมองโฆษณาเนทีฟแต่ละรายการมีชิ้นงานโฆษณาเนทีฟ เช่น MediaView องค์ประกอบมุมมองหรือTitle องค์ประกอบมุมมอง ซึ่งต้องเป็นองค์ประกอบย่อยของออบเจ็กต์ NativeAdView

เลย์เอาต์ XML

เพิ่ม XML NativeAdView ลงในโปรเจ็กต์

<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

รวมโมดูล JetpackComposeDemo/compose-util ซึ่งมีตัวช่วยสำหรับการเขียน NativeAdView และชิ้นงาน

ใช้โมดูล compose-util เพื่อเขียน 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.
        }
    }

จัดการโฆษณาเนทีฟที่โหลดแล้ว

เมื่อโฆษณาเนทีฟโหลด ให้จัดการเหตุการณ์ Callback ขยายการแสดงผลโฆษณาเนทีฟ และเพิ่มลงในลําดับชั้นการแสดงผล

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

โปรดทราบว่าชิ้นงานทั้งหมดของโฆษณาเนทีฟที่ระบุควรแสดงภายในเลย์เอาต์ NativeAdView Google Mobile Ads SDK (เบต้า) พยายามบันทึกคำเตือนเมื่อ แสดงผลชิ้นงานเนทีฟนอกเลย์เอาต์การแสดงผลโฆษณาเนทีฟ

คลาสมุมมองโฆษณายังมีเมธอดที่ใช้ในการลงทะเบียนมุมมองที่ใช้สำหรับ ชิ้นงานแต่ละรายการ และเมธอดที่ใช้ในการลงทะเบียนออบเจ็กต์ NativeAd เอง การลงทะเบียนมุมมองด้วยวิธีนี้ช่วยให้ SDK จัดการงานต่างๆ โดยอัตโนมัติได้ เช่น

การบันทึกการคลิก
การบันทึกการแสดงผลเมื่อมองเห็นพิกเซลแรกบนหน้าจอ
การแสดงการวางซ้อนตัวเลือกโฆษณาอื่นๆ

แสดงโฆษณาเนทีฟ

ตัวอย่างต่อไปนี้แสดงวิธีแสดงโฆษณาเนทีฟ

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 Google Mobile Ads SDK (beta) 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 Google Mobile Ads SDK (beta) 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;
}

การวางซ้อน "ตัวเลือกโฆษณาอื่นๆ"

SDK จะเพิ่มการวางซ้อน "ตัวเลือกโฆษณาอื่นๆ" ลงในมุมมองโฆษณาแต่ละรายการ เว้นที่ว่างในมุมที่ต้องการของมุมมองโฆษณาเนทีฟสำหรับโลโก้ตัวเลือกโฆษณาอื่นๆ ที่แทรกโดยอัตโนมัติ นอกจากนี้ การวางซ้อน "ตัวเลือกโฆษณาอื่นๆ" ต้องสังเกตเห็นได้ง่าย ดังนั้นให้เลือกสีและภาพพื้นหลังอย่างเหมาะสม ดูข้อมูลเพิ่มเติมเกี่ยวกับลักษณะและ ฟังก์ชันของภาพซ้อนได้ที่คำอธิบายฟิลด์โฆษณาเนทีฟ

การระบุว่าเป็นโฆษณา

คุณต้องแสดงการระบุว่าเป็นโฆษณาเพื่อระบุว่าการดูนั้นเป็นโฆษณา ดูข้อมูลเพิ่มเติมในหลักเกณฑ์ด้านนโยบาย

จัดการการคลิก

อย่าใช้ตัวแฮนเดิลการคลิกที่กำหนดเองในมุมมองใดๆ เหนือหรือภายใน มุมมองโฆษณาเนทีฟ SDK จะจัดการการคลิกชิ้นงานมุมมองโฆษณาตราบใดที่คุณ ป้อนและลงทะเบียนมุมมองชิ้นงานอย่างถูกต้อง

หากต้องการฟังการคลิก ให้ใช้การเรียกกลับการคลิกของ Google Mobile Ads 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

คลาส MediaView มีพร็อพเพอร์ตี้ ImageScaleType เมื่อแสดงรูปภาพ หากต้องการเปลี่ยนวิธีปรับขนาดรูปภาพใน MediaView ให้ตั้งค่าImageView.ScaleTypeที่เกี่ยวข้องโดยใช้เมธอด setImageScaleType() ของ MediaView ดังนี้

Kotlin

nativeAdViewBinding.mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP

Java

nativeAdViewBinding.mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);

MediaContent

คลาส MediaContent มีข้อมูลที่เกี่ยวข้องกับเนื้อหาสื่อของ โฆษณาเนทีฟ ซึ่งแสดงโดยใช้คลาส MediaView เมื่อตั้งค่าพร็อพเพอร์ตี้ MediaView mediaContent ด้วยอินสแตนซ์ MediaContent

หากมีเนื้อหาวิดีโอ ระบบจะบัฟเฟอร์และเริ่มเล่นภายใน MediaView คุณจะทราบว่าเนื้อหาวิดีโอพร้อมใช้งานหรือไม่โดยดูที่ hasVideoContent()
หากโฆษณาไม่มีชิ้นงานวิดีโอ ระบบจะดาวน์โหลดmainImage และวางไว้ในMediaViewแทน

ทำลายโฆษณา

หลังจากแสดงโฆษณาเนทีฟแล้ว ให้ทำลายโฆษณา ตัวอย่างต่อไปนี้จะทำลายโฆษณาเนทีฟ

Kotlin

nativeAd.destroy()

Java

nativeAd.destroy();

ขั้นตอนถัดไป

ดูหัวข้อต่อไปนี้

ความเป็นส่วนตัวของผู้ใช้

ตัวอย่าง

ดาวน์โหลดและเรียกใช้แอปตัวอย่าง ที่แสดงการใช้ Google Mobile Ads SDK (เบต้า)

กำหนดคลาส NativeAdView

เลย์เอาต์ XML

Jetpack Compose

จัดการโฆษณาเนทีฟที่โหลดแล้ว

Kotlin

Java

แสดงโฆษณาเนทีฟ

Kotlin

Java

การวางซ้อน "ตัวเลือกโฆษณาอื่นๆ"

การระบุว่าเป็นโฆษณา

จัดการการคลิก

Kotlin

Java

ImageScaleType

Kotlin

Java

MediaContent

ทำลายโฆษณา

Kotlin

Java

ขั้นตอนถัดไป

ตัวอย่าง

กำหนดคลาส `NativeAdView`