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

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

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

הגדרת המחלקה NativeAdView

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

פריסת XML

מוסיפים לפרויקט קובץ XML מסוג NativeAdView:

<com.google.android.libraries.ads.mobile.sdk.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>
        <!--Add remaining assets such as the image and media view.-->
    </LinearLayout>
</com.google.android.libraries.ads.mobile.sdk.nativead.NativeAdView>

Jetpack פיתוח נייטיב

  1. כוללים את התיקייה JetpackCompose Utilities. התיקייה הזו כוללת כלים שיעזרו לכם ליצור את האובייקט והנכסים של NativeAdView.

כתיבת NativeAdView:

  import com.google.android.gms.compose_util.NativeAdAttribution
  import com.google.android.gms.compose_util.NativeAdView

  @Composable
  /** Display a native ad with a user defined template. */
  fun DisplayNativeAdView(nativeAd: NativeAd) {
      NativeAdView {
          // Display the ad attribution.
          NativeAdAttribution(text = context.getString("Ad"))
          // Add remaining assets such as the image and media view.
        }
    }

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

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

Kotlin

// Build an ad request with native ad options to customize the ad.
val adTypes = listOf(NativeAd.NativeAdType.NATIVE)
val adRequest = NativeAdRequest
  .Builder("/21775744923/example/native", adTypes)
  .build()

val adCallback =
  object : NativeAdLoaderCallback {
    override fun onNativeAdLoaded(nativeAd: NativeAd) {
      activity?.runOnUiThread {

        val nativeAdBinding = NativeAdBinding.inflate(layoutInflater)
        val adView = nativeAdBinding.root
        val frameLayout = myActivityLayout.nativeAdPlaceholder

        // Populate and register the native ad asset views.
        displayNativeAd(nativeAd, nativeAdBinding)

        // Remove all old ad views and add the new native ad
        // view to the view hierarchy.
        frameLayout.removeAllViews()
        frameLayout.addView(adView)
      }
    }
  }

// Load the native ad with our request and callback.
NativeAdLoader.load(adRequest, adCallback)

Java

// Build an ad request with native ad options to customize the ad.
List<NativeAd.NativeAdType> adTypes = Arrays.asList(NativeAd.NativeAdType.NATIVE);
NativeAdRequest adRequest = new NativeAdRequest
                                .Builder("/21775744923/example/native", adTypes)
                                .build();

NativeAdLoaderCallback adCallback = new NativeAdLoaderCallback() {
    @Override
    public void onNativeAdLoaded(NativeAd nativeAd) {
      if (getActivity() != null) {
        getActivity()
          .runOnUiThread(() -> {
            // Inflate the native ad view and add it to the view hierarchy.
            NativeAdBinding nativeAdBinding = NativeAdBinding.inflate(getLayoutInflater());
            NativeAdView adView = (NativeAdView) nativeAdBinding.getRoot();
            FrameLayout frameLayout = myActivityLayout.nativeAdPlaceholder;

            // Populate and register the native ad asset views.
            displayNativeAd(nativeAd, nativeAdBinding);

            // Remove all old ad views and add the new native ad
            // view to the view hierarchy.
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        });
      }
    }
};

// Load the native ad with our request and callback.
NativeAdLoader.load(adRequest, adCallback);

חשוב לזכור שכל הנכסים של מודעה מותאמת מסוימת צריכים להופיע בתוך הפריסה של NativeAdView. GMA Next-Gen SDK מנסה לתעד אזהרה כשנכסים של מודעות מותאמות מוצגים מחוץ לפריסה של תצוגת המודעה המותאמת.

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

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

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

בדוגמה הבאה אפשר לראות איך מציגים מודעה מותאמת:

Kotlin

private fun displayNativeAd(nativeAd: NativeAd, nativeAdBinding : NativeAdBinding) {
  // Set the native ad view elements.
  val nativeAdView = nativeAdBinding.root
  nativeAdView.advertiserView = nativeAdBinding.adAdvertiser
  nativeAdView.bodyView = nativeAdBinding.adBody
  nativeAdView.callToActionView = nativeAdBinding.adCallToAction
  nativeAdView.headlineView = nativeAdBinding.adHeadline
  nativeAdView.iconView = nativeAdBinding.adAppIcon
  nativeAdView.priceView = nativeAdBinding.adPrice
  nativeAdView.starRatingView = nativeAdBinding.adStars
  nativeAdView.storeView = nativeAdBinding.adStore

  // Set the view element with the native ad assets.
  nativeAdBinding.adAdvertiser.text = nativeAd.advertiser
  nativeAdBinding.adBody.text = nativeAd.body
  nativeAdBinding.adCallToAction.text = nativeAd.callToAction
  nativeAdBinding.adHeadline.text = nativeAd.headline
  nativeAdBinding.adAppIcon.setImageDrawable(nativeAd.icon?.drawable)
  nativeAdBinding.adPrice.text = nativeAd.price
  nativeAd.starRating?.toFloat().let { value ->
    nativeAdBinding.adStars.rating = value
  }
  nativeAdBinding.adStore.text = nativeAd.store

  // Hide views for assets that don't have data.
  nativeAdBinding.adAdvertiser.visibility = getAssetViewVisibility(nativeAd.advertiser)
  nativeAdBinding.adBody.visibility = getAssetViewVisibility(nativeAd.body)
  nativeAdBinding.adCallToAction.visibility = getAssetViewVisibility(nativeAd.callToAction)
  nativeAdBinding.adHeadline.visibility = getAssetViewVisibility(nativeAd.headline)
  nativeAdBinding.adAppIcon.visibility = getAssetViewVisibility(nativeAd.icon)
  nativeAdBinding.adPrice.visibility = getAssetViewVisibility(nativeAd.price)
  nativeAdBinding.adStars.visibility = getAssetViewVisibility(nativeAd.starRating)
  nativeAdBinding.adStore.visibility = getAssetViewVisibility(nativeAd.store)

  // Inform GMA Next-Gen SDK that you have finished populating
  // the native ad views with this native ad.
  nativeAdView.registerNativeAd(nativeAd, nativeAdBinding.adMedia)
}

/**
* Determines the visibility of an asset view based on the presence of its asset.
*
* @param asset The native ad asset to check for nullability.
* @return [View.VISIBLE] if the asset is not null, [View.INVISIBLE] otherwise.
*/
private fun getAssetViewVisibility(asset: Any?): Int {
  return if (asset == null) View.INVISIBLE else View.VISIBLE
}

Java

private void displayNativeAd(ad: NativeAd, nativeAdBinding : NativeAdBinding) {
  // Set the native ad view elements.
  NativeAdView nativeAdView = nativeAdBinding.getRoot();
  nativeAdView.setAdvertiserView(nativeAdBinding.adAdvertiser);
  nativeAdView.setBodyView(nativeAdBinding.adBody);
  nativeAdView.setCallToActionView(nativeAdBinding.adCallToAction);
  nativeAdView.setHeadlineView(nativeAdBinding.adHeadline);
  nativeAdView.setIconView(nativeAdBinding.adAppIcon);
  nativeAdView.setPriceView(nativeAdBinding.adPrice);
  nativeAdView.setStarRatingView(nativeAdBinding.adStars);
  nativeAdView.setStoreView(nativeAdBinding.adStore);

  // Set the view element with the native ad assets.
  nativeAdBinding.adAdvertiser.setText(nativeAd.getAdvertiser());
  nativeAdBinding.adBody.setText(nativeAd.getBody());
  nativeAdBinding.adCallToAction.setText(nativeAd.getCallToAction());
  nativeAdBinding.adHeadline.setText(nativeAd.getHeadline());
  if (nativeAd.getIcon() != null) {
      nativeAdBinding.adAppIcon.setImageDrawable(nativeAd.getIcon().getDrawable());
  }
  nativeAdBinding.adPrice.setText(nativeAd.getPrice());
  if (nativeAd.getStarRating() != null) {
      nativeAdBinding.adStars.setRating(nativeAd.getStarRating().floatValue());
  }
  nativeAdBinding.adStore.setText(nativeAd.getStore());

  // Hide views for assets that don't have data.
  nativeAdBinding.adAdvertiser.setVisibility(getAssetViewVisibility(nativeAd.getAdvertiser()));
  nativeAdBinding.adBody.setVisibility(getAssetViewVisibility(nativeAd.getBody()));
  nativeAdBinding.adCallToAction.setVisibility(getAssetViewVisibility(nativeAd.getCallToAction()));
  nativeAdBinding.adHeadline.setVisibility(getAssetViewVisibility(nativeAd.getHeadline()));
  nativeAdBinding.adAppIcon.setVisibility(getAssetViewVisibility(nativeAd.getIcon()));
  nativeAdBinding.adPrice.setVisibility(getAssetViewVisibility(nativeAd.getPrice()));
  nativeAdBinding.adStars.setVisibility(getAssetViewVisibility(nativeAd.getStarRating()));
  nativeAdBinding.adStore.setVisibility(getAssetViewVisibility(nativeAd.getStore()));

  // Inform GMA Next-Gen SDK that you have finished populating
  // the native ad views with this native ad.
  nativeAdView.registerNativeAd(nativeAd, nativeAdBinding.adMedia);
}

/**
* Determines the visibility of an asset view based on the presence of its asset.
*
* @param asset The native ad asset to check for nullability.
* @return {@link View#VISIBLE} if the asset is not null, {@link View#INVISIBLE} otherwise.
*/
private int getAssetViewVisibility(Object asset) {
    return (asset == null) ? View.INVISIBLE : View.VISIBLE;
}

שכבת-על של AdChoices

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

סימן למודעה במודעות מותאמות פרוגרמטיות

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

טיפול בקליקים

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

כדי להאזין לקליקים, מטמיעים את פונקציית ה-callback של GMA Next-Gen SDK:

Kotlin

private fun setEventCallback(nativeAd: NativeAd) {
  nativeAd.adEventCallback =
    object : NativeAdEventCallback {
      override fun onAdClicked() {
        Log.d(Constant.TAG, "Native ad recorded a click.")
      }
    }
}

Java

private void setEventCallback(NativeAd nativeAd) {
  nativeAd.setAdEventCallback(new NativeAdEventCallback() {
      @Override
      public void onAdClicked() {
        Log.d(Constant.TAG, "Native ad recorded a click.");
      }
  });
}

ImageScaleType

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

Kotlin

nativeAdViewBinding.mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP

Java

nativeAdViewBinding.mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);

MediaContent

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

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

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

הוספת סיכום יצירתי

באפליקציות של צ'אט מבוסס-AI ושיחות, GMA Next-Gen SDK מספק נכס סיכום קריאייטיב (creativeSummary) לקריאייטיב של המודעה. אתם יכולים לשלב מודעות בתהליכי הצ'אט של האפליקציה באמצעות הודעת פתיחה.

הוספת תצוגת הטקסט לפריסה

מוסיפים TextView לנכס של סיכום הקריאייטיב בתוך פריסת מאגר התגים של NativeAdView:

<TextView
    android:id="@+id/ad_creative_summary"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="13sp" />

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

מאכלסים את TextView ב-creativeSummary ורושמים אותו במאפיין creativeSummaryView באובייקט NativeAdView. רישום התצוגה מאפשר מעקב אוטומטי אחרי קליקים בנכס הסיכום של הקריאייטיב.

Kotlin

private fun populateCreativeSummary(
  nativeAd: NativeAd,
  nativeAdBinding: NativeAdBinding,
  nativeAdView: NativeAdView,
) {
  val summary = nativeAd.creativeSummary
  if (summary == null) {
    nativeAdBinding.adCreativeSummary.visibility = View.GONE
    return
  }

  nativeAdBinding.adCreativeSummary.text = summary
  nativeAdBinding.adCreativeSummary.visibility = View.VISIBLE
  nativeAdView.creativeSummaryView = nativeAdBinding.adCreativeSummary
}

Java

private void populateCreativeSummary(
    NativeAd nativeAd, NativeAdBinding nativeAdBinding, NativeAdView nativeAdView) {
  String summary = nativeAd.getCreativeSummary();
  if (summary == null) {
    nativeAdBinding.adCreativeSummary.setVisibility(View.GONE);
    return;
  }

  nativeAdBinding.adCreativeSummary.setText(summary);
  nativeAdBinding.adCreativeSummary.setVisibility(View.VISIBLE);
  nativeAdView.setCreativeSummaryView(nativeAdBinding.adCreativeSummary);
}

מעקב אחר קליקים וטקסט שונה

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

השמדת מודעה

אחרי שמציגים מודעה מותאמת, צריך להשמיד אותה. בדוגמה הבאה מוצג איך להשמיד מודעה מותאמת:

Kotlin

nativeAd.destroy()

Java

nativeAd.destroy();

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

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

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

/21775744923/example/native

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

  • כותרת (טקסט)
  • MainImage (תמונה)
  • כיתוב (טקסט)

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

מודעות מילוי מותאמות

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

/21775744923/example/native-backfill

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

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

השלבים הבאים

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

דוגמה

מורידים את האפליקציה לדוגמה שמדגימה את השימוש ב-GMA Next-Gen SDK ומפעילים אותה.