แสดงโฆษณาเนทีฟ
เมื่อโฆษณาเนทีฟโหลด SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google จะเรียกใช้ Listener สําหรับรูปแบบโฆษณาที่เกี่ยวข้อง จากนั้นแอปของคุณจะรับผิดชอบในการแสดงโฆษณา แต่ไม่จำเป็นว่าจะต้องทำเช่นนั้นทันที เพื่อทำให้การแสดง รูปแบบโฆษณาที่ระบบกำหนดได้ง่ายขึ้น SDK นำเสนอแหล่งข้อมูลที่มีประโยชน์ เช่น ดังที่อธิบายไว้ด้านล่าง
NativeAdView
class
สำหรับรูปแบบ 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
- สำหรับชิ้นงานโฆษณาแต่ละรายการที่จะแสดง ให้ทำดังนี้
- ป้อนข้อมูลในมุมมองชิ้นงานด้วยชิ้นงานในออบเจ็กต์โฆษณา
- ลงทะเบียนมุมมองเนื้อหากับคลาส
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 จะจัดการการคลิกที่เนื้อหาการดูโฆษณาตราบใดที่คุณดำเนินการอย่างถูกต้อง ป้อนข้อมูลและลงทะเบียนการดูเนื้อหา ตามที่ได้กล่าวไปในส่วนก่อนหน้า
ต่อไปนี้คือตัวอย่างที่ใช้ 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()
ลงทะเบียน 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 นี้
/21775744923/example/native
มีการกำหนดค่าให้แสดงตัวอย่างโฆษณาเพื่อการติดตั้งแอปและโฆษณาแบบคอนเทนต์ รวมถึง รูปแบบโฆษณาเนทีฟที่กำหนดเองโดยมีเนื้อหาต่อไปนี้
- บรรทัดแรก (text)
- รูปภาพหลัก (รูปภาพ)
- คำบรรยายภาพ (ข้อความ)
รหัสเทมเพลตสำหรับรูปแบบโฆษณาเนทีฟที่กำหนดเองคือ 10063170
โฆษณาทดแทนเนทีฟ
ปัจจุบันโฆษณาทดแทนของ Ad Exchange จำกัดไว้สำหรับผู้เผยแพร่โฆษณาบางกลุ่มเท่านั้น ถึง ทดสอบลักษณะการทำงานของโฆษณาทดแทนเนทีฟ ใช้หน่วยโฆษณา Ad Manager นี้
/21775744923/example/native-backfill
แสดงตัวอย่างโฆษณาเพื่อการติดตั้งแอปและโฆษณาแบบคอนเทนต์ที่มีตัวเลือกโฆษณาอื่นๆ ซ้อนทับ
อย่าลืมอัปเดตโค้ดให้อ้างอิงหน่วยโฆษณาและรหัสเทมเพลตจริงก่อนเผยแพร่
ตัวอย่างใน GitHub
ตัวอย่างการติดตั้งใช้งานโฆษณาเนทีฟที่สมบูรณ์
ขั้นตอนถัดไป
สำรวจหัวข้อต่อไปนี้