מודעות מותאמות מאפשרות לכם להתאים אישית את המודעות וכך לשפר את חוויית המשתמש. חוויית משתמש טובה יותר יכולה להגביר את המעורבות ולשפר את התפוקה הכוללת.
כדי להפיק את המקסימום מהמודעות המותאמות, חשוב לעצב את פריסות המודעות כך שהן ייראו כהרחבה טבעית של האפליקציה. כדי לעזור לכם להתחיל, יצרנו תבניות של מודעות מותאמות.
תבניות מותאמות הן תצוגות מלאות של קוד למודעות מותאמות, שנועדו להטמעה מהירה ולשינוי קל. בעזרת תבניות מותאמות, אפשר להטמיע את המודעה המותאמת הראשונה תוך כמה דקות, ולהתאים אישית במהירות את המראה והתחושה בלי לכתוב הרבה קוד. אפשר למקם את התבניות האלה בכל מקום שרוצים, למשל בתצוגת רשימה שמשמשת בפיד חדשות, בתיבת דו-שיח או בכל מקום אחר באפליקציה.
התבניות המקוריות שלנו מסופקות כמודול Android Studio, כך שקל לכלול אותן בפרויקט ולהשתמש בהן איך שרוצים.
גודלי תבניות
יש שתי תבניות: קטנה ובינונית. שניהם משתמשים ב-TemplateView
class ויש להם יחס גובה-רוחב קבוע. הם יותאמו לרוחב של תצוגות האב שלהם.
תבנית קטנה
@layout/gnt_small_template_view
התבנית הקטנה מתאימה במיוחד לתצוגות של רכיבי Recycler או בכל מקרה שבו נדרשת תצוגה מלבנית ארוכה של מודעה. לדוגמה, אפשר להשתמש בו במודעות בגוף הפיד.
תבנית בינונית
@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 מחזיר אובייקט 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 ותוסיפו תבניות או תכונות חדשות. אפשר לשלוח לנו pull request ואנחנו נבדוק אותו.