原生範本

下載原生範本

重點： 繼續操作之前，請先瞭解如何載入原生廣告。

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

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

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

注意： 如果您想從頭開始自行設計原生版面配置，請改為返回「原生進階」說明文件。

本指南說明如何在 iOS 應用程式中下載、納入及使用原生範本。本文假設您已經成功使用 SDK 載入原生廣告。

範本大小

範本大小分為「小型」和「中」兩種。每個範本都以一個類別表示。這些類別為 GADTSmallTemplateView 和 GADTMediumTemplateView。這兩個類別都擴充 GADTTemplateView。兩個範本都有固定的顯示比例，只有在您呼叫 addHorizontalConstraintsToSuperviewWidth 時才會調整為填滿父項檢視畫面的寬度。如果未呼叫 addHorizontalConstraintsToSuperviewWidth，每個範本都會轉譯其預設大小。

GADTSmallTemplateView

這個小型範本最適合用於 UICollectionView 或 UITableView 個儲存格。舉例來說，您可以將它用於動態內廣告，或在任何需要細長矩形廣告檢視畫面的任何位置使用。此範本的預設大小為高 91 點，寬度為 355 點。

GADTMediumTemplateView

中型範本旨在呈現 1/2 至 3/4 的頁面畫面。這適用於到達網頁或啟動網頁，但也可包含在 UITableViews 中。此範本的預設大小為 370 點高、寬度為 355 點。

我們所有的範本都支援自動版面配置，因此歡迎嘗試刊登位置。當然，您也可以按照需求變更原始碼和 xib 檔案。

安裝原生廣告範本

如要安裝原生範本，只要下載 ZIP 檔案，然後拖曳至 Xcode 專案即可。請務必勾選「視需要複製項目」。

使用原生廣告範本

將資料夾新增至專案並在檔案中加入相關類別後，請按照這個方案使用範本。請注意，變更字型和樣式屬性的唯一方法就是使用樣式字典，目前我們會覆寫 xib 本身中設定的任何樣式。

Objective-C

/// Step 1: Import the templates that you need.
#import "NativeTemplates/GADTSmallTemplateView.h"
#import "NativeTemplates/GADTTemplateView.h"
...

// STEP 2: Initialize your template view object.
GADTSmallTemplateView *templateView =
    [[NSBundle mainBundle] loadNibNamed:@"GADTSmallTemplateView" owner:nil options:nil]
      .firstObject;

// STEP 3: Template views are just GADNativeAdViews.
_nativeAdView = templateView;
nativeAd.delegate = self;

// STEP 4: Add your template as a subview of whichever view you'd like.
// This must be done before calling addHorizontalConstraintsToSuperviewWidth.
// Please note: Our template objects are subclasses of GADNativeAdView so
// you can insert them into whatever type of view you’d like, and don’t need to
// create your own.
[self.view addSubview:templateView];

// STEP 5 (Optional): Create your styles dictionary. Set your styles dictionary
// on the template property. A default dictionary is created for you if you do
// not set this. Note - templates do not currently respect style changes in the
// xib.

NSString *myBlueColor = @"#5C84F0";
NSDictionary *styles = @{
    GADTNativeTemplateStyleKeyCallToActionFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyCallToActionFontColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyCallToActionBackgroundColor :
        [GADTTemplateView colorFromHexString:myBlueColor],
    GADTNativeTemplateStyleKeySecondaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeySecondaryFontColor : UIColor.grayColor,
    GADTNativeTemplateStyleKeySecondaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyPrimaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyPrimaryFontColor : UIColor.blackColor,
    GADTNativeTemplateStyleKeyPrimaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyTertiaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyTertiaryFontColor : UIColor.grayColor,
    GADTNativeTemplateStyleKeyTertiaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyMainBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyCornerRadius : [NSNumber numberWithFloat:7.0],
};

templateView.styles = styles;

// STEP 6: Set the ad for your template to render.
templateView.nativeAd = nativeAd;

// STEP 7 (Optional): If you'd like your template view to span the width of your
// superview call this method.
[templateView addHorizontalConstraintsToSuperviewWidth];
[templateView addVerticalCenterConstraintToSuperview];

樣式字典鍵

自訂範本最快的方式，就是使用以下索引鍵建立字典：

Objective-C

/// Call to action font. Expects a UIFont.
GADTNativeTemplateStyleKeyCallToActionFont

/// Call to action font color. Expects a UIColor.
GADTNativeTemplateStyleKeyCallToActionFontColor;

/// Call to action background color. Expects a UIColor.
GADTNativeTemplateStyleKeyCallToActionBackgroundColor;

/// The font, font color and background color for the first row of text in the
/// template.

/// All templates have a primary text area which is populated by the native ad's
/// headline.

/// Primary text font. Expects a UIFont.
GADTNativeTemplateStyleKeyPrimaryFont;

/// Primary text font color. Expects a UIFont.
GADTNativeTemplateStyleKeyPrimaryFontColor;

/// Primary text background color. Expects a UIColor.
GADTNativeTemplateStyleKeyPrimaryBackgroundColor;

/// The font, font color and background color for the second row of text in the
/// template.

/// All templates have a secondary text area which is populated either by the
/// body of the ad, or by the rating of the app.

/// Secondary text font. Expects a UIFont.
GADTNativeTemplateStyleKeySecondaryFont;

/// Secondary text font color. Expects a UIColor.
GADTNativeTemplateStyleKeySecondaryFontColor;

/// Secondary text background color. Expects a UIColor.
GADTNativeTemplateStyleKeySecondaryBackgroundColor;

/// The font, font color and background color for the third row of text in the
/// template. The third row is used to display store name or the default
/// tertiary text.

/// Tertiary text font. Expects a UIFont.
GADTNativeTemplateStyleKeyTertiaryFont;

/// Tertiary text font color. Expects a UIColor.
GADTNativeTemplateStyleKeyTertiaryFontColor;

/// Tertiary text background color. Expects a UIColor.
GADTNativeTemplateStyleKeyTertiaryBackgroundColor;

/// The background color for the bulk of the ad. Expects a UIColor.
GADTNativeTemplateStyleKeyMainBackgroundColor;

/// The corner rounding radius for the icon view and call to action. Expects an
/// NSNumber.
GADTNativeTemplateStyleKeyCornerRadius;

常見問題

嘗試將範本物件執行個體化時，為何會發生例外狀況？

如果您變更了 xib 檔案中的檢視畫面大小，但並未變更在子類別的「設定」方法中建立的影格大小，就可能發生這種情況。

如何進一步自訂這些範本？

這些範本只是具有相關檢視物件的 X 層級，就像您用於 iOS 開發作業的任何其他 Xib 和自訂檢視畫面類別。如果您想從頭開始建立原生廣告，請參閱原生進階指南。

為什麼在 Xib 中設定樣式時，我的樣式沒有更新？

我們目前在 GADTTemplateView.m 中覆寫所有 Xib 樣式的預設樣式字典。

提供圖像

我們製作了原生範本，協助您快速開發原生廣告。 我們很高興能看到您對 GitHub 存放區所做的貢獻，以便新增範本或功能。請將提取要求傳送給我們，我們會來調查。