Mẫu quảng cáo gốc
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Chọn nền tảng:
Android
iOS
Flutter
Tải mẫu quảng cáo gốc xuống
Bằng cách sử dụng quảng cáo gốc, bạn có thể tuỳ chỉnh quảng cáo của mình nhằm mang đến trải nghiệm tốt hơn cho người dùng. Trải nghiệm người dùng tốt hơn có thể giúp tăng mức độ tương tác và cải thiện lợi nhuận tổng thể của bạn.
Để khai thác tối đa quảng cáo gốc, bạn nên định kiểu cho bố cục quảng cáo để quảng cáo trông giống như một phần mở rộng tự nhiên của ứng dụng. Để giúp bạn bắt đầu, chúng tôi đã tạo các Mẫu quảng cáo gốc.
Mẫu quảng cáo gốc là các chế độ xem đoạn mã hoàn chỉnh cho quảng cáo gốc, được thiết kế để giúp bạn nhanh chóng triển khai và dễ dàng sửa đổi quảng cáo gốc. Với Mẫu quảng cáo gốc, bạn có thể triển khai quảng cáo gốc đầu tiên chỉ trong vài phút và nhanh chóng tuỳ chỉnh giao diện mà không cần dùng nhiều mã. Bạn có thể đặt các mẫu này ở bất kỳ nơi nào bạn
muốn, chẳng hạn như trong TableView dùng trong nguồn cấp tin tức, trong hộp thoại hoặc bất kỳ nơi nào khác
trong ứng dụng.
Hướng dẫn này sẽ chỉ cho bạn cách tải xuống, đưa vào và sử dụng các Mẫu gốc trong ứng dụng iOS. Giả định là bạn đã sử dụng SDK để tải thành công một quảng cáo gốc.
Kích thước mẫu
Có hai kích thước mẫu: nhỏ và trung bình. Mỗi mẫu được biểu thị bằng một lớp. Các lớp này là GADTSmallTemplateView
và GADTMediumTemplateView
. Cả hai lớp đều mở rộng GADTTemplateView
. Cả hai mẫu đều có tỷ lệ khung hình cố định, và tỷ lệ này sẽ chỉ thay đổi để lấp đầy chiều rộng của chế độ xem gốc chỉ khi bạn gọi addHorizontalConstraintsToSuperviewWidth
.
Nếu bạn không gọi addHorizontalConstraintsToSuperviewWidth
, mỗi mẫu sẽ hiển thị kích thước mặc định.
GADTSmallTemplateView
Mẫu nhỏ thích hợp cho ô UICollectionView
hoặc UITableView
. Ví dụ: Bạn có thể sử dụng mẫu có kích thước nhỏ cho quảng cáo trong nguồn cấp dữ liệu, hoặc bất cứ nơi nào mà bạn cần sử dụng chế độ xem quảng cáo ở dạng hình chữ nhật hẹp. Kích thước mặc định của mẫu này là 91 x 355 pixel (cao x rộng).

GADTMediumTemplateView
Mẫu trung bình là mẫu có chế độ xem bằng 1/2 đến 3/4 trang. Mẫu này phù hợp với trang đích hoặc trang màn hình chờ, nhưng cũng có thể đưa vào UITableViews
. Kích thước mặc định của mẫu này là 370 x 355 pixel (cao x rộng).

Tất cả mẫu của chúng tôi đều hỗ trợ bố cục tự động, vì vậy, hãy thử nghiệm các mẫu đó với vị trí mà bạn muốn. Tất nhiên, bạn cũng có thể thay đổi mã nguồn và tệp xib cho phù hợp với các yêu cầu của mình.
Cài đặt mẫu quảng cáo gốc
Để cài đặt Mẫu quảng cáo gốc, bạn chỉ cần tải tệp zip xuống và kéo tệp đó vào dự án Xcode của mình. Hãy chọn Sao chép các mục nếu cần.

Sử dụng mẫu quảng cáo gốc
Sau khi bạn thêm thư mục vào dự án và đưa lớp liên quan vào tệp, hãy làm theo hướng dẫn này để sử dụng mẫu. Xin lưu ý rằng cách duy nhất để thay đổi các thuộc tính kiểu và phông chữ là sử dụng từ điển kiểu. Hiện tại, chúng tôi ghi đè mọi tập hợp kiểu trong chính tệp 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];
Các khoá từ điển kiểu
Cách nhanh nhất để tuỳ chỉnh mẫu là tạo một từ điển bằng các khoá sau:
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;
Câu hỏi thường gặp
- Tại sao tôi nhận được ngoại lệ khi cố gắng khởi tạo đối tượng mẫu?
- Điều này có thể xảy ra nếu bạn thay đổi kích thước của chế độ xem trong tệp xib nhưng không thay đổi kích thước của khung được tạo trong phương thức "thiết lập" của lớp con.
- Làm cách nào để tuỳ chỉnh thêm cho các mẫu này?
- Các mẫu này chỉ là các tệp xib với đối tượng chế độ xem được liên kết, giống như các lớp chế độ xem tuỳ chỉnh và tệp xib khác mà bạn có thể đã dùng để phát triển iOS.
Nếu bạn muốn tự tạo quảng cáo gốc của mình từ đầu, hãy xem
Hướng dẫn về quảng cáo gốc nâng cao.
- Tại sao kiểu của tôi không được cập nhật sau khi được cài đặt trong xib?
- Hiện tại, chúng tôi đã ghi đè tất cả các kiểu xib bằng từ điển kiểu mặc định trong
GADTTemplateView.m
.
Đóng góp
Chúng tôi đã tạo Mẫu quảng cáo gốc để giúp bạn phát triển quảng cáo gốc một cách nhanh chóng.
Chúng tôi mong muốn nhận được sự đóng góp của bạn cho kho GitHub của chúng tôi nhằm bổ sung thêm các mẫu hoặc tính năng mới. Hãy gửi ý kiến đề xuất của bạn cho chúng tôi và chúng tôi sẽ tiến hành xem xét.
Trừ phi có lưu ý khác, nội dung của trang này được cấp phép theo Giấy phép ghi nhận tác giả 4.0 của Creative Commons và các mẫu mã lập trình được cấp phép theo Giấy phép Apache 2.0. Để biết thông tin chi tiết, vui lòng tham khảo Chính sách trang web của Google Developers. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các đơn vị liên kết với Oracle.
Cập nhật lần gần đây nhất: 2025-09-02 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-09-02 UTC."],[[["\u003cp\u003eNative Templates offer pre-built layouts for native ads, enabling quick implementation and customization for a better user experience within iOS apps.\u003c/p\u003e\n"],["\u003cp\u003eTwo template sizes, small and medium, are available, designed for various ad placements like in-feed ads or landing pages, and can be easily integrated using provided code snippets.\u003c/p\u003e\n"],["\u003cp\u003eTemplates can be further personalized by adjusting font, color, and background styles using a styles dictionary with specific keys for different ad elements.\u003c/p\u003e\n"],["\u003cp\u003eTo utilize the templates, developers need to download the provided zip file, add it to their Xcode project, and follow the step-by-step instructions for implementation and customization.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can explore the GitHub repository to contribute new templates or features, enhancing the Native Templates offering for iOS native ads.\u003c/p\u003e\n"]]],["Native Templates are pre-designed, customizable views for native ads in iOS apps, available for download from GitHub. Two sizes, small (`GADTSmallTemplateView`) and medium (`GADTMediumTemplateView`), are provided, with default and scalable dimensions. To use, download the templates, import them into your project, initialize a template view object, set it as a subview, optionally define a styles dictionary for font and color customization, assign the native ad, and add constraints for width scaling. Style settings in the xib are overridden.\n"],null,["Select platform: [Android](/admob/android/native/templates \"View this page for the Android platform docs.\") [iOS](/admob/ios/native/templates \"View this page for the iOS platform docs.\") [Flutter](/admob/flutter/native/templates \"View this page for the Flutter platform docs.\")\n\n\u003cbr /\u003e\n\n[Download Native Templates](//github.com/googleads/googleads-mobile-ios-native-templates)\n| **Key Point:** Before continuing, know how to [load a native\n| ad](/admob/ios/native#load-ad). Learn more about native ads in our [Native Ads\n| Playbook](//admob.google.com/home/resources/native-ads-playbook/).\n\n\nUsing native ads you can customize your ads resulting in a better user\nexperience. Better user experiences can increase engagement and improve your\noverall yield.\n\nIn order to get the most out of native ads, it's important to style your ad\nlayouts so that they feel like a natural extension of your app. To help you get\nstarted, we've created Native Templates.\n\nNative Templates are code-complete views for your native ads, designed for fast\nimplementation and easy modification. With Native Templates, you can implement\nyour first native ad in just a few minutes, and you can quickly customize the\nlook and feel without a lot of code. You can place these templates anywhere you\nwant, such as in a TableView used in a news feed, in a dialog, or anywhere else\nin your app.\n| **Note:** If you're interested in designing your own native layouts from scratch, return to the [Native Advanced](/admob/ios/native/advanced) documentation instead.\n\nThis guide will show you how to download, include, and use Native Templates in\nyour iOS apps. It assumes you've already successfully used the SDK to load a\nnative ad.\n\nTemplate sizes\n\nThere are two template sizes: small and medium. Each template is represented\nby a class. The classes are `GADTSmallTemplateView` and\n`GADTMediumTemplateView`. Both classes extend `GADTTemplateView`. Both\ntemplates have a fixed aspect ratio, which will scale to fill the width of\ntheir parent views only if you call `addHorizontalConstraintsToSuperviewWidth`.\nIf you don't call `addHorizontalConstraintsToSuperviewWidth`, each template\nwill render its default size.\n\nGADTSmallTemplateView\n\nThe small template is ideal for `UICollectionView` or `UITableView` cells. For\ninstance you could use it for in-feed ads, or anywhere you need a thin\nrectangular ad view. The default size of this template is 91 points high by 355\npoints wide.\n\nGADTMediumTemplateView\n\nThe medium template is meant to be a 1/2 to 3/4-page view. This is good for\nlanding or splash pages, but can also be included in `UITableViews`. The\ndefault size of this template is 370 points high by 355 points wide.\n\nAll of our templates support autolayout, so feel free to experiment with\nplacement. Of course, you can also change the source code and xib files to\nsuit your requirements.\n\nInstalling the native ad templates\n\nTo install the Native Templates, simply download the zip and drag it into your\nXcode project. Make sure you check **Copy items if needed**.\n\nUsing the native ad templates\n\nOnce you've added the folder to your project and included the relevant class in\nyour file, follow this recipe to use a template. Note that the only way\nto change font and style properties is using the styles dictionary---we\ncurrently override any style set in the xib itself.\n\nObjective-C \n\n```python\n/// Step 1: Import the templates that you need.\n#import \"NativeTemplates/GADTSmallTemplateView.h\"\n#import \"NativeTemplates/GADTTemplateView.h\"\n...\n\n// STEP 2: Initialize your template view object.\nGADTSmallTemplateView *templateView =\n [[NSBundle mainBundle] loadNibNamed:@\"GADTSmallTemplateView\" owner:nil options:nil]\n .firstObject;\n\n// STEP 3: Template views are just GADNativeAdViews.\n_nativeAdView = templateView;\nnativeAd.delegate = self;\n\n// STEP 4: Add your template as a subview of whichever view you'd like.\n// This must be done before calling addHorizontalConstraintsToSuperviewWidth.\n// Please note: Our template objects are subclasses of GADNativeAdView so\n// you can insert them into whatever type of view you'd like, and don't need to\n// create your own.\n[self.view addSubview:templateView];\n\n// STEP 5 (Optional): Create your styles dictionary. Set your styles dictionary\n// on the template property. A default dictionary is created for you if you do\n// not set this. Note - templates do not currently respect style changes in the\n// xib.\n\nNSString *myBlueColor = @\"#5C84F0\";\nNSDictionary *styles = @{\n GADTNativeTemplateStyleKeyCallToActionFont : [UIFont systemFontOfSize:15.0],\n GADTNativeTemplateStyleKeyCallToActionFontColor : UIColor.whiteColor,\n GADTNativeTemplateStyleKeyCallToActionBackgroundColor :\n [GADTTemplateView colorFromHexString:myBlueColor],\n GADTNativeTemplateStyleKeySecondaryFont : [UIFont systemFontOfSize:15.0],\n GADTNativeTemplateStyleKeySecondaryFontColor : UIColor.grayColor,\n GADTNativeTemplateStyleKeySecondaryBackgroundColor : UIColor.whiteColor,\n GADTNativeTemplateStyleKeyPrimaryFont : [UIFont systemFontOfSize:15.0],\n GADTNativeTemplateStyleKeyPrimaryFontColor : UIColor.blackColor,\n GADTNativeTemplateStyleKeyPrimaryBackgroundColor : UIColor.whiteColor,\n GADTNativeTemplateStyleKeyTertiaryFont : [UIFont systemFontOfSize:15.0],\n GADTNativeTemplateStyleKeyTertiaryFontColor : UIColor.grayColor,\n GADTNativeTemplateStyleKeyTertiaryBackgroundColor : UIColor.whiteColor,\n GADTNativeTemplateStyleKeyMainBackgroundColor : UIColor.whiteColor,\n GADTNativeTemplateStyleKeyCornerRadius : [NSNumber numberWithFloat:7.0],\n};\n\ntemplateView.styles = styles;\n\n// STEP 6: Set the ad for your template to render.\ntemplateView.nativeAd = nativeAd;\n\n// STEP 7 (Optional): If you'd like your template view to span the width of your\n// superview call this method.\n[templateView addHorizontalConstraintsToSuperviewWidth];\n[templateView addVerticalCenterConstraintToSuperview];\n```\n\nStyle dictionary keys\n\nThe fastest way to customize your templates is to make a dictionary with the\nfollowing keys:\n\nObjective-C \n\n```scilab\n/// Call to action font. Expects a UIFont.\nGADTNativeTemplateStyleKeyCallToActionFont\n\n/// Call to action font color. Expects a UIColor.\nGADTNativeTemplateStyleKeyCallToActionFontColor;\n\n/// Call to action background color. Expects a UIColor.\nGADTNativeTemplateStyleKeyCallToActionBackgroundColor;\n\n/// The font, font color and background color for the first row of text in the\n/// template.\n\n/// All templates have a primary text area which is populated by the native ad's\n/// headline.\n\n/// Primary text font. Expects a UIFont.\nGADTNativeTemplateStyleKeyPrimaryFont;\n\n/// Primary text font color. Expects a UIFont.\nGADTNativeTemplateStyleKeyPrimaryFontColor;\n\n/// Primary text background color. Expects a UIColor.\nGADTNativeTemplateStyleKeyPrimaryBackgroundColor;\n\n/// The font, font color and background color for the second row of text in the\n/// template.\n\n/// All templates have a secondary text area which is populated either by the\n/// body of the ad, or by the rating of the app.\n\n/// Secondary text font. Expects a UIFont.\nGADTNativeTemplateStyleKeySecondaryFont;\n\n/// Secondary text font color. Expects a UIColor.\nGADTNativeTemplateStyleKeySecondaryFontColor;\n\n/// Secondary text background color. Expects a UIColor.\nGADTNativeTemplateStyleKeySecondaryBackgroundColor;\n\n/// The font, font color and background color for the third row of text in the\n/// template. The third row is used to display store name or the default\n/// tertiary text.\n\n/// Tertiary text font. Expects a UIFont.\nGADTNativeTemplateStyleKeyTertiaryFont;\n\n/// Tertiary text font color. Expects a UIColor.\nGADTNativeTemplateStyleKeyTertiaryFontColor;\n\n/// Tertiary text background color. Expects a UIColor.\nGADTNativeTemplateStyleKeyTertiaryBackgroundColor;\n\n/// The background color for the bulk of the ad. Expects a UIColor.\nGADTNativeTemplateStyleKeyMainBackgroundColor;\n\n/// The corner rounding radius for the icon view and call to action. Expects an\n/// NSNumber.\nGADTNativeTemplateStyleKeyCornerRadius;\n```\n\nFAQs\n\nWhy do I get an exception when I try to instantiate the template object?\n: This can happen if you've changed the size of the view in the xib file but\n haven't changed the size of the frame created in the \"setup\" method of the\n subclass.\n\nHow can I further customize these templates?\n: These templates are just xibs with associated view objects, like any other\n xib and custom view class you may be used to from iOS development.\n If you prefer to build your native ads from scratch, see our\n [Native Advanced guide](/admob/ios/native/advanced).\n\nWhy aren't my styles updating when I set them in the xib?\n: We currently override all xib styles by the default styles dictionary in\n `GADTTemplateView.m`.\n\nContribute\n\nWe've made Native Templates to help you develop native ads quickly.\nWe'd love to see you contribute to our\n[GitHub](//github.com/googleads/googleads-mobile-ios-native-templates)\nrepo to add new templates or features. Send us a pull request and we'll take a\nlook."]]