จัดสไตล์เลย์เอาต์โฆษณาด้วยเทมเพลตโฆษณาเนทีฟ

เลือกแพลตฟอร์ม: iOS Flutter Android (เดิม)

ดาวน์โหลดเทมเพลตเนทีฟ

ประเด็นสำคัญ: ก่อนดำเนินการต่อ โปรดดูวิธีโหลดโฆษณาเนทีฟ

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

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

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

หมายเหตุ: หากสนใจออกแบบเลย์เอาต์เนทีฟของคุณเองตั้งแต่ต้น ให้กลับไปที่เอกสารประกอบเนทีฟขั้นสูงแทน

เทมเพลตเนทีฟของเรามีให้ใช้งานเป็นโมดูล Android Studio คุณจึงรวมเทมเพลตเหล่านี้ไว้ในโปรเจ็กต์และใช้งานได้ตามต้องการอย่างง่ายดาย

ขนาดเทมเพลต

เทมเพลตมี 2 แบบ ได้แก่ ขนาดเล็กและขนาดกลาง ทั้ง 2 รายการใช้คลาส TemplateView และมีสัดส่วนภาพคงที่ โดยจะปรับขนาดให้เต็มความกว้างของมุมมองหลัก

เทมเพลตขนาดเล็ก

@layout/gnt_small_template_view

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

เทมเพลตขนาดกลาง

@layout/gnt_medium_template_view

เทมเพลตขนาดกลางมีไว้สำหรับการแสดงผลแบบครึ่งหน้าถึง 3 ใน 4 ของหน้า แต่ก็ใช้ในฟีดได้เช่นกัน ซึ่งเหมาะสำหรับหน้า Landing Page หรือหน้าสแปลช

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

การติดตั้งเทมเพลตโฆษณาเนทีฟ

หากต้องการติดตั้งเทมเพลตเนทีฟ เพียงดาวน์โหลดไฟล์ ZIP (โดยใช้ตัวเลือกโคลนหรือดาวน์โหลดใน GitHub) แล้วนำเข้าโมดูลไปยังโปรเจ็กต์ Android Studio ที่มีอยู่

1. เลือก File > New > Import Module

2. เลือกโฟลเดอร์ nativetemplates

   

3. เพิ่มบรรทัดต่อไปนี้ลงในไฟล์ build.gradle ระดับแอป

   dependencies {
           ...
           implementation project(':nativetemplates')
           ...
   }
   

การใช้เทมเพลตโฆษณาเนทีฟ

คุณสามารถใช้เทมเพลตในไฟล์ XML ของเลย์เอาต์ได้เหมือนกับกลุ่มมุมมองอื่นๆ

การใช้เทมเพลตมี 2 ขั้นตอนดังนี้

1. ก่อนอื่น คุณต้องรวมเทมเพลตเป็นส่วนหนึ่งของเลย์เอาต์

   <LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:context=".MainActivity"
      tools:showIn="@layout/activity_main" >
   
   <!--  This is your template view -->
   <com.google.android.ads.nativetemplates.TemplateView
      android:id="@+id/my_template"
      <!-- this attribute determines which template is used. The other option is
       @layout/gnt_medium_template_view -->
      app:gnt_template_type="@layout/gnt_small_template_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
   
   ...
   </LinearLayout>
   

2. ถัดไป คุณต้องส่งโฆษณาเนทีฟให้เทมเพลตเมื่อโฆษณาโหลด โดยทำดังนี้

   MobileAds.initialize(this);
   AdLoader adLoader = new AdLoader.Builder(this, "/21775744923/example/native")
       .forNativeAd(new NativeAd.OnNativeAdLoadedListener() {
           @Override
           public void onNativeAdLoaded(NativeAd nativeAd) {
               NativeTemplateStyle styles = new
                 NativeTemplateStyle.Builder().withMainBackgroundColor(background).build();
               TemplateView template = findViewById(R.id.my_template);
               template.setStyles(styles);
               template.setNativeAd(nativeAd);
           }
        })
        .build();
   
   adLoader.loadAd(new AdManagerAdRequest.Builder().build());
   

คีย์พจนานุกรมของสไตล์

คุณจัดสไตล์เทมเพลตได้ 2 วิธี ได้แก่ การใช้ XML เลย์เอาต์แบบดั้งเดิมและการใช้ออบเจ็กต์ NativeTemplateStyle.Builder ตัวอย่างโค้ดด้านบนแสดงวิธีใช้ออบเจ็กต์ NativeTemplateStyle.Builder เพื่อตั้งค่าสีพื้นหลังหลัก แต่ก็ยังมีตัวเลือกอื่นๆ อีกมากมาย ต่อไปนี้คือเมธอดของ Builder ทั้งหมดที่ใช้ได้ เครื่องมือสร้างจะแสดงผลออบเจ็กต์ NativeTemplateStyle ซึ่งจะลบล้างการจัดรูปแบบเลย์เอาต์ XML เลย์เอาต์ XML gnt_small_template.xml และ gnt_medium_template.xml ใช้พารามิเตอร์การจัดรูปแบบ Android เดียวกันกับที่คุณคุ้นเคยอยู่แล้ว

เมธอด Builder สำหรับสไตล์เทมเพลตโฆษณาเนทีฟ
withCallToActionTextTypeface	Typeface callToActionTextTypeface แบบตัวพิมพ์สำหรับคำกระตุ้นให้ดำเนินการ (Call-To-Action)
withCallToActionTextSize	float callToActionTextSize ขนาดของข้อความกระตุ้นให้ดำเนินการ
withCallToActionTypefaceColor	int callToActionTypefaceColor สีของข้อความกระตุ้นให้ดำเนินการ
withCallToActionBackgroundColor	ColorDrawable callToActionBackgroundColor สีพื้นหลังของคำกระตุ้นให้ดำเนินการ (Call-To-Action)
withPrimaryTextTypeface	Typeface primaryTextTypeface แบบตัวพิมพ์ของข้อความแถวแรก
withPrimaryTextSize	float primaryTextSize ขนาดของข้อความบรรทัดแรก
withPrimaryTextTypefaceColor	int primaryTextTypefaceColor สีของข้อความแถวแรก
withPrimaryTextBackgroundColor	ColorDrawable primaryTextBackgroundColor สีพื้นหลังของข้อความแถวแรก
withSecondaryTextTypeface	Typeface secondaryTextTypeface แบบตัวพิมพ์ของข้อความแถวที่ 2
withSecondaryTextSize	float secondaryTextSize ขนาดของข้อความแถวที่ 2
withSecondaryTextTypefaceColor	int secondaryTextTypefaceColor สีข้อความของข้อความแถวที่ 2
withSecondaryTextBackgroundColor	ColorDrawable secondaryTextBackgroundColor สีพื้นหลังของข้อความแถวที่ 2
withTertiaryTextTypeface	Typeface tertiaryTextTypeface แบบตัวพิมพ์ของข้อความแถวที่ 3
withTertiaryTextSize	float tertiaryTextSize ขนาดของข้อความแถวที่ 3
withTertiaryTextTypefaceColor	int tertiaryTextTypefaceColor สีข้อความของข้อความแถวที่ 3
withTertiaryTextBackgroundColor	ColorDrawable tertiaryTextBackgroundColor สีพื้นหลังของข้อความแถวที่ 3
withMainBackgroundColor	ColorDrawable mainBackgroundColor สีพื้นหลังหลัก

มีส่วนร่วม

เราได้สร้างเทมเพลตเนทีฟเพื่อช่วยให้คุณพัฒนาโฆษณาเนทีฟได้อย่างรวดเร็ว เราอยากเห็นคุณมีส่วนร่วมในที่เก็บ GitHub ของเราเพื่อเพิ่มเทมเพลตหรือฟีเจอร์ใหม่ๆ ส่ง Pull Request มาให้เรา แล้วเราจะตรวจสอบให้