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

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

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

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

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

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

ขนาดเทมเพลต

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

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

@layout/gnt_small_template_view

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

เทมเพลตสื่อกลาง

@layout/gnt_medium_template_view

เทมเพลตขนาดกลางมีไว้สำหรับการดูหน้าเว็บครึ่งหนึ่งถึง 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

แบบอักษรของข้อความบรรทัดที่ 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 ของเราเพื่อเพิ่มเทมเพลตหรือฟีเจอร์ใหม่ๆ ส่งคำขอดึงข้อมูลให้เรา แล้วเราจะตรวจสอบ