תבניות מותאמות

הורדת תבניות מקוריות

נקודת מפתח: לפני שממשיכים, חשוב לדעת איך לטעון מודעה רגילה.

המודעות המותאמות מאפשרות לכם להתאים אישית את המודעות, וכך לשפר את חוויית המשתמש. חוויית משתמש טובה יותר יכולה להגביר את המעורבות ולשפר את התשואה הכוללת.

כדי להפיק את המקסימום מהמודעות המותאמות, חשוב לעצב את הפריסות של המודעות כך שירגישו כמו תוספת טבעית לאפליקציה. כדי לעזור לכם להתחיל, יצרנו תבניות של מודעות מותאמות.

תבניות מותאמות הן תצוגות של קוד מלא של המודעות המותאמות, שנועדו להטמעה מהירה ולשינוי קל. בעזרת התבניות המותאמות תוכלו להטמיע את המודעה המותאמת הראשונה שלכם תוך כמה דקות, ולהתאים אישית במהירות את המראה והתחושה שלה בלי הרבה קוד. אפשר למקם את התבניות האלה בכל מקום שרוצים, למשל ב-TableView שמשמש בפיד חדשות, בתיבת דו-שיח או בכל מקום אחר באפליקציה.

הערה: אם אתם רוצים לעצב פריסות מקוריות משלכם מהתחלה, תוכלו לחזור למסמכי העזרה של Native Advanced.

במדריך הזה נסביר איך להוריד תבניות מותאמות, לכלול אותן באפליקציות ל-iOS ולהשתמש בהן. ההנחה היא שכבר השתמשתם ב-SDK כדי לטעון מודעה רגילה.

גודלי תבניות

יש שני גדלים של תבניות: קטנות ובינוניות. כל תבנית מיוצגת על ידי כיתה. הכיתות הן GADTSmallTemplateView ו-GADTMediumTemplateView. שתי הכיתות נגזרות מ-GADTTemplateView. לשני התבניות יש יחס גובה-רוחב קבוע, שיתאימו לרוחב של תצוגות ההורה שלהם רק אם תפעילו את addHorizontalConstraintsToSuperviewWidth. אם לא קוראים ל-addHorizontalConstraintsToSuperviewWidth, כל תבנית תומרג בגודל ברירת המחדל שלה.

GADTSmallTemplateView

התבנית הקטנה מתאימה לתאים מסוג UICollectionView או UITableView. לדוגמה, אפשר להשתמש בו במודעות בגוף הפיד או בכל מקום שבו צריך תצוגה של מודעה מלבנית וצרה. גודל ברירת המחדל של התבנית הזו הוא 91 נקודות גובה ו-355 נקודות רוחב.

GADTMediumTemplateView

התצוגה של התבנית הבינונית אמורה להיות בגודל של חצי דף עד 3/4 דף. האפשרות הזו מתאימה לדפי נחיתה או לדפי פתיח, אבל אפשר לכלול אותה גם ב-UITableViews. גודל ברירת המחדל של התבנית הזו הוא 370 נקודות גובה ו-355 נקודות רוחב.

כל התבניות שלנו תומכות בפריסה אוטומטית, כך שתוכלו להתנסות במיקומים שונים. כמובן, אפשר גם לשנות את קוד המקור ואת קובצי ה-xib בהתאם לדרישות שלכם.

התקנת התבניות של המודעות המותאמות

כדי להתקין את התבניות המקומיות, פשוט מורידים את קובץ ה-zip וגוררים אותו לפרויקט ב-Xcode. חשוב לסמן את האפשרות העתקת פריטים במקרה הצורך.

שימוש בתבניות של מודעות מותאמות

אחרי שמוסיפים את התיקייה לפרויקט וכוללים את הכיתה הרלוונטית בקובץ, פועלים לפי ההוראות הבאות כדי להשתמש בתבנית. חשוב לזכור שהדרך היחידה לשנות את מאפייני הגופן והסגנון היא באמצעות מילון הסגנונות. בשלב זה, אנחנו מבטלים את כל הגדרות הסגנון שמוגדרות ב-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];

מפתחות של מילון סגנונות

הדרך המהירה ביותר להתאים אישית את התבניות היא ליצור מילון עם המפתחות הבאים:

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;

שאלות נפוצות

למה מתקבלת חריגה כשמנסים ליצור מופע של אובייקט התבנית?

הבעיה הזו יכולה לקרות אם שיניתם את גודל התצוגה בקובץ ה-xib אבל לא שיניתם את גודל המסגרת שנוצרה בשיטה setup של תת-הסוג.

איך אפשר להתאים אישית את התבניות האלה?

התבניות האלה הן פשוט קובצי XIB עם אובייקטי תצוגה משויכים, כמו כל קובץ XIB וסוג תצוגה מותאם אישית אחרים שאתם אולי רגילים אליהם בפיתוח ל-iOS. אם אתם מעדיפים ליצור מודעות מותאמות מאפס, תוכלו לעיין במדריך שלנו למודעות מותאמות מסוג Advanced.

למה הסגנונות לא מתעדכנים כשמגדירים אותם ב-xib?

אנחנו משנים כרגע את כל הסגנונות של ה-xib באמצעות מילון הסגנונות שמוגדר כברירת מחדל ב-GADTTemplateView.m.

הוספת תוכן

יצרנו תבניות של מודעות מותאמות כדי לעזור לכם לפתח מודעות מותאמות במהירות. נשמח לראות שתוסיפו תכונות או תבניות חדשות למאגר שלנו ב-GitHub. אפשר לשלוח לנו בקשת pull request ואנחנו נבדוק את הנושא.