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

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

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

NativeAdView class

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

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

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

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

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

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

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

  1. ขยายเลย์เอาต์

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

  2. ป้อนข้อมูลและบันทึกมุมมองเนื้อหา

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

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

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

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

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

    ต่อไปนี้คือตัวอย่างที่ใช้ ad listener เพื่อสังเกตการณ์เหตุการณ์การคลิก

    Java

    AdLoader adLoader = new AdLoader.Builder(context, "/21775744923/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, "/21775744923/example/native")
        ...
        .withAdListener(object : AdListener() {
            override fun onAdFailedToLoad(adError: LoadAdError) {
                // Handle the failure by logging, altering the UI, and so on.
            }
        })
        .build()
    
  4. ลงทะเบียน 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 เป็นรูปภาพที่คุณดาวน์โหลดด้วยตนเอง โปรดทราบว่า จะใช้ได้ก็ต่อเมื่อไม่มีชิ้นงานวิดีโอพร้อมใช้งาน

  5. ลงทะเบียนออบเจ็กต์โฆษณาเนทีฟ

    ขั้นตอนสุดท้ายนี้จะบันทึกออบเจ็กต์โฆษณาเนทีฟด้วยมุมมองที่ ทำหน้าที่แสดงอย่างไร

    Java

    adView.setNativeAd(ad);
    

    Kotlin

    adView.setNativeAd(ad)
    

ทำลายโฆษณา

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

Java

nativeAd.destroy();

Kotlin

nativeAd.destroy()

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

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

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

/21775744923/example/native

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

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

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

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

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

/21775744923/example/native-backfill

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

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

ตัวอย่างใน GitHub

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

Java Kotlin

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

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