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