Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

Hiển thị quảng cáo gốc

Khi quảng cáo gốc tải, ứng dụng của bạn sẽ nhận được một đối tượng quảng cáo chứa các thành phần quảng cáo, chẳng hạn như hình ảnh, văn bản và video của quảng cáo. Ứng dụng của bạn chịu trách nhiệm hiển thị các thành phần quảng cáo trong bố cục chế độ xem quảng cáo gốc. Để hiển thị quảng cáo gốc theo cách tuân thủ, Google Mobile Ads SDK for React Native cung cấp các thành phần sau:

Để biết thông tin chi tiết về cách hiển thị quảng cáo gốc theo đúng quy định, hãy xem bài viết Quảng cáo gốc sử dụng quảng cáo gốc nâng cao.

Trang này trình bày cách hiển thị thành phần quảng cáo gốc, định cấu hình nội dung nghe nhìn và xử lý các sự kiện quảng cáo bằng Google Mobile Ads SDK for React Native.

Điều kiện tiên quyết

Trước khi tiếp tục, hãy làm như sau:

Xác định thành phần chế độ xem quảng cáo gốc

Thành phần NativeAdView là vùng chứa cấp cao nhất cho bố cục quảng cáo gốc. Thành phần này gói tất cả các chế độ xem thành phần riêng lẻ và liên kết các chế độ xem thành phần với thực thể NativeAd đã tải.

Việc gói các thành phần trong thành phần NativeAdView sẽ thực hiện những việc sau:

Ghi lại lượt hiển thị khi quảng cáo xuất hiện trên màn hình.
Ghi lại lượt nhấp và xử lý thao tác điều hướng khi người dùng nhấn vào thành phần tương tác.
Hiển thị và đặt vị trí cho lớp phủ Lựa chọn quảng cáo.

Thuộc tính quảng cáo và Lựa chọn quảng cáo

Thuộc tính quảng cáo và lớp phủ Lựa chọn quảng cáo là các yêu cầu theo chính sách bắt buộc đối với tất cả các cách triển khai quảng cáo gốc của Google.

Khi bạn gói bố cục trong NativeAdView, Google Mobile Ads SDK for React Native sẽ tự động hiển thị biểu tượng Lựa chọn quảng cáo ở góc trên cùng bên phải của chế độ xem quảng cáo theo mặc định. Bạn không cần thêm mã tuỳ chỉnh hoặc thành phần hiển thị thành phần để biểu tượng xuất hiện.

Để tuỳ chỉnh vị trí góc của biểu tượng, hãy xem phần Đặt các tính năng gốc nâng cao.

Điền sẵn và đăng ký thành phần hiển thị tài sản

Để đăng ký chế độ xem thành phần bằng Google Mobile Ads SDK for React Native, hãy gói từng thành phần bằng một trình bao bọc NativeAdView.Asset và chỉ định loại thành phần bằng đối tượng NativeAdAssetNames. Mỗi trình bao bọc NativeAdView.Asset phải chứa một phần tử lưu trữ React Native duy nhất, chẳng hạn như Text, Image hoặc View, chấp nhận thuộc tính nativeID. Để biết thông tin chi tiết về các thuộc tính tài sản hiện có, hãy xem Lớp NativeAd.

Bảng sau đây liệt kê các loại thành phần hiện có, thuộc tính mục tiêu và ví dụ về cách đăng ký chế độ xem thành phần:

Loại thành phần	Nội dung mô tả và ví dụ
`ADVERTISER`	Tài sản mục tiêu: `NativeAd.advertiser` {/* The advertiser or sponsor name (optional). */} {ad.advertiser && ( <NativeAdView.Asset type={NativeAdAssetNames.ADVERTISER}> <Text>{ad.advertiser}</Text> </NativeAdView.Asset> )}
`BODY`	Tài sản mục tiêu: `NativeAd.body` {/* Detailed description text (optional). */} {ad.body && ( <NativeAdView.Asset type={NativeAdAssetNames.BODY}> <Text>{ad.body}</Text> </NativeAdView.Asset> )}
`CALL_TO_ACTION`	Tài sản mục tiêu: `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`	Tài sản mục tiêu: `NativeAd.headline` {/* The main title of the ad (required). */} <NativeAdView.Asset type={NativeAdAssetNames.HEADLINE}> <Text>{ad.headline}</Text> </NativeAdView.Asset>
`ICON`	Tài sản mục tiêu: `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`	Tài sản mục tiêu: `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`	Tài sản mục tiêu: `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`	Tài sản mục tiêu: `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> )}

Luôn hiển thị có điều kiện các chế độ xem thành phần không bắt buộc sau đây:

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

Khi quảng cáo bỏ qua các thành phần không bắt buộc, ứng dụng của bạn không được hiển thị các phần tử giao diện người dùng trống.

Hiển thị nội dung nghe nhìn

Thành phần NativeAdMediaView hiển thị thành phần hình ảnh của quảng cáo, chẳng hạn như video và hình ảnh. Nếu quảng cáo chứa nội dung video, thì chế độ xem nội dung nghe nhìn sẽ lưu vào vùng đệm và phát video. Nếu quảng cáo chỉ chứa nội dung hình ảnh, thì chế độ xem nội dung nghe nhìn sẽ hiển thị hình ảnh chính.

Áp dụng chế độ đổi kích thước nội dung nghe nhìn

Để kiểm soát cách điều chỉnh tỷ lệ hình ảnh trong vùng chứa chế độ xem nội dung nghe nhìn, hãy áp dụng thuộc tính resizeMode trên thành phần NativeAdMediaView:

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

Các giá trị ResizeMode có thể sử dụng bao gồm:

Đặt tỷ lệ khung hình của nội dung nghe nhìn

Để yêu cầu mẫu quảng cáo khớp với tỷ lệ khung hình của bố cục chế độ xem nội dung nghe nhìn, hãy chỉ định thuộc tính aspectRatio trên thực thể NativeAdRequest.

Ví dụ sau đây yêu cầu một quảng cáo gốc có tỷ lệ khung hình ngang, trả về quảng cáo đã tải khi thành công và ghi lại thông báo lỗi khi không thành công:

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

Các giá trị NativeMediaAspectRatio có thể sử dụng bao gồm:

Theo dõi các sự kiện quảng cáo

Để nhận thông báo về các sự kiện trong vòng đời của quảng cáo, chẳng hạn như lượt hiển thị hoặc lượt nhấp, hãy truyền lệnh gọi lại sự kiện đến thành phần NativeAdView. Để biết tất cả các lệnh gọi lại hiện có, hãy xem AdEventCallback.

Ví dụ sau đây truyền lệnh gọi lại sự kiện cho các sự kiện quảng cáo (chẳng hạn như hiển thị hoặc đóng nội dung toàn màn hình) đến thành phần 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}`,
        );
      }}
    />
  );
}

Xem ví dụ đầy đủ

Phần này trình bày ví dụ hoàn chỉnh về cách tạo thành phần thẻ quảng cáo gốc có thể sử dụng lại.

Ví dụ sau đây xác định thành phần NativeAdCard, hiển thị huy hiệu thuộc tính quảng cáo, hiển thị và đăng ký có điều kiện các thành phần quảng cáo gốc riêng lẻ, đồng thời hiển thị nội dung nghe nhìn bằng thành phần 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>
  );
}

Hiển thị quảng cáo gốc Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.