เทมเพลตเนทีฟ

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

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

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

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

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

ขนาดเทมเพลต

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

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

@layout/gnt_small_template_view

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

เทมเพลตสื่อ

@layout/gnt_medium_template_view

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

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

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

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

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

  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, "ca-app-pub-3940256099942544/2247696110")
    .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 AdRequest.Builder().build());

คีย์พจนานุกรมรูปแบบ

คุณสามารถจัดรูปแบบเทมเพลตได้ 2 วิธี ได้แก่ การใช้ XML การออกแบบแบบดั้งเดิม และ โดยใช้ออบเจ็กต์ NativeTemplateStyle.Builder ของเรา ตัวอย่างโค้ดข้างต้น สาธิตวิธีใช้ออบเจ็กต์ NativeTemplateStyle.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

แบบตัวพิมพ์ของข้อความแถวที่สอง
withSecondaryTextSize float secondaryTextSize

ขนาดของข้อความแถวที่สอง
withSecondaryTextTypefaceColor int secondaryTextTypefaceColor

สีข้อความของแถวที่สองของข้อความ
withSecondaryTextBackgroundColor ColorDrawable secondaryTextBackgroundColor

สีพื้นหลังของข้อความแถวที่ 2
withTertiaryTextTypeface Typeface tertiaryTextTypeface

แบบตัวพิมพ์ของข้อความแถวที่ 3
withTertiaryTextSize float tertiaryTextSize

ขนาดของข้อความแถวที่สาม
withTertiaryTextTypefaceColor int tertiaryTextTypefaceColor

สีข้อความของแถวที่ 3 ของข้อความ
withTertiaryTextBackgroundColor ColorDrawable tertiaryTextBackgroundColor

สีพื้นหลังของข้อความแถวที่ 3
withMainBackgroundColor ColorDrawable mainBackgroundColor

สีพื้นหลังหลัก

มีส่วนร่วม

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