使用原生廣告自訂廣告,提供更優質的使用者體驗。提升使用者體驗有助於提高參與度,並改善整體收益。
如要充分發揮原生廣告的效益,請務必設計廣告版面配置,讓廣告看起來像是應用程式的自然延伸。為協助您入門,我們建立了原生範本。
原生範本是原生廣告的完整程式碼檢視畫面,可供您快速導入及輕鬆修改。使用原生範本,您只需幾分鐘就能導入第一則原生廣告,並快速自訂外觀和風格,不必編寫大量程式碼。您可以將這些範本放在任何位置,例如新聞動態消息中使用的 TableView、對話方塊,或應用程式中的任何其他位置。
本指南說明如何在 iOS 應用程式中下載、納入及使用原生範本。本文假設您已成功使用 SDK 載入原生廣告。
範本大小
範本大小有兩種:小型和中型。每個範本都以一個類別表示。類別為 GADTSmallTemplateView
和 GADTMediumTemplateView
。這兩個類別都會擴充 GADTTemplateView
。這兩種範本的固定長寬比都會縮放,只有在您呼叫 addHorizontalConstraintsToSuperviewWidth
時,才會填滿父項檢視區塊的寬度。如未呼叫 addHorizontalConstraintsToSuperviewWidth
,每個範本都會以預設大小算繪。
GADTSmallTemplateView
小型範本適合 UICollectionView
或 UITableView
儲存格。例如,您可以在動態內廣告中使用,或在需要細長矩形廣告檢視區塊的任何位置使用。這個範本的預設大小為高 91 點,寬 355 點。
GADTMediumTemplateView
中型範本的設計是 1/2 到 3/4 頁面檢視畫面。這類內容適合用於到達網頁或啟動畫面,但也可以加入 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 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 檔案中的檢視區塊大小,但未變更子類別「設定」方法中建立的影格大小,就可能發生這種情況。
- 如何進一步自訂這些範本?
- 這些範本只是具有相關聯檢視區塊物件的 XIB,就像您在 iOS 開發中可能用到的任何其他 XIB 和自訂檢視區塊類別一樣。如要從頭開始建構原生廣告,請參閱原生進階指南。
- 為什麼我在 xib 中設定樣式後,樣式沒有更新?
- 我們目前會使用
GADTTemplateView.m
中的預設樣式字典,覆寫所有 XIB 樣式。
提供圖像
我們製作了原生範本,協助您快速開發原生廣告。 歡迎前往 GitHub 存放區,新增範本或功能。請傳送提取要求給我們,我們會查看。