เมื่อโฆษณาเนทีฟโหลด SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google จะเรียกใช้ Listener สำหรับรูปแบบโฆษณาที่เกี่ยวข้อง จากนั้นแอปของคุณจะมีหน้าที่แสดงโฆษณา แม้ว่าจะไม่จำเป็นต้องแสดงทันทีก็ตาม SDK มีแหล่งข้อมูลที่มีประโยชน์บางอย่างตามที่อธิบายไว้ด้านล่างเพื่อช่วยให้การแสดงรูปแบบโฆษณาที่ระบบกำหนดง่ายขึ้น
กำหนดคลาส NativeAdView
กำหนดชั้นเรียน NativeAdView คลาสนี้เป็นคลาสViewGroup
และเป็นคอนเทนเนอร์ระดับบนสุดสำหรับคลาส NativeAdView มุมมองโฆษณาเนทีฟแต่ละรายการมีชิ้นงานโฆษณาเนทีฟ เช่น MediaView องค์ประกอบมุมมองหรือTitle องค์ประกอบมุมมอง ซึ่งต้องเป็นองค์ประกอบย่อยของออบเจ็กต์ NativeAdView
เลย์เอาต์ XML
เพิ่ม XML NativeAdView ลงในโปรเจ็กต์
<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>
        <!--Add remaining assets such as the image and media view.-->
    </LinearLayout>
</com.google.android.gms.ads.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 ขยายการแสดงผลโฆษณาเนทีฟ และเพิ่มลงในลําดับชั้นการแสดงผล
Java
AdLoader.Builder builder = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
    .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 assets into the ad view.
            displayNativeAd(nativeAd, adView);
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        }
});
Kotlin
val builder = AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
    .forNativeAd { nativeAd ->
        // Assumes you have a placeholder FrameLayout in your View layout
        // (with ID fl_adplaceholder) where the ad is to be placed.
        val 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
        val adView = layoutInflater
                .inflate(R.layout.native_ad_layout, null) as NativeAdView
        // This method sets the assets into the ad view.
        displayNativeAd(nativeAd, adView)
        frameLayout.removeAllViews()
        frameLayout.addView(adView)
    }
Jetpack Compose
@Composable
/** Load and display a native ad. */
fun NativeScreen() {
  var nativeAd by remember { mutableStateOf<NativeAd?>(null) }
  val context = LocalContext.current
  var isDisposed by remember { mutableStateOf(false) }
  DisposableEffect(Unit) {
    // Load the native ad when we launch this screen
    loadNativeAd(
      context = context,
      onAdLoaded = { ad ->
        // Handle the native ad being loaded.
        if (!isDisposed) {
          nativeAd = ad
        } else {
          // Destroy the native ad if loaded after the screen is disposed.
          ad.destroy()
        }
      },
    )
    // Destroy the native ad to prevent memory leaks when we dispose of this screen.
    onDispose {
      isDisposed = true
      nativeAd?.destroy()
      nativeAd = null
    }
  }
  // Display the native ad view with a user defined template.
  nativeAd?.let { adValue -> DisplayNativeAdView(adValue) }
}
fun loadNativeAd(context: Context, onAdLoaded: (NativeAd) -> Unit) {
  val adLoader =
    AdLoader.Builder(context, NATIVE_AD_UNIT_ID)
      .forNativeAd { nativeAd -> onAdLoaded(nativeAd) }
      .withAdListener(
        object : AdListener() {
          override fun onAdFailedToLoad(error: LoadAdError) {
            Log.e(TAG, "Native ad failed to load: ${error.message}")
          }
          override fun onAdLoaded() {
            Log.d(TAG, "Native ad was loaded.")
          }
          override fun onAdImpression() {
            Log.d(TAG, "Native ad recorded an impression.")
          }
          override fun onAdClicked() {
            Log.d(TAG, "Native ad was clicked.")
          }
        }
      )
      .build()
  adLoader.loadAd(AdRequest.Builder().build())
}
โปรดทราบว่าชิ้นงานทั้งหมดของโฆษณาเนทีฟที่ระบุควรแสดงภายในเลย์เอาต์ NativeAdView Google Mobile Ads SDK จะพยายามบันทึกคำเตือนเมื่อ
แสดงผลชิ้นงานเนทีฟนอกเลย์เอาต์การแสดงผลโฆษณาเนทีฟ
คลาสมุมมองโฆษณายังมีเมธอดที่ใช้ในการลงทะเบียนมุมมองที่ใช้สำหรับ
ชิ้นงานแต่ละรายการ และเมธอดที่ใช้ในการลงทะเบียนออบเจ็กต์ NativeAd เอง
การลงทะเบียนมุมมองด้วยวิธีนี้ช่วยให้ SDK จัดการงานต่างๆ โดยอัตโนมัติได้
เช่น
- การบันทึกการคลิก
- การบันทึกการแสดงผลเมื่อมองเห็นพิกเซลแรกบนหน้าจอ
- การแสดงการวางซ้อนตัวเลือกโฆษณาอื่นๆ
แสดงโฆษณาเนทีฟ
ตัวอย่างต่อไปนี้แสดงวิธีแสดงโฆษณาเนทีฟ
Java
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 process for the other assets in the NativeAd
  // using additional view objects (Buttons, ImageViews, etc).
  // If you use a MediaView, call theNativeAdView.setMediaView() method
  // before calling the NativeAdView.setNativeAd() method.
  MediaView mediaView = (MediaView) adView.findViewById(R.id.ad_media);
  adView.setMediaView(mediaView);
  // Register the native ad with its ad view.
  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);
}
Kotlin
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 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)
}
Jetpack Compose
@Composable
/** Display a native ad with a user defined template. */
fun DisplayNativeAdView(nativeAd: NativeAd) {
  val context = LocalContext.current
  Box(modifier = Modifier.padding(8.dp).wrapContentHeight(Alignment.Top)) {
    // Call the NativeAdView composable to display the native ad.
    NativeAdView(nativeAd) {
      // Inside the NativeAdView composable, display the native ad assets.
      Column(Modifier.align(Alignment.TopStart).wrapContentHeight(Alignment.Top)) {
        // Display the ad attribution.
        NativeAdAttribution(text = context.getString(R.string.attribution))
        Row {
          // If available, display the icon asset.
          nativeAd.icon?.let { icon ->
            NativeAdIconView(Modifier.padding(5.dp)) {
              icon.drawable?.toBitmap()?.let { bitmap ->
                Image(bitmap = bitmap.asImageBitmap(), "Icon")
              }
            }
          }
          Column {
            // If available, display the headline asset.
            nativeAd.headline?.let {
              NativeAdHeadlineView {
                Text(text = it, style = MaterialTheme.typography.headlineLarge)
              }
            }
            // If available, display the star rating asset.
            nativeAd.starRating?.let {
              NativeAdStarRatingView {
                Text(text = "Rated $it", style = MaterialTheme.typography.labelMedium)
              }
            }
          }
        }
        // If available, display the body asset.
        nativeAd.body?.let { NativeAdBodyView { Text(text = it) } }
        // Display the media asset.
        NativeAdMediaView(Modifier.fillMaxWidth().height(500.dp).fillMaxHeight())
        Row(Modifier.align(Alignment.End).padding(5.dp)) {
          // If available, display the price asset.
          nativeAd.price?.let {
            NativeAdPriceView(Modifier.padding(5.dp).align(Alignment.CenterVertically)) {
              Text(text = it)
            }
          }
          // If available, display the store asset.
          nativeAd.store?.let {
            NativeAdStoreView(Modifier.padding(5.dp).align(Alignment.CenterVertically)) {
              Text(text = it)
            }
          }
          // If available, display the call to action asset.
          // Note: The Jetpack Compose button implements a click handler which overrides the native
          // ad click handler, causing issues. Use the NativeAdButton which does not implement a
          // click handler. To handle native ad clicks, use the NativeAd AdListener onAdClicked
          // callback.
          nativeAd.callToAction?.let { callToAction ->
            NativeAdCallToActionView(Modifier.padding(5.dp)) { NativeAdButton(text = callToAction) }
          }
        }
      }
    }
  }
}
การวางซ้อน "ตัวเลือกโฆษณาอื่นๆ"
SDK จะเพิ่มการวางซ้อน "ตัวเลือกโฆษณาอื่นๆ" ลงในมุมมองโฆษณาแต่ละรายการ เว้นที่ว่างในมุมที่ต้องการของมุมมองโฆษณาเนทีฟสำหรับโลโก้ตัวเลือกโฆษณาอื่นๆ ที่แทรกโดยอัตโนมัติ นอกจากนี้ การวางซ้อน "ตัวเลือกโฆษณาอื่นๆ" ต้องสังเกตเห็นได้ง่าย ดังนั้นให้เลือกสีและภาพพื้นหลังอย่างเหมาะสม ดูข้อมูลเพิ่มเติมเกี่ยวกับลักษณะและ ฟังก์ชันของภาพซ้อนได้ที่คำอธิบายฟิลด์โฆษณาเนทีฟ
การระบุว่าเป็นโฆษณา
คุณต้องแสดงการระบุว่าเป็นโฆษณาเพื่อระบุว่าการดูนั้นเป็นโฆษณา ดูข้อมูลเพิ่มเติมในหลักเกณฑ์ด้านนโยบาย
จัดการการคลิก
อย่าใช้ตัวแฮนเดิลการคลิกที่กำหนดเองในมุมมองใดๆ เหนือหรือภายใน มุมมองโฆษณาเนทีฟ SDK จะจัดการการคลิกชิ้นงานมุมมองโฆษณาตราบใดที่คุณ ป้อนและลงทะเบียนมุมมองชิ้นงานอย่างถูกต้อง
หากต้องการฟังการคลิก ให้ใช้การเรียกกลับของการคลิกของ Google Mobile Ads SDK ดังนี้
Java
AdLoader adLoader = new AdLoader.Builder(context, "ca-app-pub-3940256099942544/2247696110")
    // ...
    .withAdListener(new AdListener() {
        @Override
        public void onAdFailedToLoad(LoadAdError adError) {
            // Handle the failure by logging.
        }
        @Override
        public void onAdClicked() {
            // Log the click event or other custom behavior.
        }
    })
    .build();
Kotlin
val adLoader = AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
    // ...
    .withAdListener(object : AdListener() {
        override fun onAdFailedToLoad(adError: LoadAdError) {
            // Handle the failure.
        }
        override fun onAdClicked() {
            // Log the click event or other custom behavior.
        }
    })
    .build()
ImageScaleType
คลาส MediaView มีพร็อพเพอร์ตี้ ImageScaleType เมื่อแสดงรูปภาพ
 หากต้องการเปลี่ยนวิธีปรับขนาดรูปภาพใน MediaView ให้ตั้งค่าImageView.ScaleTypeที่เกี่ยวข้องโดยใช้เมธอด setImageScaleType()
 ของ MediaView ดังนี้
Java
mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
Kotlin
mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
MediaContent
คลาส MediaContent มีข้อมูลที่เกี่ยวข้องกับเนื้อหาสื่อของ
โฆษณาเนทีฟ ซึ่งแสดงโดยใช้คลาส MediaView เมื่อตั้งค่าพร็อพเพอร์ตี้ MediaView mediaContent ด้วยอินสแตนซ์ MediaContent
- หากมีเนื้อหาวิดีโอ ระบบจะบัฟเฟอร์และเริ่มเล่นภายใน - MediaViewคุณจะทราบว่าเนื้อหาวิดีโอพร้อมใช้งานหรือไม่โดยดูที่- hasVideoContent()
- หากโฆษณาไม่มีชิ้นงานวิดีโอ ระบบจะดาวน์โหลด - mainImageและวางไว้ใน- MediaViewแทน
ทำลายโฆษณา
หลังจากแสดงโฆษณาเนทีฟแล้ว ให้ทำลายโฆษณา ตัวอย่างต่อไปนี้จะทำลายโฆษณาเนทีฟ
Java
nativeAd.destroy();
Kotlin
nativeAd.destroy()
ตัวอย่างใน GitHub
ตัวอย่างการติดตั้งใช้งานโฆษณาเนทีฟที่สมบูรณ์
ขั้นตอนถัดไป
ดูหัวข้อต่อไปนี้