โฆษณาเนทีฟใน Display

เมื่อโฆษณาเนทีฟโหลด แอปจะได้รับออบเจ็กต์โฆษณาที่มีชิ้นงานโฆษณา เช่น รูปภาพ ข้อความ และวิดีโอของโฆษณา แอปของคุณมีหน้าที่แสดงชิ้นงานโฆษณาในเลย์เอาต์มุมมองโฆษณาเนทีฟ 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 ให้รวมคอมโพเนนต์ชิ้นงานแต่ละรายการด้วย Wrapper NativeAdView.Asset และระบุประเภทชิ้นงานโดยใช้ออบเจ็กต์ NativeAdAssetNames Wrapper 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

เมื่อโฆษณาละเว้นชิ้นงานที่ไม่บังคับ แอปของคุณต้องไม่แสดงองค์ประกอบ UI ที่ว่างเปล่า

แสดงเนื้อหาสื่อ

คอมโพเนนต์ 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 ที่ใช้ได้มีดังนี้

รอเหตุการณ์โฆษณา

หากต้องการรับการแจ้งเตือนเกี่ยวกับเหตุการณ์ในวงจรของโฆษณา เช่น การแสดงผลหรือการคลิก ให้ส่ง Callback ของเหตุการณ์ไปยังคอมโพเนนต์ NativeAdView ดู Callback ทั้งหมดที่ใช้ได้ที่ AdEventCallback

ตัวอย่างต่อไปนี้จะส่งผ่าน Callback ของเหตุการณ์สำหรับเหตุการณ์โฆษณา เช่น การแสดงหรือการปิดเนื้อหาแบบเต็มหน้าจอ ไปยังคอมโพเนนต์ 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>
  );
}