Dengan menggunakan iklan native, Anda dapat menyesuaikan iklan untuk menghasilkan pengalaman pengguna yang lebih baik. Pengalaman pengguna yang lebih baik dapat meningkatkan engagement dan meningkatkan
hasil Anda secara keseluruhan.
Untuk mendapatkan hasil maksimal dari iklan native, penting untuk menata gaya tata letak iklan Anda agar terlihat seperti ekstensi alami aplikasi Anda. Untuk membantu Anda memulai, kami telah membuat Template Native.
Template Native merupakan tampilan kode lengkap untuk iklan native Anda, yang didesain untuk penerapan cepat dan modifikasi yang mudah. Dengan Template Native, Anda dapat menerapkan iklan native pertama hanya dalam beberapa menit, dan Anda dapat menyesuaikan tampilan dan nuansa dengan cepat tanpa banyak kode. Anda dapat menempatkan template ini di mana pun yang diinginkan, seperti di TableView yang digunakan di feed berita, dalam dialog, atau di mana pun di aplikasi Anda.
Panduan ini akan menunjukkan cara mendownload, menyertakan, dan menggunakan Template Native di aplikasi iOS. Anda dianggap telah berhasil menggunakan SDK untuk memuat iklan native.
Ukuran template
Ada dua ukuran template: kecil dan sedang. Setiap template direpresentasikan
oleh satu class. Class-nya adalah GADTSmallTemplateView
dan
GADTMediumTemplateView
. Kedua class memperluas GADTTemplateView
. Kedua
template memiliki rasio lebar tinggi tetap, yang akan diskalakan untuk mengisi lebar
tampilan induknya hanya jika Anda memanggil addHorizontalConstraintsToSuperviewWidth
.
Jika Anda tidak memanggil addHorizontalConstraintsToSuperviewWidth
, setiap template
akan merender ukuran defaultnya.
GWSTSmallTemplateView
Template kecil ideal untuk UICollectionView
atau UITableView
sel. Misalnya, Anda dapat menggunakannya untuk iklan dalam feed, atau di mana saja Anda memerlukan tampilan iklan persegi panjang tipis. Ukuran default template ini adalah 91 poin dengan lebar 355 poin.
StreetViewTMediumTemplateView
Template sedang ditujukan untuk tampilan halaman 1/2 sampai 3/4 halaman. Ini bagus untuk
halaman landing atau halaman pembuka, tetapi juga dapat disertakan dalam UITableViews
. Ukuran
default template ini adalah tinggi 370 poin dengan lebar 355 poin.
Semua template kami mendukung tata letak otomatis, jadi jangan ragu untuk bereksperimen dengan penempatan. Tentu saja, Anda juga dapat mengubah kode sumber dan file xib agar sesuai dengan kebutuhan Anda.
Menginstal template iklan native
Untuk menginstal Template Native, cukup download zip dan tarik ke project Xcode Anda. Pastikan Anda mencentang Copy items if needed.
Menggunakan template iklan native
Setelah Anda menambahkan folder ke project dan menyertakan class yang relevan dalam file Anda, ikuti resep ini untuk menggunakan template. Perhatikan bahwa satu-satunya cara untuk mengubah properti font dan gaya adalah menggunakan kamus gaya—saat ini kami mengganti gaya apa pun yang ditetapkan di xib itu sendiri.
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];
Tombol kamus gaya
Cara tercepat untuk menyesuaikan template Anda adalah dengan membuat kamus dengan kunci berikut:
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;
FAQ
- Mengapa saya mendapatkan pengecualian saat mencoba membuat instance objek template?
- Hal ini dapat terjadi jika Anda telah mengubah ukuran tampilan di file xib, tetapi belum mengubah ukuran frame yang dibuat dalam metode "penyiapan" subclass.
- Bagaimana cara menyesuaikan template ini lebih lanjut?
- Template ini hanyalah xib dengan objek tampilan terkait, seperti xib dan class tampilan kustom lainnya yang mungkin Anda gunakan untuk pengembangan iOS. Jika Anda lebih suka membuat iklan native dari awal, lihat panduan Native Advanced kami.
- Mengapa gaya saya tidak diperbarui saat menyetelnya di xib?
- Saat ini, kita mengganti semua gaya xib dengan kamus gaya default di
GADTTemplateView.m
.
Kontribusi
Kami telah membuat Template Native untuk membantu Anda mengembangkan iklan native dengan cepat. Kami senang melihat Anda berkontribusi pada repo GitHub untuk menambahkan template atau fitur baru. Kirimkan permintaan pull dan kami akan melihatnya.