原生範本

下載原生範本

使用原生廣告，您可以自訂廣告，提供更優質的使用者體驗。使用者體驗越好，參與度就越高，整體收益也能提升。

為了充分運用原生廣告，請務必為廣告版面配置設定樣式，讓廣告看起來像是應用程式的自然延伸。為協助您開始使用，我們已建立原生範本。

原生範本是原生廣告的完整程式碼檢視畫面，可快速導入並輕鬆修改。有了原生範本，您就能在短短幾分鐘內導入第一則原生廣告，並且不必撰寫大量程式碼，就能快速自訂外觀和風格。您可以將這些範本放置在任何位置，例如在新聞動態中使用的 recycler view、對話方塊，或應用程式中的其他位置。

我們的原生範本是以 Android Studio 模組的形式提供，因此您可以輕鬆將這些範本納入專案，並按照自己的喜好使用。

範本大小

範本分為小型和中型兩種。兩者都使用 TemplateView 類別，且都具有固定的顯示比例。並會調整填滿父項檢視畫面的寬度。

小型範本

@layout/gnt_small_template_view

小型範本非常適合回收筒檢視畫面，或您需要長方形廣告檢視畫面時使用。舉例來說，您可以將這項功能用於動態內廣告。

中型範本

@layout/gnt_medium_template_view

中型範本的設計目的是用於顯示一半到四分之三的網頁瀏覽量，但也可以用於動態饋給。這類圖片很適合用於到達網頁或首頁。

歡迎您嘗試使用不同的刊登位置。當然，您也可以視需求變更原始碼和 XML 檔案。

安裝原生廣告範本

如要安裝原生範本，只需下載 ZIP 檔案 (使用 GitHub 上的「Clone or download」選項)，然後將模組匯入現有的 Android Studio 專案即可。

  1. 依序選擇「File」>「New」>「Import Module」。

  2. 選取 nativetemplates 資料夾。

    匯入原生範本

  3. 在應用程式層級的 build.gradle 檔案中新增下列程式碼行：

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

使用原生廣告範本

您可以在任何版面配置 XML 檔案中使用此範本，就像使用其他檢視群組一樣。

將範本新增至版面配置

使用範本的程序分為兩個步驟：

  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());

樣式字典鍵

您可以透過兩種方式為範本設定樣式：使用傳統版面配置 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

第二行文字的背景顏色。
withTertiaryTextTypeface Typeface tertiaryTextTypeface

第三行文字的字體。
withTertiaryTextSize float tertiaryTextSize

第三行文字的大小。
withTertiaryTextTypefaceColor int tertiaryTextTypefaceColor

第三行文字的顏色。
withTertiaryTextBackgroundColor ColorDrawable tertiaryTextBackgroundColor

第三行文字的背景顏色。
withMainBackgroundColor ColorDrawable mainBackgroundColor

主要背景顏色。

提供圖像

我們製作了原生範本，協助您快速開發原生廣告。我們很樂意看到您為 GitHub 存放區做出貢獻，新增範本或功能。請傳送提取要求，我們會查看。