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

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

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

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

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

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

ลองดูตัวอย่างที่ใช้เครื่องมือฟังโฆษณาเพื่อดูเหตุการณ์การคลิก
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();
        .inflate(R.layout.ad_layout_file, parent);

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` ชั้นเรียน