דף זה תורגם על ידי Cloud Translation API.

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

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

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

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

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

גודלי תבניות

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

תבנית קטנה

@layout/gnt_small_template_view

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

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

@layout/gnt_medium_template_view

התבנית הבינונית מיועדת להצגת חצי עד שלושה רבעים מדף, אבל אפשר להשתמש בה גם בפיד. הוא מתאים לדפי נחיתה או לדפי פתיחה.

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

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

כדי להתקין את התבניות המקומיות, פשוט מורידים את קובץ ה-zip (באמצעות האפשרות Clone or download ב-GitHub) ומטמיעים את המודול לפרויקט הקיים ב-Android Studio.

בוחרים באפשרות קובץ > חדש > ייבוא מודול.
בוחרים את התיקייה nativetemplates.

מוסיפים את השורה הבאה לקובץ build.gradle ברמת האפליקציה:

dependencies {
        ...
        implementation project(':nativetemplates')
        ...
}

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

אפשר להשתמש בתבנית בכל קובץ XML של פריסה, כמו כל קבוצת תצוגה אחרת.

הוספת תבנית לפריסה

השימוש בתבניות כולל שני שלבים:

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

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity"
   tools:showIn="@layout/activity_main" >

<!--  This is your template view -->
<com.google.android.ads.nativetemplates.TemplateView
   android:id="@+id/my_template"
   <!-- this attribute determines which template is used. The other option is
    @layout/gnt_medium_template_view -->
   app:gnt_template_type="@layout/gnt_small_template_view"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />

...
</LinearLayout>

בשלב הבא, צריך להעביר את המודעה המותאמת לתבנית כשהיא נטענת:

MobileAds.initialize(this);
AdLoader adLoader = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
    .forNativeAd(new NativeAd.OnNativeAdLoadedListener() {
        @Override
        public void onNativeAdLoaded(NativeAd nativeAd) {
            NativeTemplateStyle styles = new
              NativeTemplateStyle.Builder().withMainBackgroundColor(background).build();
            TemplateView template = findViewById(R.id.my_template);
            template.setStyles(styles);
            template.setNativeAd(nativeAd);
        }
     })
     .build();

adLoader.loadAd(new AdRequest.Builder().build());

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

יש שתי דרכים לעצב את התבנית: באמצעות פורמט XML מסורתי של פריסה, או באמצעות האובייקט NativeTemplateStyle.Builder. דוגמת הקוד שלמעלה ממחישה איך להשתמש באובייקט NativeTemplateStyle.Builder כדי להגדיר את צבע הרקע הראשי, אבל יש גם מגוון אפשרויות אחרות. ריכזנו כאן את כל שיטות ה-builder הזמינות. ה-builder מחזיר אובייקט NativeTemplateStyle שמבטל את כל סגנונות הפריסה של ה-XML. בפריסות ה-XML‏ gnt_small_template.xml ו-gnt_medium_template.xml נעשה שימוש באותם פרמטרים של עיצוב ל-Android שכבר מוכרים לכם.

שיטות build לסגנון של תבנית מותאמת
`withCallToActionTextTypeface`	`Typeface callToActionTextTypeface` סוג הגופן של הקריאה לפעולה.
`withCallToActionTextSize`	`float callToActionTextSize` הגודל של הטקסט של הקריאה לפעולה.
`withCallToActionTypefaceColor`	`int callToActionTypefaceColor` הצבע של הטקסט של הקריאה לפעולה.
`withCallToActionBackgroundColor`	`ColorDrawable callToActionBackgroundColor` צבע הרקע של הקריאה לפעולה.
`withPrimaryTextTypeface`	`Typeface primaryTextTypeface` סוג הגופן של שורת הטקסט הראשונה.
`withPrimaryTextSize`	`float primaryTextSize` הגודל של שורת הטקסט הראשונה.
`withPrimaryTextTypefaceColor`	`int primaryTextTypefaceColor` הצבע של שורת הטקסט הראשונה.
`withPrimaryTextBackgroundColor`	`ColorDrawable primaryTextBackgroundColor` צבע הרקע של שורת הטקסט הראשונה.
`withSecondaryTextTypeface`	`Typeface secondaryTextTypeface` סוג הגופן של שורת הטקסט השנייה.
`withSecondaryTextSize`	`float secondaryTextSize` הגודל של שורת הטקסט השנייה.
`withSecondaryTextTypefaceColor`	`int secondaryTextTypefaceColor` צבע הטקסט של שורת הטקסט השנייה.
`withSecondaryTextBackgroundColor`	`ColorDrawable secondaryTextBackgroundColor` צבע הרקע של שורת הטקסט השנייה.
`withTertiaryTextTypeface`	`Typeface tertiaryTextTypeface` סוג הגופן של שורת הטקסט השלישית.
`withTertiaryTextSize`	`float tertiaryTextSize` הגודל של השורה השלישית של הטקסט.
`withTertiaryTextTypefaceColor`	`int tertiaryTextTypefaceColor` צבע הטקסט בשורת הטקסט השלישית.
`withTertiaryTextBackgroundColor`	`ColorDrawable tertiaryTextBackgroundColor` צבע הרקע של השורה השלישית של הטקסט.
`withMainBackgroundColor`	`ColorDrawable mainBackgroundColor` צבע הרקע הראשי.

הוספת תוכן

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