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

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

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

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

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

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

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

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

גדלים של תבניות

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

GADTSmallTemplateView

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

GADTMediumTemplateView

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

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

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

כדי להתקין את Native Templates (תבניות מקוריות), פשוט מורידים את ה-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 שלנו כדי להוסיף תבניות או תכונות חדשות. שלחו לנו בקשת משיכה ואנחנו נבדוק את הנושא.