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

แสดง 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>


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

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

AdLoader.Builder builder = new AdLoader.Builder(this, "<your 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);
        }
});

val builder = AdLoader.Builder(this, "<your 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)
    }

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

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

โอเวอร์เลย์ตัวเลือกโฆษณา

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

การแสดงที่มาของโฆษณา

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

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

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

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

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

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.my_ad_layout, 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);
}

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.my_ad_layout, 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)
}

มาดูงานแต่ละอย่างกัน:

ขยายเค้าโครง

LayoutInflater inflater = (LayoutInflater) parent.getContext()
        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
NativeAdView adView = (NativeAdView) inflater
        .inflate(R.layout.my_ad_layout, parent);

val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
        as LayoutInflater
val adView = inflater.inflate(R.layout.my_ad_layout, parent) as NativeAdView

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

เติมและลงทะเบียนมุมมองสินทรัพย์

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

TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline);
headlineView.setText(ad.getHeadline());
adView.setHeadlineView(headlineView);

val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
headlineView.text = ad.headline
adView.headlineView = headlineView

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

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

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

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

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, altering the UI, and so on.
        }
        @Override
        public void onAdClicked() {
            // Log the click event or other custom behavior.
        }
    })
    .build();

val adLoader = AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
    ...
    .withAdListener(object : AdListener() {
        override fun onAdFailedToLoad(adError: LoadAdError) {
            // Handle the failure by logging, altering the UI, and so on.
        }
    })
    .build()

ลงทะเบียน MediaView

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

MediaView สามารถกำหนดในรูปแบบ XML หรือสร้างแบบไดนามิก ควรวางไว้ภายในลำดับชั้นการดูของ NativeAdView เช่นเดียวกับมุมมองเนื้อหาอื่นๆ แอปที่ใช้ MediaView จะต้องลงทะเบียนกับ NativeAdView ดังนี้:

MediaView mediaView = adView.findViewById(R.id.ad_media);
adView.setMediaView(mediaView);

adView.mediaView = adView.findViewById<MediaView>(R.id.ad_media)

เช่นเดียวกับการดูเนื้อหาทั้งหมด มุมมองสื่อจำเป็นต้องมีการเติมเนื้อหา ทำได้โดยใช้ getMediaContent() เพื่อดึง เนื้อหาสื่อ ที่สามารถส่งผ่านไปยัง MediaView นี่คือข้อมูลโค้ดการตั้งค่าเนื้อหาสื่อสำหรับมุมมองสื่อ:

mediaView.setMediaContent(nativeAd.getMediaContent());

mediaView.mediaContent = nativeAd.mediaContent

การตั้งค่า ImageScaleType

คลาส MediaView มีคุณสมบัติ ImageScaleType เมื่อแสดงรูปภาพ หากคุณต้องการเปลี่ยนวิธีการปรับขนาดรูปภาพใน MediaView ให้ตั้งค่า ImageView.ScaleType ที่สอดคล้องกันโดยใช้เมธอด setImageScaleType() ของ MediaView

ตัวอย่างเช่น ในการเติม MediaView เมื่อมีการแสดงภาพ (โฆษณาไม่มีวิดีโอ):

mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);

mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP

ตัวอย่าง GitHub

ที่เก็บ GitHub ของเรามีการใช้งานที่สมบูรณ์สำหรับโฆษณาขั้นสูงแบบเนทีฟ ที่เขียนในภาษา Java และ Kotlin

MediaContent

คลาส MediaContent เก็บข้อมูลที่เกี่ยวข้องกับเนื้อหาสื่อของโฆษณาเนทีฟ ซึ่งแสดงโดยใช้คลาส MediaView เมื่อตั้งค่าคุณสมบัติ MediaView mediaContent ด้วยอินสแตนซ์ MediaContent :

• หากมีเนื้อหาวิดีโอ เนื้อหานั้นจะถูกบัฟเฟอร์และเริ่มเล่นภายใน MediaView คุณสามารถบอกได้ว่าเนื้อหาวิดีโอพร้อมใช้งานหรือไม่โดยการตรวจสอบ hasVideoContent()
• หากโฆษณาไม่มีเนื้อหาวิดีโอ เนื้อหา mainImage จะถูกดาวน์โหลดและวางไว้ใน MediaView แทน

ลงทะเบียนวัตถุโฆษณาเนทีฟ

ขั้นตอนสุดท้ายนี้ลงทะเบียนออบเจ็กต์โฆษณาเนทีฟด้วยมุมมองที่รับผิดชอบในการแสดง:

adView.setNativeAd(ad);

adView.setNativeAd(ad)

ทำลายโฆษณา

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

nativeAd.destroy();

nativeAd.destroy()