بومی پیشرفته

نمایش NativeAd

وقتی یک تبلیغ بومی بارگیری می‌شود، 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>
         <!--Add remaining assets such as the image and media view.-->
    </LinearLayout>
</com.google.android.gms.ads.nativead.NativeAdView>

در اینجا یک مثال است که یک NativeAdView ایجاد می کند و آن را با یک NativeAd پر می کند:

کاتلین

val builder = AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
    .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 assets 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)
    }

جاوا

AdLoader.Builder builder = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
    .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 assets into the ad view.
            populateNativeAdView(nativeAd, adView);
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        }
});

توجه داشته باشید که همه دارایی‌های یک آگهی بومی معین باید در طرح NativeAdView ارائه شوند. وقتی دارایی‌های بومی خارج از طرح‌بندی نمای تبلیغاتی بومی ارائه می‌شوند، Google Mobile Ads SDK سعی می‌کند هشداری را ثبت کند.

کلاس‌های ad view همچنین روش‌هایی را ارائه می‌دهند که برای ثبت نمای مورد استفاده برای هر دارایی جداگانه و یکی برای ثبت خود شی NativeAd استفاده می‌شوند. ثبت نماها به این روش به SDK اجازه می دهد تا به طور خودکار وظایفی مانند:

  • ضبط کلیک ها
  • ضبط برداشت زمانی که اولین پیکسل روی صفحه قابل مشاهده است
  • نمایش همپوشانی AdChoices

همپوشانی AdChoices

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

انتساب آگهی

شما باید یک انتساب آگهی را نمایش دهید تا نشان دهد که این نما یک تبلیغ است. در دستورالعمل های خط مشی ما بیشتر بیاموزید.

نمونه کد

این مراحل برای نمایش یک آگهی بومی است:

  1. یک نمونه از کلاس NativeAdView ایجاد کنید.
  2. برای هر دارایی تبلیغاتی که باید نمایش داده شود:

    1. نمای دارایی را با دارایی موجود در شیء تبلیغ پر کنید.
    2. نمای دارایی را با کلاس NativeAdView ثبت کنید.
  3. اگر طرح‌بندی تبلیغات بومی شما دارای دارایی رسانه بزرگ است، MediaView را ثبت کنید.

  4. شیء تبلیغ را با کلاس NativeAdView ثبت کنید.

در اینجا یک تابع مثال است که NativeAd را نمایش می دهد:

کاتلین

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 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)
}

جاوا

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 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);
}

در اینجا وظایف فردی وجود دارد:

  1. طرح را باد کنید

    کاتلین

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

    جاوا

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

    این کد یک طرح بندی XML را که حاوی نماهایی برای نمایش یک آگهی بومی است و سپس مکان مرجعی به NativeAdView را افزایش می دهد. توجه داشته باشید که اگر NativeAdView استفاده کنید، یا حتی یک نمونه را به صورت پویا بدون استفاده از فایل طرح‌بندی ایجاد کنید.

  2. نماهای دارایی را پر و ثبت کنید

    این کد نمونه، نمای مورد استفاده برای نمایش عنوان را تعیین می کند، متن آن را با استفاده از دارایی رشته ارائه شده توسط شی آگهی تنظیم می کند و آن را با شی NativeAdView ثبت می کند:

    جاوا

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

    کاتلین

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

    این فرآیند مکان یابی نما، تنظیم مقدار آن، و ثبت آن در کلاس نمای تبلیغاتی باید برای هر یک از دارایی های ارائه شده توسط شی تبلیغاتی بومی که برنامه نمایش می دهد تکرار شود.

  3. رسیدگی به کلیک ها

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

    برای گوش دادن به کلیک‌ها، پاسخ تماس کلیکی Google Mobile Ads SDK را اجرا کنید:

    کاتلین

    val adLoader = AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
        // ...
        .withAdListener(object : AdListener() {
            override fun onAdFailedToLoad(adError: LoadAdError) {
                // Handle the failure.
            }
            override fun onAdClicked() {
                // Log the click event or other custom behavior.
            }
        })
        .build()
    

    جاوا

    AdLoader adLoader = new AdLoader.Builder(context, "ca-app-pub-3940256099942544/2247696110")
        // ...
        .withAdListener(new AdListener() {
            @Override
            public void onAdFailedToLoad(LoadAdError adError) {
                // Handle the failure by logging.
            }
            @Override
            public void onAdClicked() {
                // Log the click event or other custom behavior.
            }
        })
        .build();
    
  4. MediaView را ثبت کنید

    اگر می‌خواهید یک دارایی تصویر اصلی را در طرح‌بندی آگهی بومی خود بگنجانید، باید از دارایی MediaView به جای دارایی ImageView استفاده کنید.

    MediaView یک View ویژه است که برای نمایش دارایی رسانه اصلی، ویدیو یا تصویر طراحی شده است.

    MediaView می توان در یک طرح XML تعریف کرد یا به صورت پویا ساخته شد. باید در سلسله مراتب view یک NativeAdView قرار گیرد، درست مانند هر نمای دارایی دیگر. برنامه هایی که از MediaView استفاده می کنند باید آن را در NativeAdView ثبت کنند:

    کاتلین

     // Inform the Google Mobile Ads SDK that you have finished populating
     // the native ad views with this native ad.
     nativeAdView.registerNativeAd(nativeAd, nativeAdBinding.adMedia)
    

    جاوا

     // Inform the Google Mobile Ads SDK that you have finished populating
     // the native ad views with this native ad.
     nativeAdView.registerNativeAd(nativeAd, nativeAdBinding.adMedia);
    

    ImageScaleType

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

    کاتلین

    mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
    

    جاوا

    mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
    

    MediaContent

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

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

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

    به طور پیش فرض، mainImage اولین دارایی تصویر دانلود شده است. اگر setReturnUrlsForImageAssets(true) استفاده شود، mainImage null است و باید ویژگی mainImage روی تصویر دانلود شده دستی خود تنظیم کنید. توجه داشته باشید که این تصویر تنها زمانی استفاده خواهد شد که هیچ دارایی ویدیویی در دسترس نباشد.

  5. شیء تبلیغاتی بومی را ثبت کنید

    این مرحله نهایی، شیء تبلیغاتی بومی را با نمایی که مسئول نمایش آن است، ثبت می‌کند:

    کاتلین

    adView.setNativeAd(ad)
    

    جاوا

    adView.setNativeAd(ad);
    

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

پس از اتمام نمایش آگهی بومی خود، باید آن را از بین ببرید تا آگهی به درستی زباله جمع آوری شود.

کاتلین

nativeAd.destroy()

جاوا

nativeAd.destroy();

نمونه هایی در GitHub

مثال اجرای کامل تبلیغات بومی:

جاوا کاتلین

مراحل بعدی

موضوعات زیر را بررسی کنید: