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

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

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

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

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

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

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

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

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

ขนาดเทมเพลต

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

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

@layout/gnt_small_template_view

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

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

@layout/gnt_medium_template_view

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

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

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

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

1. เลือกไฟล์ > ใหม่ > นำเข้าโมดูล

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

   

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

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

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

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

การใช้เทมเพลตมี 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 ทั้งหมด ที่ใช้ได้ Builder จะแสดงผลออบเจ็กต์ NativeTemplateStyle ซึ่งจะลบล้างการจัดรูปแบบเลย์เอาต์ XML เลย์เอาต์ XML gnt_small_template.xml และ gnt_medium_template.xml ใช้พารามิเตอร์การจัดรูปแบบ Android เดียวกันกับที่คุณคุ้นเคยอยู่แล้ว

วิธีการสร้างสำหรับสไตล์เทมเพลตโฆษณาเนทีฟ
withCallToActionTextTypeface	Typeface callToActionTextTypeface แบบอักษรสำหรับคำกระตุ้นให้ดำเนินการ
withCallToActionTextSize	float callToActionTextSize ขนาดของข้อความกระตุ้นให้ดำเนินการ
withCallToActionTypefaceColor	int callToActionTypefaceColor สีของข้อความกระตุ้นให้ดำเนินการ
withCallToActionBackgroundColor	ColorDrawable callToActionBackgroundColor สีพื้นหลังของคำกระตุ้นให้ดำเนินการ
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 มาให้เรา แล้วเราจะตรวจสอบ