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

เนทีฟขั้นสูง

แสดง NativeAd

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

ชั้นเรียน `NativeAdView`

สําหรับรูปแบบ NativeAd จะมีคลาส NativeAdView ที่เกี่ยวข้อง คลาสนี้เป็น ViewGroup ที่ควรใช้เป็นรูทสําหรับ NativeAd NativeAdView รายการเดียวจะสอดคล้องกับโฆษณาเนทีฟรายการเดียว แต่ละมุมมองที่ใช้แสดงชิ้นงานของโฆษณานั้น (ImageView ที่แสดงชิ้นงานภาพหน้าจอ เป็นต้น) ควรเป็นรายการย่อยของออบเจ็กต์ NativeAdView

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

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

ต่อไปนี้เป็นตัวอย่างการสร้าง NativeAdView และป้อนข้อมูล NativeAd

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.
            populateNativeAdView(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.
        populateNativeAdView(nativeAd, adView)
        frameLayout.removeAllViews()
        frameLayout.addView(adView)
    }

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

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

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

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

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

การระบุแหล่งที่มาของโฆษณา

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

ตัวอย่างโค้ด

ขั้นตอนในการแสดงโฆษณาเนทีฟมีดังนี้

สร้างอินสแตนซ์ของคลาส NativeAdView
ชิ้นงานโฆษณาแต่ละรายการที่จะแสดงต้องมีคุณสมบัติดังต่อไปนี้
1. ป้อนข้อมูลชิ้นงานในมุมมองชิ้นงานด้วยชิ้นงานในแอบเจ็กต์โฆษณา
2. ลงทะเบียนมุมมองเนื้อหากับคลาส NativeAdView
ลงทะเบียน MediaView หากเลย์เอาต์โฆษณาเนทีฟมีชิ้นงานสื่อขนาดใหญ่
ลงทะเบียนออบเจ็กต์โฆษณากับคลาส NativeAdView

ตัวอย่างฟังก์ชันที่แสดง NativeAd

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 the app is using a MediaView, it should be
  // instantiated and passed to setMediaView. This view is a little different
  // in that the asset is populated automatically, so there's one less step.
  MediaView mediaView = (MediaView) adView.findViewById(R.id.ad_media);
  adView.setMediaView(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);
}

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

แต่ละงานมีดังนี้

ขยายเลย์เอาต์
Java
```
LayoutInflater inflater = (LayoutInflater) parent.getContext()
        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
NativeAdView adView = (NativeAdView) inflater
        .inflate(R.layout.ad_layout_file, parent);
```
Kotlin
```
val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
        as LayoutInflater
val adView = inflater.inflate(R.layout.ad_layout_file, parent) as NativeAdView
```
โค้ดนี้จะขยายเลย์เอาต์ XML ที่มีมุมมองสําหรับแสดงโฆษณาเนทีฟ จากนั้นค้นหาการอ้างอิง NativeAdView โปรดทราบว่าคุณยังใช้ NativeAdView ที่มีอยู่ซ้ำได้หากมีในฟragment หรือกิจกรรม หรือแม้แต่สร้างอินสแตนซ์แบบไดนามิกโดยไม่ใช้ไฟล์เลย์เอาต์
ป้อนข้อมูลและลงทะเบียนมุมมองเนื้อหา

โค้ดตัวอย่างนี้จะค้นหามุมมองที่ใช้แสดงบรรทัดแรก ตั้งค่าข้อความโดยใช้ชิ้นงานสตริงที่ออบเจ็กต์โฆษณาระบุ และลงทะเบียนกับออบเจ็กต์ NativeAdView
Java
```
TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline);
headlineView.setText(ad.getHeadline());
adView.setHeadlineView(headlineView);
```
Kotlin
```
val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
headlineView.text = ad.headline
adView.headlineView = headlineView
```
กระบวนการค้นหามุมมอง ตั้งค่า และลงทะเบียนกับคลาสมุมมองโฆษณานี้ควรทำซ้ำสำหรับชิ้นงานแต่ละรายการที่ได้จากออบเจ็กต์โฆษณาเนทีฟที่แอปจะแสดง

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

อย่าใช้ตัวแฮนเดิลการคลิกที่กําหนดเองในมุมมองใดๆ เหนือหรือภายในมุมมองโฆษณาเนทีฟ 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()

ลงทะเบียน MediaView

คุณต้องใช้ชิ้นงาน MediaView แทนชิ้นงาน ImageView หากต้องการรวมชิ้นงานรูปภาพหลักไว้ในเลย์เอาต์ของโฆษณาเนทีฟ

MediaView คือ View พิเศษที่ออกแบบมาเพื่อแสดงชิ้นงานสื่อหลัก ไม่ว่าจะเป็นวิดีโอหรือรูปภาพ

MediaView สามารถกําหนดได้ในเลย์เอาต์ XML หรือสร้างแบบไดนามิก โดยควรวางไว้ในลําดับชั้นมุมมองของ NativeAdView เช่นเดียวกับมุมมองชิ้นงานอื่นๆ แอปที่ใช้ MediaView ต้องลงทะเบียน MediaView กับ ดังนี้ NativeAdView
Java
```
 // Populate and register the media asset view.
 nativeAdView.setMediaView(nativeAdBinding.adMedia);
```
Kotlin
```
 // Populate and register the media asset view.
 nativeAdView.mediaView = nativeAdBinding.adMedia
```
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 แทน
โดยค่าเริ่มต้น mainImage คือชิ้นงานรูปภาพที่ดาวน์โหลดรายการแรก หากใช้ setReturnUrlsForImageAssets(true) mainImage คือ null และคุณต้องตั้งค่าพร็อพเพอร์ตี้ mainImage เป็นรูปภาพที่ดาวน์โหลดด้วยตนเอง โปรดทราบว่าระบบจะใช้รูปภาพนี้เฉพาะในกรณีที่ไม่มีชิ้นงานวิดีโอเท่านั้น
ลงทะเบียนออบเจ็กต์โฆษณาเนทีฟ

ขั้นตอนสุดท้ายนี้จะลงทะเบียนออบเจ็กต์โฆษณาเนทีฟกับมุมมองที่รับผิดชอบในการแสดงโฆษณา
Java
```
adView.setNativeAd(ad);
```
Kotlin
```
adView.setNativeAd(ad)
```

ทำลายโฆษณา

เมื่อแสดงโฆษณาเนทีฟเสร็จแล้ว คุณควรทำลายโฆษณาเพื่อให้ระบบรวบรวมขยะอย่างเหมาะสม

Java

nativeAd.destroy();

Kotlin

nativeAd.destroy()

ตัวอย่างใน GitHub

ตัวอย่างการติดตั้งใช้งานโฆษณาเนทีฟที่สมบูรณ์

Java Kotlin

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

สำรวจหัวข้อต่อไปนี้

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

การเพิ่มประสิทธิภาพการเริ่มต้น SDK และโหลดโฆษณา (เบต้า)

เนทีฟขั้นสูง

แสดง NativeAd

ชั้นเรียน NativeAdView

Java

Kotlin

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

การระบุแหล่งที่มาของโฆษณา

ตัวอย่างโค้ด

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

ImageScaleType

Java

Kotlin

MediaContent

Java

Kotlin

ทำลายโฆษณา

Java

Kotlin

ตัวอย่างใน GitHub

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

ชั้นเรียน `NativeAdView`