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

בחירת פלטפורמה: iOS Flutter Android (Legacy)

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

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

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

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

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

גודלי תבניות

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

תבנית קטנה

@layout/gnt_small_template_view

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

תבנית בינונית

@layout/gnt_medium_template_view

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

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

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

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

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

  2. בוחרים את התיקייה nativetemplates.

    ייבוא תבנית מקורית

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

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

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

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

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

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

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

    <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>
    
  2. בשלב הבא, צריך להעביר את המודעה המותאמת לתבנית כשהיא נטענת:

    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 מחזיר אובייקט NativeTemplateStyle שמבטל כל סגנון פריסה של XML. פריסות ה-XML‏ gnt_small_template.xml ו-gnt_medium_template.xml משתמשות באותם פרמטרים של סגנון Android שאתם כבר מכירים.

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