نمایش آگهی‌های بومی

وقتی آگهی بومی بار می‌شود، برنامه شما شیء آگهی حاوی دارایی‌های آگهی، مثل تصاویر، نوشتار، و ویدیوهای آگهی را دریافت می‌کند. برنامه شما مسئول نمایش دارایی‌های آگهی در چیدمان نمای آگهی بومی است. برای نمایش آگهی‌های بومی به‌صورت منطبق، Google Mobile Ads SDK for React Native مؤلفه‌های زیر را ارائه می‌دهد:

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

این صفحه نحوه ارائه دارایی‌های آگهی بومی، پیکربندی محتوای رسانه‌ای، و مدیریت رویدادهای آگهی بااستفاده از Google Mobile Ads SDK for React Native را پوشش می‌دهد.

پیش‌نیازها

پیش‌از ادامه دادن، کارهای زیر را انجام دهید:

تعریف مؤلفه نمای آگهی بومی

مؤلفه NativeAdView محفظه سطح بالا برای چیدمان آگهی بومی شما است. این مؤلفه همه نماهای دارایی را دربرمی‌گیرد و نماهای دارایی را به نمونه NativeAd بارشده متصل می‌کند.

پیچیدن دارایی‌هایتان در مؤلفه NativeAdView کارهای زیر را انجام می‌دهد:

  • وقتی آگهی در صفحه نشان داده می‌شود، ظهورها را ثبت کنید.
  • وقتی کاربر روی دارایی‌های تعاملی تک‌ضرب می‌زند، کلیک‌ها را ثبت کنید و پیمایش را مدیریت کنید.
  • نمایش و جای‌گذاری هم‌پوشانی AdChoices.

اِسناد آگهی و AdChoices

اسناد آگهی و هم‌پوشانی AdChoices از الزامات خط‌مشی اجباری برای همه پیاده‌سازی‌های آگهی بومی Google هستند.

وقتی طرح‌بندی‌تان را در NativeAdView می‌پیچید، Google Mobile Ads SDK for React Native به‌طور خودکار نماد AdChoices را به‌طور پیش‌فرض در گوشه بالا سمت راست نمای آگهی ارائه می‌دهد. برای نمایش نماد، نیازی به افزودن کد سفارشی یا نماهای دارایی نیست.

برای سفارشی‌سازی کردن قرارگیری نماد در گوشه، تنظیم ویژگی‌های بومی پیشرفته را ببینید.

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

برای ثبت بازدیدهای دارایی با Google Mobile Ads SDK for React Native، هر مؤلفه دارایی را با یک NativeAdView.Asset پوشاننده بپوشانید و نوع دارایی را بااستفاده از شیء NativeAdAssetNames مشخص کنید. هر پوشاننده NativeAdView.Asset باید حاوی یک عنصر میزبان React Native باشد، مانند Text، Image، یا View، که ویژگی nativeID را می‌پذیرد. برای جزئیات درباره ویژگی‌های دارایی دردسترس، به کلاس NativeAd مراجعه کنید.

جدول زیر انواع دارایی‌های دردسترس، ویژگی‌های هدف، و نمونه‌هایی از ثبت نماهای دارایی را فهرست می‌کند:

نوع دارایی شرح و نمونه‌ها
ADVERTISER

دارایی هدف: NativeAd.advertiser

{/* The advertiser or sponsor name (optional). */}
{ad.advertiser && (
  <NativeAdView.Asset type={NativeAdAssetNames.ADVERTISER}>
    <Text>{ad.advertiser}</Text>
  </NativeAdView.Asset>
)}
BODY

دارایی هدف: NativeAd.body

{/* Detailed description text (optional). */}
{ad.body && (
  <NativeAdView.Asset type={NativeAdAssetNames.BODY}>
    <Text>{ad.body}</Text>
  </NativeAdView.Asset>
)}
CALL_TO_ACTION

دارایی هدف: NativeAd.callToAction

{/* Action button text such as "Install" or "Shop Now" (optional). */}
{ad.callToAction && (
  <NativeAdView.Asset type={NativeAdAssetNames.CALL_TO_ACTION}>
    <View>
      <Text>{ad.callToAction}</Text>
    </View>
  </NativeAdView.Asset>
)}
HEADLINE

دارایی هدف: NativeAd.headline

{/* The main title of the ad (required). */}
<NativeAdView.Asset type={NativeAdAssetNames.HEADLINE}>
  <Text>{ad.headline}</Text>
</NativeAdView.Asset>
ICON

دارایی هدف: NativeAd.icon

{/* The advertiser logo or app icon (optional). */}
{ad.icon && (
  <NativeAdView.Asset type={NativeAdAssetNames.ICON}>
    <Image source={{uri: ad.icon.uri}} />
  </NativeAdView.Asset>
)}
PRICE

دارایی هدف: NativeAd.price

{/* Price string for products or paid apps (optional). */}
{ad.price && (
  <NativeAdView.Asset type={NativeAdAssetNames.PRICE}>
    <Text>{ad.price}</Text>
  </NativeAdView.Asset>
)}
STAR_RATING

دارایی هدف: NativeAd.starRating

{/* App rating score from 0 to 5 (optional). */}
{ad.starRating !== undefined && ad.starRating > 0 && (
  <NativeAdView.Asset type={NativeAdAssetNames.STAR_RATING}>
    <Text>★ {ad.starRating.toFixed(1)}</Text>
  </NativeAdView.Asset>
)}
STORE

دارایی هدف: NativeAd.store

{/* App store source such as "Google Play" or "App Store" (optional). */}
{ad.store && (
  <NativeAdView.Asset type={NativeAdAssetNames.STORE}>
    <Text>{ad.store}</Text>
  </NativeAdView.Asset>
)}

همیشه نماهای دارایی اختیاری زیر را به‌صورت مشروط ارائه دهید:

  • ad.icon
  • ad.body
  • ad.advertiser
  • ad.price
  • ad.store
  • ad.starRating

وقتی آگهی دارایی‌های اختیاری را حذف می‌کند، برنامه‌تان نباید عناصر میانای کاربر خالی را نمایش دهد.

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

عنصر NativeAdMediaView دارایی بصری آگهی را ارائه می‌کند، مثل ویدیوها و تصاویر. اگر آگهی حاوی محتوای ویدیویی باشد، نمای رسانه میان‌گیری می‌کند و ویدیو را پخش می‌کند. اگر آگهی فقط حاوی محتوای تصویری باشد، نمای رسانه به‌جای آن تصویر اصلی را ارائه می‌دهد.

اعمال کردن حالت تغییر اندازه رسانه

برای کنترل نحوه مقیاس‌بندی تصاویر در محفظه نمای رسانه، ویژگی resizeMode را در مؤلفه NativeAdMediaView اعمال کنید:

      {/* Video or image media asset (optional). */}
      <NativeAdMediaView resizeMode={ResizeMode.COVER} />

مقادیر ResizeMode دردسترس شامل موارد زیر است:

تنظیم نسبت ابعادی رسانه

برای درخواست طرح‌آگهی‌هایی که با نسبت ابعادی چیدمان نمای رسانه شما مطابقت داشته باشند، ویژگی aspectRatio را در نمونه NativeAdRequest مشخص کنید.

مثال زیر آگهی بومی با نسبت ابعادی رسانه افقی درخواست می‌کند، درصورت موفقیت، آگهی بارشده را برمی‌گرداند و درصورت عدم موفقیت، پیام خطا ثبت می‌کند:

export async function loadNativeAdWithAspectRatio(
  adUnitId: string,
): Promise<NativeAd | null> {
  try {
    const ad = await NativeAd.load({
      adUnitId,
      aspectRatio: NativeMediaAspectRatio.LANDSCAPE,
    });
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load native ad:', loadError.message);
    return null;
  }
}

مقادیر NativeMediaAspectRatio دردسترس شامل موارد زیر است:

گوش دادن به رویدادهای آگهی

برای مطلع کردن شما از رویدادهای چرخه حیات آگهی، مثل ظهورها یا کلیک‌ها، فراخوان‌های رویداد را به مؤلفه NativeAdView ارسال کنید. برای همه تماس‌های برگشتی دردسترس، به AdEventCallback مراجعه کنید.

مثال زیر فراخوان‌های رویداد را برای رویدادهای آگهی، مانند نمایش یا رد کردن محتوای تمام‌صفحه، به مؤلفه NativeAdView ارسال می‌کند:

export function NativeAdWithEvents({ad}: {ad: NativeAd}) {
  return (
    <NativeAdView
      ad={ad}
      // Called when the user taps the ad.
      onAdClicked={() => {
        console.log('Native ad was clicked.');
      }}
      // Called when an impression is recorded.
      onAdImpression={() => {
        console.log('Native ad recorded an impression.');
      }}
      // Called when the ad presents full-screen content.
      onAdShowedFullScreenContent={() => {
        console.log('Native ad showed full screen content.');
      }}
      // Called when full-screen content is dismissed.
      onAdDismissedFullScreenContent={() => {
        console.log('Native ad dismissed full screen content.');
      }}
      // Called when the ad is estimated to have earned money.
      onAdPaid={(adValue: AdValue) => {
        console.log(
          `Native ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
        );
      }}
    />
  );
}

مشاهده مثال کامل

این بخش نمونه کامل ساختن مؤلفه کارت آگهی بومی قابل‌استفاده مجدد را پوشش می‌دهد.

مثال زیر عنصر NativeAdCard را تعریف می‌کند که نشان ارجاع آگهی را نمایش می‌دهد، دارایی‌های آگهی بومی را به‌صورت شرطی ارائه و ثبت می‌کند، و محتوای رسانه را با عنصر NativeAdMediaView ارائه می‌کند:

export function NativeAdCard({ad}: {ad: NativeAd}) {
  return (
    <NativeAdView ad={ad}>
      {/* 1. Ad Attribution Badge */}
      <View>
        <Text>Ad</Text>
      </View>

      {/* 2. Header: Icon, Headline, Advertiser, and Star Rating */}
      <View>
        {/* The advertiser logo or app icon (optional). */}
        {ad.icon && (
          <NativeAdView.Asset type={NativeAdAssetNames.ICON}>
            <Image source={{uri: ad.icon.uri}} />
          </NativeAdView.Asset>
        )}

        <View>
          {/* The main title of the ad (required). */}
          <NativeAdView.Asset type={NativeAdAssetNames.HEADLINE}>
            <Text>{ad.headline}</Text>
          </NativeAdView.Asset>

          {/* The advertiser or sponsor name (optional). */}
          {ad.advertiser && (
            <NativeAdView.Asset type={NativeAdAssetNames.ADVERTISER}>
              <Text>{ad.advertiser}</Text>
            </NativeAdView.Asset>
          )}

          {/* App rating score from 0 to 5 (optional). */}
          {ad.starRating !== undefined && ad.starRating > 0 && (
            <NativeAdView.Asset type={NativeAdAssetNames.STAR_RATING}>
              <Text>★ {ad.starRating.toFixed(1)}</Text>
            </NativeAdView.Asset>
          )}
        </View>
      </View>

      {/* 3. Media Content */}
      {/* Video or image media asset (optional). */}
      <NativeAdMediaView resizeMode={ResizeMode.COVER} />

      {/* 4. Body Text */}
      {/* Detailed description text (optional). */}
      {ad.body && (
        <NativeAdView.Asset type={NativeAdAssetNames.BODY}>
          <Text>{ad.body}</Text>
        </NativeAdView.Asset>
      )}

      {/* 5. Footer: Price, Store, and Call To Action */}
      <View>
        {/* Price string for products or paid apps (optional). */}
        {ad.price && (
          <NativeAdView.Asset type={NativeAdAssetNames.PRICE}>
            <Text>{ad.price}</Text>
          </NativeAdView.Asset>
        )}

        {/* App store source such as "Google Play" or "App Store" (optional). */}
        {ad.store && (
          <NativeAdView.Asset type={NativeAdAssetNames.STORE}>
            <Text>{ad.store}</Text>
          </NativeAdView.Asset>
        )}

        {/* Action button text such as "Install" or "Shop Now" (optional). */}
        {ad.callToAction && (
          <NativeAdView.Asset type={NativeAdAssetNames.CALL_TO_ACTION}>
            <View>
              <Text>{ad.callToAction}</Text>
            </View>
          </NativeAdView.Asset>
        )}
      </View>
    </NativeAdView>
  );
}