หน้านี้ได้รับการแปลโดย 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, "/21775744923/example/native")
    .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, "/21775744923/example/native")
    .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 จัดการงานต่างๆ โดยอัตโนมัติได้ เช่น

การบันทึกการคลิก
การบันทึกการแสดงผลเมื่อมองเห็นพิกเซลแรกบนหน้าจอ
การแสดงการวางซ้อน AdChoices สำหรับครีเอทีฟโฆษณาโฆษณาที่แสดงในหน้าเว็บที่ระบบสร้างขึ้นเพื่อทดแทน ปัจจุบันมีให้บริการแก่ผู้เผยแพร่โฆษณาบางกลุ่มเท่านั้น

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

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

การระบุแหล่งที่มาของโฆษณาสําหรับโฆษณาเนทีฟแบบเป็นโปรแกรม

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

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

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

สร้างอินสแตนซ์ของคลาส 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, "/21775744923/example/native")
    // ...
    .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, "/21775744923/example/native")
    // ...
    .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()

ทดสอบโค้ดโฆษณาเนทีฟ

โฆษณาแบบขายตรง

หากต้องการทดสอบว่าโฆษณาเนทีฟที่ขายโดยตรงเป็นอย่างไร คุณสามารถใช้รหัสหน่วยโฆษณา Ad Manager นี้

/21775744923/example/native

มีการกําหนดค่าให้แสดงตัวอย่างโฆษณาเพื่อการติดตั้งแอปและโฆษณาแบบคอนเทนต์ รวมถึงรูปแบบโฆษณาเนทีฟที่กําหนดเองด้วยชิ้นงานต่อไปนี้

บรรทัดแรก (ข้อความ)
MainImage (รูปภาพ)
คำบรรยาย (ข้อความ)

รหัสเทมเพลตสำหรับรูปแบบโฆษณาเนทีฟที่กำหนดเองคือ 10063170

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

การทดแทน Ad Exchange มีไว้สำหรับผู้เผยแพร่โฆษณาบางกลุ่มเท่านั้น หากต้องการทดสอบลักษณะการทํางานของโฆษณาเนทีฟทดแทน ให้ใช้หน่วยโฆษณา Ad Manager นี้

/21775744923/example/native-backfill

โดยจะแสดงตัวอย่างโฆษณาเพื่อการติดตั้งแอปและโฆษณาแบบคอนเทนต์ที่มีการวางซ้อนตัวเลือกโฆษณาอื่นๆ

อย่าลืมอัปเดตโค้ดให้อ้างอิงหน่วยโฆษณาและรหัสเทมเพลตจริงก่อนเผยแพร่

ตัวอย่างใน 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`