عرض الإعلانات المدمجة مع المحتوى

عند تحميل إعلان مدمج مع المحتوى، يتلقّى تطبيقك عنصر إعلان يحتوي على مواد عرض الإعلان، مثل صور الإعلان ونصوصه وفيديوهاته. يكون تطبيقك مسؤولاً عن عرض مواد عرض الإعلان في تنسيق عرض "الإعلان المدمج مع المحتوى". لعرض "الإعلانات المدمجة مع المحتوى" بشكل متوافق مع السياسات، يوفّر Google Mobile Ads SDK for React Native العناصر التالية:

للاطّلاع على تفاصيل حول عرض "الإعلانات المدمجة مع المحتوى" بشكل متوافق مع السياسات، يُرجى مراجعة "الإعلانات المدمجة مع المحتوى" التي تستخدم الشكل "إعلان مدمج مع المحتوى (متقدم)".

تتناول هذه الصفحة كيفية عرض مواد عرض "الإعلانات المدمجة مع المحتوى" وضبط محتوى الوسائط والتعامل مع أحداث الإعلانات باستخدام Google Mobile Ads SDK for React Native.

المتطلبات الأساسية

قبل المتابعة، عليك تنفيذ ما يلي:

تحديد مكوّن عرض "الإعلان المدمج مع المحتوى"

مكوّن NativeAdView هو الحاوية ذات المستوى الأعلى لتنسيق "الإعلان المدمج مع المحتوى". يُغلِّف هذا المكوّن جميع طرق عرض مواد العرض الفردية ويربط طرق عرض مواد العرض بمثيل NativeAd الذي تم تحميله.

يؤدي تضمين مواد العرض في المكوّن NativeAdView إلى ما يلي:

  • تسجيل مرّات الظهور عندما يظهر الإعلان على الشاشة
  • تسجيل النقرات والتعامل مع التنقّل عندما ينقر المستخدم على مواد العرض التفاعلية
  • عرض تراكب "خيارات الإعلان" وتحديد موضعه

التصنيف كإعلان و"خيارات الإعلان"

يُعدّ التصنيف كإعلان وتراكب "خيارات الإعلان" من متطلبات السياسات الإلزامية لجميع عمليات تنفيذ "الإعلانات المدمجة مع المحتوى" من Google.

عند تضمين التنسيق في NativeAdView، يعرض Google Mobile Ads SDK for React Native تلقائيًا رمز "خيارات الإعلان" في أعلى يسار عرض الإعلان بشكل تلقائي. ولست بحاجة إلى إضافة رمز مخصّص أو طرق عرض لمواد العرض حتى يظهر الرمز.

لتخصيص موضع الرمز في الزاوية، يُرجى الاطّلاع على ضبط الميزات المتقدّمة للإعلانات المدمجة مع المحتوى.

تعبئة طرق عرض مواد العرض وتسجيلها

لتسجيل مشاهدات مواد العرض باستخدام 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 مادة العرض المرئية للإعلان، مثل الفيديوهات والصور. إذا كان الإعلان يحتوي على محتوى فيديو، يتم تخزين عرض الوسائط مؤقتًا وتشغيل الفيديو. إذا كان الإعلان يحتوي على محتوى صور فقط، يعرض MediaView الصورة الأساسية بدلاً من ذلك.

تطبيق وضع تغيير حجم الوسائط

للتحكّم في كيفية تغيير حجم الصور في حاوية عرض الوسائط، طبِّق السمة 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>
  );
}