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

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

נקודה מרכזית: לפני שתמשיך, דע איך לטעון מודעה מותאמת. למידע נוסף על מודעות מותאמות, כדאי לעיין ב-Native Ads מדריך.

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

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

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

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

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

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

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

GADTSmallTemplateView

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

GADTMediumTemplateView

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

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

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

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

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

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

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, אבל לא שיניתם את גודל המסגרת שנוצר בשיטת ה'הגדרה' של קבוצת המשנה.

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

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

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

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

הוספת תוכן

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