Mẫu quảng cáo 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, hãy tìm hiểu cách tải quảng cáo gốc.

Khi 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 cần tạo kiểu cho bố cục quảng cáo để chú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 gốc.

Mẫu 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 triển khai nhanh chóng và dễ dàng sửa đổi. 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à có thể 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 cứ 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.

Lưu ý: Nếu bạn muốn thiết kế bố cục quảng cáo gốc của riêng mình 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ả sử bạn đã sử dụng SDK để tải thành công 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ẽ điều chỉnh theo 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ỏ thích hợp cho ô UICollectionView hoặc UITableView. Ví dụ: bạn có thể sử dụng mẫu này cho quảng cáo trong nguồn cấp dữ liệu hoặc bất cứ nơi nào bạn cần có khung hiển thị quảng cáo hình chữ nhật mỏng. 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 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 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ả các mẫu của chúng tôi đều hỗ trợ bố cục tự động, vì vậy, hãy thoải mái thử nghiệm với vị trí. 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 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 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 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 khóa từ điển kiểu

Cách nhanh nhất để tuỳ chỉnh mẫu của bạn 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 gặp trường hợ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 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 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ư mọi lớp chế độ xem tuỳ chỉnh và tệp xib khác mà bạn có thể đã 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 các kiểu của tôi không được cập nhật sau khi tô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 gốc để giúp bạn phát triển nhanh quảng cáo gốc. Chúng tôi mong muốn nhận được sự đóng góp của bạn cho kho lưu trữ GitHub của chúng tôi để bổ sung các mẫu hoặc tính năng mới. Hãy gửi yêu cầu của bạn để chúng tôi xem xét.