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

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

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

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

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

สำหรับรูปแบบ NativeAd จะมีข้อมูล NativeAdView ชั้นเรียนนี้เป็น ViewGroup ที่ผู้เผยแพร่โฆษณาควรใช้เป็นรูทสำหรับ NativeAd ต NativeAdView เดี่ยวสอดคล้องกับโฆษณาเนทีฟ 1 รายการ แต่ละข้อมูลพร็อพเพอร์ตี้ที่ใช้เพื่อแสดงเนื้อหาของโฆษณานั้น (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>


         // Other assets such as image or media view, call to action, etc follow.
         ...
    </LinearLayout>
</com.google.android.gms.ads.nativead.NativeAdView>

นี่คือตัวอย่างที่สร้าง NativeAdView และ จะเติมด้วย NativeAd:

Java

AdLoader.Builder builder = new AdLoader.Builder(this, "AD_UNIT_ID")
    .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 text, images and the native ad, etc into the ad
            // view.
            populateNativeAdView(nativeAd, adView);
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        }
});

Kotlin

val builder = AdLoader.Builder(this, "AD_UNIT_ID")
    .forNativeAd { nativeAd ->
        // 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 text, images and the native ad, etc into the ad
        // view.
        populateNativeAdView(nativeAd, adView)
        // Assumes you have a placeholder FrameLayout in your View layout
        // (with id ad_frame) where the ad is to be placed.
        ad_frame.removeAllViews()
        ad_frame.addView(adView)
    }

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

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

การบันทึกการคลิก
การแสดงผลการบันทึกเมื่อพิกเซลแรกปรากฏบนหน้าจอ
การแสดงการวางซ้อนตัวเลือกโฆษณาอื่นๆ สำหรับโฆษณาเนทีฟทดแทน ครีเอทีฟโฆษณา—ปัจจุบันจำกัดไว้เฉพาะผู้เผยแพร่โฆษณาบางกลุ่ม

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

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

การระบุว่าเป็นโฆษณาสำหรับโฆษณาเนทีฟแบบเป็นโปรแกรม

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

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

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

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

ต่อไปนี้เป็นฟังก์ชันตัวอย่างที่แสดง 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 above 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 above 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 ที่มีอยู่มาใช้ซ้ำหากมีอยู่ในส่วนย่อยหรือกิจกรรม หรือ คุณจะสร้างอินสแตนซ์แบบไดนามิกโดยไม่ต้องใช้ไฟล์เลย์เอาต์ได้ด้วย
ป้อนข้อมูลและบันทึกมุมมองเนื้อหา

โค้ดตัวอย่างนี้จะค้นหามุมมองที่ใช้เพื่อแสดงบรรทัดแรก และตั้งข้อความ โดยใช้เนื้อหาสตริงที่ได้จากออบเจ็กต์โฆษณา และลงทะเบียนกับ ออบเจ็กต์ 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
```
กระบวนการค้นหาข้อมูลพร็อพเพอร์ตี้ การตั้งค่า และลงทะเบียนข้อมูลพร็อพเพอร์ตี้กับ คุณควรใช้คลาสการดูโฆษณาซ้ำ สำหรับชิ้นงานแต่ละรายการ ที่แอปจะแสดง
จัดการการคลิก

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

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

นี่คือตัวอย่างที่ใช้โฆษณา Listener เพื่อสังเกตการณ์ กิจกรรมการคลิก
Java
```
AdLoader adLoader = new AdLoader.Builder(context, "/6499/example/native")
    ...
    .withAdListener(new AdListener() {
        @Override
        public void onAdFailedToLoad(LoadAdError adError) {
            // Handle the failure by logging, altering the UI, and so on.
        }
        @Override
        public void onAdClicked() {
            // Log the click event or other custom behavior.
        }
    })
    .build();
```
Kotlin
```
val adLoader = AdLoader.Builder(this, "/6499/example/native")
    ...
    .withAdListener(object : AdListener() {
        override fun onAdFailedToLoad(adError: LoadAdError) {
            // Handle the failure by logging, altering the UI, and so on.
        }
    })
    .build()
```
ลงทะเบียน MediaView

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

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

MediaView สามารถกำหนดในเลย์เอาต์ XML หรือสร้างขึ้นแบบไดนามิกได้ ทั้งนี้ ควรอยู่ภายในลำดับชั้นการแสดงผลของ NativeAdView เช่นเดียวกับ มุมมองเนื้อหาอื่นๆ แอปที่ใช้ MediaView ต้องลงทะเบียนกับ NativeAdView:
Java
```
MediaView mediaView = adView.findViewById(R.id.ad_media);
adView.setMediaView(mediaView);
```
Kotlin
```
adView.mediaView = adView.findViewById<MediaView>(R.id.ad_media)
```
เช่นเดียวกับการดูเนื้อหาทั้งหมด มุมมองสื่อจำเป็นต้องมีเนื้อหาอยู่ ซึ่งทำได้โดยใช้ getMediaContent() เพื่อเรียกเนื้อหาสื่อที่สามารถส่งต่อไปยัง MediaView ต่อไปนี้เป็นข้อมูลโค้ดที่ตั้งค่าเนื้อหาสื่อสำหรับสื่อ มุมมอง:
Java
```
mediaView.setMediaContent(nativeAd.getMediaContent());
```
Kotlin
```
mediaView.mediaContent = nativeAd.mediaContent
```
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 นี้

/6499/example/native

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

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

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

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

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

/6499/example/native-backfill

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

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

ตัวอย่างใน GitHub

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

Java Kotlin

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

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

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

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

NativeAdView ชั้นเรียน

Java

Kotlin

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

การระบุว่าเป็นโฆษณาสำหรับโฆษณาเนทีฟแบบเป็นโปรแกรม

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

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

ImageScaleType

Java

Kotlin

MediaContent

Java

Kotlin

ทำลายโฆษณา

Java

Kotlin

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

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

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

ตัวอย่างใน GitHub

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

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