Mẫu gốc

Tải mẫu quảng cáo gốc xuống

Lưu ý quan trọng: Trước khi tiếp tục, bạn hãy tìm hiểu cách tải quảng cáo gốc.

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à 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 Chế độ xem bảng 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.

Lưu ý: Nếu bạn muốn tự thiết kế bố cục quảng cáo gốc từ đầu, hãy xem lại tài liệu về Quảng cáo gốc nâng cao.

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 thành công SDK để tải 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ẽ 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 ở 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 nhớ 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 sau để 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];

Khoá từ điển kiểu

Cách nhanh nhất để tuỳ chỉnh mẫu là tạo từ điển bằng cách sử dụ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 thành phần hiển thị trong tệp xib nhưng không thay đổi kích thước của khung đã 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 tùy 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 yêu cầu lấy dữ liệu cho chúng tôi và chúng tôi sẽ xem xét.