התאמה אישית של פריסות מודעות באמצעות תבניות מותאמות

בחירת פלטפורמה: iOS Flutter Android (גרסה קודמת)

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

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

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

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

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

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

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

GADTSmallTemplateView

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

GADTMediumTemplateView

התבנית הבינונית מיועדת לתצוגה של חצי דף עד שלושת רבעי דף. האפשרות הזו מתאימה לדפי נחיתה או לדפי פתיחה, אבל אפשר לכלול אותה גם ב-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. שלחו לנו בקשת משיכה ונבדוק אותה.