原生廣告範本

選取平台: Android iOS Flutter

下載原生範本

導入原生廣告,您將可自訂廣告,打造更優質的使用者體驗,進而提高參與度和整體收益。

如要充分發揮原生廣告的效益,請務必設計廣告版面配置,確保廣告自然融入應用程式。為協助您快速上手,我們製作了原生範本。

原生範本附上原生廣告檢視區塊的完整程式碼,有助您快速導入及輕鬆修改。有了原生範本,只要幾分鐘就能導入第一則原生廣告,還能迅速自訂外觀和風格,不必撰寫大量程式碼。這些範本可以安插在任何地方,例如新聞動態消息中的 TableView、對話方塊,或應用程式的任何其他位置。

本指南說明如何下載原生範本,以及在 iOS 應用程式中整合及使用這類範本的方式。開始操作前,請確認您已成功使用 SDK 載入原生廣告。

範本大小

範本有小型和中型兩種尺寸,分別對應 GADTSmallTemplateViewGADTMediumTemplateView 類別,兩者均衍生自 GADTTemplateView。這兩個範本都有固定的顯示比例,只有在您呼叫 addHorizontalConstraintsToSuperviewWidth 時,才會依上層檢視區塊的寬度縮放。如未呼叫 addHorizontalConstraintsToSuperviewWidth,則會以預設大小呈現。

GADTSmallTemplateView

小型範本適合放在 UICollectionViewUITableView 單元格中,例如動態內廣告,或其他需要使用細長矩形廣告檢視區塊的位置。這個範本的預設大小為高 91 點,寬 355 點。

GADTMediumTemplateView

中型範本會占去一半至四分之三的頁面,適用於到達網頁和啟動畫面,此外也可以嵌入 UITableViews。這種範本的預設大小為高 370 點,寬 355 點。

所有範本都支援自動版面配置功能,擺放位置可自由調整,您也可以視需要修改原始碼和 xib 檔案。

安裝原生廣告範本

如要安裝原生範本,請下載 ZIP 檔案並拖曳至 Xcode 專案,別忘了勾選「Copy items if needed」

使用原生廣告範本

將資料夾加入專案並在檔案中附上相關類別後,即可按照以下步驟使用範本。請注意,目前只能透過樣式字典修改字型和樣式屬性 (系統會覆寫 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 youd like, and dont 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 檔案中修改了檢視區塊的大小,但並未一併修改子類別「setup」方法中所建立框架的大小,就可能發生這種情況。
如何進一步自訂這些範本?
這些範本其實就是包含關聯檢視區塊物件的 xib 檔案,和 iOS 開發中常見的其他 xib 檔案和自訂檢視區塊類別相同。如果想從頭開始製作原生廣告,請參閱原生進階指南
為什麼我在 xib 中設定的樣式沒有更新?
目前,GADTTemplateView.m 的預設樣式字典會覆寫 xib 檔案中設定的所有樣式。

提供內容

為協助速開發原生廣告,我們準備了許多現成的原生範本,也歡迎您前往 GitHub 存放區,貢獻您製作的範本或新功能。如有需要請傳送提取要求,我們就會著手處理。