原生範本

下載原生範本

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

為充分發揮原生廣告的效益，請務必為廣告版面配置設定樣式，使版面配置看起來像應用程式的自然延伸。為協助您快速上手，我們建立了原生範本。

原生範本是原生廣告的程式碼可完整檢視畫面，專為快速導入與輕鬆修改而設計。有了原生範本，只需要幾分鐘就能導入第一個原生廣告，而且不需要大量程式碼，就能快速自訂外觀和風格。您可以將這些範本放在任何位置，例如新聞動態饋給使用的回收器檢視畫面、對話方塊，或是應用程式的其他位置。

我們的原生範本是以 Android Studio 模組的形式提供，因此您可以輕鬆將範本加入專案，並隨心所欲使用。

範本大小

範本分為「小型」和「中」兩種，兩者都使用 TemplateView 類別，且兩者的顯示比例皆固定。這些元件會縮放至填滿父項檢視畫面的寬度。

小型範本

@layout/gnt_small_template_view

小型範本非常適合用於回收器檢視畫面，或需要使用長矩形廣告檢視畫面。舉例來說，您可以將這個參數用於動態內廣告。

中型範本

@layout/gnt_medium_template_view

中型範本旨在讓頁面檢視的頁面長度為四分至四分之三，但也可用於動態饋給。適用於到達網頁或啟動網頁。

您可以隨意嘗試刊登位置。當然，您也可以按照自身需求變更原始碼和 XML 檔案。

安裝原生廣告範本

如要安裝原生範本，只要下載 ZIP 檔案 (使用 GitHub 中的「Clone or 下載」選項) 並將模組匯入現有的 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, "/6499/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());

設定字典鍵的樣式

設定範本樣式的方式有兩種：使用傳統的版面配置 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 存放區所做的貢獻，以便新增範本或功能。請將提取要求傳送給我們，我們會來調查。