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

Tải mẫu quảng cáo 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 tốt hơn cho người dùng có thể giúp tăng mức độ tương tác 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 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 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.

Hướng dẫn này sẽ chỉ cho bạn cách tải xuống, thêm và sử dụng Mẫu quảng cáo gốc trong ứng dụng iOS. Hướng dẫn này giả định rằng bạn đã sử dụng SDK thành công để tải 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 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, chỉ điều chỉnh tỷ lệ để lấp đầy chiều rộng của chế độ xem gốc nếu 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ỏ là lựa chọn lý tưởng cho 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 ở 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 trung bình được thiết kế để hiển thị ở chế độ xem 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ể được thêm vào UITableViews. Kích thước mặc định của mẫu này là cao 370 điểm và 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 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. Hãy nhớ đánh dấu vào Copy items if needed (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à thêm lớp có liên quan vào tệp, hãy làm theo công thức 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 về phông chữ và kiểu là sử dụng từ điển kiểu. Hiện tại, chúng tôi ghi đè mọi kiểu được đặt 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 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 ngoại lệ khi cố gắng tạo thực thể cho đố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 tệp xib có đối tượng khung hiển thị được liên kết, giống như mọi tệp xib và lớp khung hiển thị tuỳ chỉnh khác mà bạn có thể đã quen thuộc 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.
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 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 nhanh chóng phát triển quảng cáo gốc. Chúng tôi rất mong bạn đóng góp vào 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.