Tạo kiểu cho bố cục quảng cáo bằng mẫu gốc

Chọn nền tảng: iOS Flutter Android (Legacy)

Tải mẫu gốc xuống

Khi sử dụng quảng cáo gốc, bạn có thể tuỳ chỉnh quảng cáo để mang lại 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ể tăng mức độ gắn bó và cải thiện lợi nhuận tổng thể.

Để 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 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 nhiều mã. Bạn có thể đặt các mẫu này ở mọi vị trí mà bạn muốn, chẳng hạn như trong TableView được 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 của bạn.

Hướng dẫn này sẽ trình bày cách tải xuống, thêm và sử dụng Mẫu gốc trong ứng dụng iOS. Giả sử bạn đã sử dụng thành công SDK để tải một quảng cáo gốc.

Kích thước mẫu

Có 2 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à sẽ điều chỉnh tỷ lệ để 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ỏ phù hợp với các ô 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à cao 91 điểm và rộng 355 điểm.

GADTMediumTemplateView

Mẫu vừa có kích thước từ 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 bạn cũng có thể thêm mẫu này vào UITableViews. Kích thước mặc định của mẫu này là cao 370 điểm x rộng 355 điểm.

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 yêu cầu của mình.

Cài đặt mẫu quảng cáo gốc

Để cài đặt Native Templates (Mẫu gốc), bạn chỉ cần tải tệp zip xuống rồi kéo tệp đó vào dự án Xcode. Hãy nhớ đánh dấu vào mục 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 có liên quan vào tệp, hãy làm theo hướng dẫn này để sử dụng một mẫu. Xin lưu ý rằng cách duy nhất để thay đổi các thuộc tính phông chữ và kiểu là sử dụng từ điển kiểu. Hiện tại, chúng tôi sẽ ghi đè mọi kiểu được đặt trong chính 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];

Kiểu khoá từ điển

Cách nhanh nhất để tuỳ chỉnh mẫu là tạo một từ điển có 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 gặp trường hợp 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 khung hiển thị trong tệp xib nhưng chưa 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 xib có các đối tượng khung hiển thị được liên kết, giống như mọi xib và lớp khung hiển thị tuỳ chỉnh khác mà bạn có thể đã quen dùng trong quá trình phát triển iOS. Nếu bạn muốn tự tạo quảng cáo gốc từ đầu, hãy xem hướng dẫn về Quảng cáo gốc nâng cao của chúng tôi.
Tại sao mẫ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 ta đang 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 rất mong bạn đóng góp cho kho lưu trữ GitHub của chúng tôi để 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.