Mẫu quảng cáo gốc

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ể tùy 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.

Để sử dụng quảng cáo gốc một cách hiệu quả nhất, bạn cần định kiểu cho bố cục quảng cáo sao cho 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ủa bạn, được thiết kế để giúp triển khai quảng cáo một cách nhanh chóng và sửa đổi dễ dàng. Khi sử dụng 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 tùy 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.

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 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 đó là GADTSmallTemplateViewGADTMediumTemplateView. Cả hai lớp đều mở rộng GADTTemplateView. Cả hai mẫu đều có tỷ lệ cỡ ả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, các 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 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 chế độ xem có 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ả cá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 với vị trí nếu 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 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 = [[GADTSmallTemplateView alloc] init];

// STEP 3: Template views are just GADUnifiedNativeAdViews
_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 GADUnifiedNativeAdView 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 để tùy chỉnh mẫu là tạo từ điển bằng cách sử dụng các khóa 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 đã tạo trong phương thức "thiết lập" của lớp con.
Làm thế nào để thêm tùy chỉnh 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 dành cho 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à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.