מודעות מותאמות מתקדמות

הצגת מודעה מותאמת

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

נקודה חשובה: במדיניות ובהנחיות בנושא מודעות מותאמות אפשר לקרוא איך ליצור מודעות מותאמות.

כיתה אחת (NativeAdView)

לפורמט NativeAd, יש את המחלקה NativeAdView תואמת. המחלקה הזו היא ViewGroup שבעלי האפליקציות צריכים להשתמש בה בתור הבסיס ל-NativeAd. NativeAdView יחיד מתייחס למודעה מותאמת אחת. כל תצוגה שמשמשת להצגת הנכסים של אותה מודעה (למשל, ImageView שמציג את נכס צילום המסך) צריכה להיות צאצא של האובייקט NativeAdView.

היררכיית התצוגות של מודעה מותאמת שמשתמשת ב-LinearLayout כדי להציג את תצוגות הנכסים שלה עשויה להיראות כך:

<com.google.android.gms.ads.nativead.NativeAdView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <LinearLayout
    android:orientation="vertical"
    ... >
        <LinearLayout
        android:orientation="horizontal"
        ... >
          <ImageView
           android:id="@+id/ad_app_icon"
           ... />
          <TextView
            android:id="@+id/ad_headline"
            ... />
         </LinearLayout>


         // Other assets such as image or media view, call to action, etc follow.
         ...
    </LinearLayout>
</com.google.android.gms.ads.nativead.NativeAdView>

הנה דוגמה שיוצרת NativeAdView ומאכלסת אותו ב-NativeAd:

Java

AdLoader.Builder builder = new AdLoader.Builder(this, "AD_UNIT_ID")
    .forNativeAd(new NativeAd.OnNativeAdLoadedListener() {
        @Override
        public void onNativeAdLoaded(NativeAd nativeAd) {
            // Assumes you have a placeholder FrameLayout in your View layout
            // (with id fl_adplaceholder) where the ad is to be placed.
            FrameLayout frameLayout =
                findViewById(R.id.fl_adplaceholder);
            // Assumes that your ad layout is in a file call native_ad_layout.xml
            // in the res/layout folder
            NativeAdView adView = (NativeAdView) getLayoutInflater()
                .inflate(R.layout.native_ad_layout, null);
            // This method sets the text, images and the native ad, etc into the ad
            // view.
            populateNativeAdView(nativeAd, adView);
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        }
});

Kotlin

val builder = AdLoader.Builder(this, "AD_UNIT_ID")
    .forNativeAd { nativeAd ->
        // Assumes that your ad layout is in a file call native_ad_layout.xml
        // in the res/layout folder
        val adView = layoutInflater
                .inflate(R.layout.native_ad_layout, null) as NativeAdView
        // This method sets the text, images and the native ad, etc into the ad
        // view.
        populateNativeAdView(nativeAd, adView)
        // Assumes you have a placeholder FrameLayout in your View layout
        // (with id ad_frame) where the ad is to be placed.
        ad_frame.removeAllViews()
        ad_frame.addView(adView)
    }

שימו לב שכל הנכסים במודעה מותאמת צריכים להיות מוצגים בתוך הפריסה NativeAdView. Google Mobile Ads SDK מנסה לתעד אזהרה כשנכסים מותאמים עוברים רינדור מחוץ לפריסה של תצוגת מודעות מותאמות.

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

• קליקים על תיעוד
• תיעוד החשיפות כשהפיקסל הראשון גלוי במסך
• הצגת שכבת-העל 'מודעות שנבחרו' לנכסי קריאייטיב מותאמים למילוי חוסרים (backfill) עם הגבלה כרגע לקבוצה נבחרת של בעלי תוכן דיגיטלי

שכבת-על של 'מודעות שנבחרו'

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

הערה: AdChoices מוצגות עבור מודעות שנמכרו בצורה ישירה רק באזור הכלכלי האירופי (EEA).

שיוך (Attribution) של מודעות מותאמות פרוגרמטיות

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

קוד לדוגמה

כדי להציג מודעה מותאמת:

1. יצירת מופע של המחלקה NativeAdView.
2. לגבי כל נכס שמצורף למודעה:
   1. מאכלסים את תצוגת הנכס עם הנכס באובייקט המודעה.
   2. רושמים את תצוגת הנכס במחלקה ViewGroup.
3. רושמים את MediaView אם פריסת המודעות המותאמת כוללת נכס מדיה גדול.
4. רישום אובייקט המודעה במחלקה ViewGroup.

הנה פונקציה לדוגמה שמציגה NativeAd:

Java

private void displayNativeAd(ViewGroup parent, NativeAd ad) {

    // Inflate a layout and add it to the parent ViewGroup.
    LayoutInflater inflater = (LayoutInflater) parent.getContext()
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    NativeAdView adView = (NativeAdView) inflater
            .inflate(R.layout.ad_layout_file, parent);

    // Locate the view that will hold the headline, set its text, and call the
    // NativeAdView's setHeadlineView method to register it.
    TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline);
    headlineView.setText(ad.getHeadline());
    adView.setHeadlineView(headlineView);

    ...
    // Repeat the above process for the other assets in the NativeAd
    // using additional view objects (Buttons, ImageViews, etc).
    ...

    // If the app is using a MediaView, it should be
    // instantiated and passed to setMediaView. This view is a little different
    // in that the asset is populated automatically, so there's one less step.
    MediaView mediaView = (MediaView) adView.findViewById(R.id.ad_media);
    adView.setMediaView(mediaView);

    // Call the NativeAdView's setNativeAd method to register the
    // NativeAdObject.
    adView.setNativeAd(ad);

    // Ensure that the parent view doesn't already contain an ad view.
    parent.removeAllViews();

    // Place the AdView into the parent.
    parent.addView(adView);
}

Kotlin

fun displayNativeAd(parent: ViewGroup, ad: NativeAd) {

    // Inflate a layout and add it to the parent ViewGroup.
    val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
            as LayoutInflater
    val adView = inflater.inflate(R.layout.ad_layout_file, parent) as NativeAdView

    // Locate the view that will hold the headline, set its text, and use the
    // NativeAdView's headlineView property to register it.
    val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
    headlineView.text = ad.headline
    adView.headlineView = headlineView

    ...
    // Repeat the above process for the other assets in the NativeAd using
    // additional view objects (Buttons, ImageViews, etc).
    ...

    val mediaView = adView.findViewById<MediaView>(R.id.ad_media)
    adView.mediaView = mediaView

    // Call the NativeAdView's setNativeAd method to register the
    // NativeAdObject.
    adView.setNativeAd(ad)

    // Ensure that the parent view doesn't already contain an ad view.
    parent.removeAllViews()

    // Place the AdView into the parent.
    parent.addView(adView)
}

אלה המשימות הנפרדות:

1. הגדלת הפריסה

   Java

   LayoutInflater inflater = (LayoutInflater) parent.getContext()
           .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
   NativeAdView adView = (NativeAdView) inflater
           .inflate(R.layout.ad_layout_file, parent);
   

   Kotlin

   val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
           as LayoutInflater
   val adView = inflater.inflate(R.layout.ad_layout_file, parent) as NativeAdView
   

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

2. אכלוס ורישום של תצוגות הנכסים

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

   Java

   TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline);
   headlineView.setText(ad.getHeadline());
   adView.setHeadlineView(headlineView);
   

   Kotlin

   val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
   headlineView.text = ad.headline
   adView.headlineView = headlineView
   

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

3. קליקים על כינוי

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

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

   הנה דוגמה שמשתמשת בכלי להאזנה למודעות כדי לצפות באירועי קליקים:

   Java

   AdLoader adLoader = new AdLoader.Builder(context, "/6499/example/native")
       ...
       .withAdListener(new AdListener() {
           @Override
           public void onAdFailedToLoad(LoadAdError adError) {
               // Handle the failure by logging, altering the UI, and so on.
           }
           @Override
           public void onAdClicked() {
               // Log the click event or other custom behavior.
           }
       })
       .build();
   

   Kotlin

   val adLoader = AdLoader.Builder(this, "/6499/example/native")
       ...
       .withAdListener(object : AdListener() {
           override fun onAdFailedToLoad(adError: LoadAdError) {
               // Handle the failure by logging, altering the UI, and so on.
           }
       })
       .build()
   

4. רישום ה-MediaView

   אם רוצים לכלול נכס תמונה ראשי בפריסה של המודעה המותאמת צריך להשתמש בנכס MediaView במקום בנכס ImageView.

   MediaView הוא View מיוחד שמיועד להציג את נכס המדיה הראשי, וידאו או תמונה.

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

   Java

   MediaView mediaView = adView.findViewById(R.id.ad_media);
   adView.setMediaView(mediaView);
   

   Kotlin

   adView.mediaView = adView.findViewById<MediaView>(R.id.ad_media)
   

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

   Java

   mediaView.setMediaContent(nativeAd.getMediaContent());
   

   Kotlin

   mediaView.mediaContent = nativeAd.mediaContent
   

   ImageScaleType

   למחלקה MediaView יש מאפיין ImageScaleType בהצגת תמונות. אם רוצים לשנות את גודל התמונה ב-MediaView, צריך להגדיר את ImageView.ScaleType המתאים באמצעות השיטה setImageScaleType() של MediaView:

   Java

   mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
   

   Kotlin

   mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
   

   MediaContent

   המחלקה MediaContent מכילה את הנתונים שקשורים לתוכן המדיה של המודעה המותאמת, שמוצג באמצעות המחלקה MediaView. כשהנכס MediaView mediaContent מוגדר עם מופע של MediaContent:

   • אם נכס וידאו זמין, הוא נשמר במאגר נתונים זמני ומתחיל לפעול בתוך MediaView. אפשר לדעת אם נכס וידאו זמין באמצעות hasVideoContent().

   • אם אין במודעה נכס וידאו, המערכת תוריד את הנכס mainImage ותציב אותו בתוך MediaView.

   כברירת מחדל, נכס התמונות הראשון שהורד הוא mainImage. אם נעשה שימוש ב-setReturnUrlsForImageAssets(true), הערך mainImage הוא null וצריך להגדיר את המאפיין mainImage כתמונה שהורדתם באופן ידני. שימו לב שייעשה שימוש בתמונה הזו רק כאשר אין נכס וידאו זמין.

5. רישום אובייקט המודעה המותאמת

   בשלב האחרון, נרשום את אובייקט המודעה המותאמת ואת התצוגה שאחראית להצגתו:

   Java

   adView.setNativeAd(ad);
   

   Kotlin

   adView.setNativeAd(ad)
   

השמדת מודעה

כשתסיימו להציג את המודעה המותאמת, עליכם להשמיד אותה כדי שהמודעה תאסוף כראוי את האשפה.

Java

nativeAd.destroy();
        .inflate(R.layout.ad_layout_file, parent);

Kotlin

nativeAd.destroy()

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

מודעות במכירה ישירה

כדי לבדוק איך הן מודעות מותאמות שנמכרות ישירות, תוכלו להשתמש במזהה הבא של יחידת המודעות ב-Ad Manager:

/6499/example/native

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

• כותרת (טקסט)
• KeywordImage (image)
• כיתוב (טקסט)

מזהה התבנית של מודעות מותאמות אישית בפורמט 10063170.

מודעות מותאמות למילוי חוסרים (backfill)

המילוי החוזר של Ad Exchange מוגבל כרגע לקבוצה נבחרת של בעלי אפליקציות. כדי לבדוק את ההתנהגות של מודעות מותאמות למילוי חוזר, השתמשו ביחידת המודעות הבאה מ-Ad Manager:

/6499/example/native-backfill

היא מציגה דוגמאות של מודעות להתקנת אפליקציה ומודעות תוכן שכוללות את שכבת-העל 'מודעות שנבחרו'.

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

דוגמאות ב-GitHub

דוגמה להטמעה מלאה של מודעות מותאמות:

Java קוטלין

השלבים הבאים

נסו את הנושאים הבאים:

• פרטיות המשתמשים
• אופטימיזציה של אתחול ה-SDK וטעינת המודעות (בטא)