تبلیغات بومی

وقتی یک تبلیغ بومی بارگذاری می‌شود، 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>

جت‌پک آهنگسازی

ماژول JetpackComposeDemo/compose-util را که شامل کمک‌کننده‌هایی برای نوشتن NativeAdView و فایل‌های آن است، اضافه کنید.

با استفاده از ماژول compose-util ، یک 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.
        }
    }

تبلیغات بومی بارگذاری شده را مدیریت کنید

وقتی یک تبلیغ بومی بارگذاری می‌شود، رویداد فراخوانی را مدیریت کنید، نمای تبلیغ بومی را باد کنید و آن را به سلسله مراتب نما اضافه کنید:

کاتلین

// Build an ad request with native ad options to customize the ad.
val adTypes = listOf(NativeAd.NativeAdType.NATIVE)
val adRequest = NativeAdRequest
  .Builder("ca-app-pub-3940256099942544/2247696110", 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)

جاوا

// 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("ca-app-pub-3940256099942544/2247696110", 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

نمایش تبلیغ بومی

مثال زیر نحوه نمایش یک تبلیغ بومی را نشان می‌دهد:

کاتلین

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
}

جاوا

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

یک پوشش AdChoices توسط SDK به هر نمای تبلیغ اضافه می‌شود. در گوشه دلخواه خود از نمای تبلیغ بومی، فضایی را برای لوگوی AdChoices که به طور خودکار درج می‌شود، در نظر بگیرید. همچنین، مهم است که پوشش AdChoices به راحتی دیده شود، بنابراین رنگ‌ها و تصاویر پس‌زمینه را به طور مناسب انتخاب کنید. برای اطلاعات بیشتر در مورد ظاهر و عملکرد پوشش، به توضیحات فیلد تبلیغات بومی مراجعه کنید.

انتساب تبلیغ

برای اینکه مشخص شود این نمایش یک تبلیغ است، باید نسبت تبلیغ را نمایش دهید. برای اطلاعات بیشتر به دستورالعمل‌های خط‌مشی ما مراجعه کنید.

مدیریت کلیک‌ها

هیچ کنترل‌کننده کلیک سفارشی را روی هیچ نمایی، چه در داخل و چه در نمای تبلیغات بومی، پیاده‌سازی نکنید. کلیک‌ها روی دارایی‌های نمای تبلیغات توسط SDK مدیریت می‌شوند، مادامی که نماهای دارایی را به درستی پر و ثبت کنید.

برای گوش دادن به کلیک‌ها، فراخوانی کلیک GMA Next Gen SDK را پیاده‌سازی کنید:

کاتلین

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

جاوا

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

نوع مقیاس تصویر

کلاس MediaView هنگام نمایش تصاویر دارای یک ویژگی ImageScaleType است. اگر می‌خواهید نحوه‌ی مقیاس‌بندی یک تصویر را در MediaView تغییر دهید، ImageView.ScaleType مربوطه را با استفاده از متد setImageScaleType() از MediaView تنظیم کنید:

کاتلین

nativeAdViewBinding.mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP

جاوا

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

محتوای رسانه‌ای

کلاس MediaContent داده‌های مربوط به محتوای رسانه‌ای تبلیغ بومی را که با استفاده از کلاس MediaView نمایش داده می‌شود، در خود نگه می‌دارد. وقتی ویژگی mediaContent MediaView با یک نمونه MediaContent تنظیم می‌شود:

  • اگر یک فایل ویدیویی موجود باشد، بافر شده و درون MediaView شروع به پخش می‌کند. می‌توانید با بررسی hasVideoContent() متوجه شوید که آیا یک فایل ویدیویی موجود است یا خیر.

  • اگر تبلیغ حاوی فایل ویدیویی نباشد، فایل mainImage دانلود شده و در داخل MediaView قرار می‌گیرد.

از بین بردن یک تبلیغ

بعد از اینکه یک تبلیغ بومی نمایش دادید، آن را از بین ببرید. مثال زیر یک تبلیغ بومی را از بین می‌برد:

کاتلین

nativeAd.destroy()

جاوا

nativeAd.destroy();

مراحل بعدی

مباحث زیر را بررسی کنید:

مثال

برنامه‌ی نمونه‌ای که نحوه‌ی استفاده از GMA Next Gen SDK را نشان می‌دهد، دانلود و اجرا کنید.