Thiết lập quảng cáo biểu ngữ

Chọn nền tảng: Android iOS Unity Flutter React Native Android (Cũ)

Quảng cáo biểu ngữ chiếm một vị trí cố định trong bố cục của ứng dụng, chẳng hạn như ở đầu hoặc cuối màn hình thiết bị. Những quảng cáo này vẫn hiển thị trên màn hình trong khi người dùng tương tác với ứng dụng của bạn và làm mới sau một khoảng thời gian mà bạn đặt. Biểu ngữ thích ứng cố định sử dụng kích thước quảng cáo cho mỗi thiết bị bằng cách sử dụng chiều rộng quảng cáo mà bạn chỉ định.

Trang này trình bày cách tích hợp quảng cáo biểu ngữ thích ứng cố định vào ứng dụng React Native.

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

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

• Thiết lập Google Mobile Ads SDK for React Native.
• Bật quảng cáo thử nghiệm và sử dụng mã đơn vị quảng cáo thử nghiệm sau:

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

Lấy kích thước quảng cáo

Để yêu cầu quảng cáo biểu ngữ thích ứng cố định, hãy gọi phương thức AdSize.getLargeAnchoredAdaptiveBannerAdSize bằng chiều rộng vùng chứa quảng cáo hiện có tính theo pixel không phụ thuộc vào mật độ (dp). Phương thức này trả về một lời hứa sẽ phân giải thành đối tượng AdSize.

Ví dụ sau đây lấy và trả về kích thước quảng cáo cho một quảng cáo biểu ngữ thích ứng cố định:

export async function getAdaptiveAdSize(width: number): Promise<AdSize> {
  const adSize = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(width);
  return adSize;
}

Tải một quảng cáo

Sau khi bạn nhận được đối tượng AdSize, hãy gọi phương thức load trên lớp BannerAd bằng mã đơn vị quảng cáo và kích thước quảng cáo của bạn.

Ví dụ sau đây tải một quảng cáo biểu ngữ neo thích ứng có kích thước quảng cáo và mã đơn vị quảng cáo, nhận thực thể BannerAd đã tải khi thành công và ghi lại lỗi khi không thành công:

export function loadBannerAd(
  adUnitId: string,
  adSize: AdSize,
  callback?: BannerAdLoadCallback,
): void {
  BannerAd.load(
    {adUnitId, adSize},
    {
      // Called when an ad has finished loading.
      onAdLoaded: (ad) => {
        console.log('Banner ad loaded successfully.');
        callback?.onAdLoaded?.(ad);
      },
      // Called when an ad request fails.
      onAdFailedToLoad: (error: LoadAdError) => {
        console.error('Failed to load banner ad:', error.message);
        callback?.onAdFailedToLoad?.(error);
      },
    },
  );
}

Làm mới quảng cáo

Nếu đã định cấu hình đơn vị quảng cáo để làm mới, thì bạn không cần phải yêu cầu một quảng cáo khác khi quảng cáo không tải được. Google Mobile Ads SDK for React Native tuân thủ mọi tốc độ làm mới mà bạn đã chỉ định trong giao diện người dùng AdMob. Nếu bạn chưa bật tính năng làm mới, hãy đưa ra yêu cầu mới. Để biết thêm thông tin về việc làm mới đơn vị quảng cáo, chẳng hạn như cách đặt tốc độ làm mới, hãy xem bài viết Sử dụng tính năng tự động làm mới cho quảng cáo Biểu ngữ.

Lưu ý: Khi bạn đặt tốc độ làm mới trong giao diện người dùng AdMob, quá trình tự động làm mới chỉ diễn ra nếu biểu ngữ hiển thị trên màn hình.

Hiển thị quảng cáo biểu ngữ

Để hiển thị một thực thể BannerAd đã tải, hãy truyền thực thể quảng cáo đến thuộc tính ad của thành phần BannerAdView trong hệ phân cấp view.

Ví dụ sau đây cho thấy một quảng cáo và huỷ quảng cáo đó khi thành phần này bị huỷ:

export function BannerAdViewComponent({ad}: {ad: BannerAd}): React.JSX.Element {
  useEffect(() => {
    // Destroy native resources when the component unmounts.
    return () => {
      ad.destroy();
    };
  }, [ad]);

  return <BannerAdView ad={ad} />;
}

Ví dụ này gọi phương thức destroy khi thành phần này bị huỷ hoặc khi thực thể quảng cáo được thay thế. Quá trình này giải phóng bộ nhớ và tài nguyên mà quảng cáo sử dụng.

Điểm mấu chốt: Bạn chịu trách nhiệm định vị chế độ xem quảng cáo biểu ngữ trong bố cục theo kiểu của ứng dụng, ví dụ: neo quảng cáo vào đầu hoặc cuối màn hình. Để xem ví dụ đầy đủ, hãy xem phần Xem ví dụ đầy đủ.

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

Để theo dõi các sự kiện quảng cáo, chẳng hạn như lượt hiển thị quảng cáo và lượt nhấp, hãy đặt lệnh gọi lại trên thành phần BannerAdView. Để biết tất cả lệnh gọi lại, hãy xem BannerAdViewProps.

Ví dụ sau đây đặt lệnh gọi lại để theo dõi các sự kiện quảng cáo biểu ngữ:

export function BannerEventsExample({ad}: {ad: BannerAd}): React.JSX.Element {
  return (
    <BannerAdView
      ad={ad}
      // Called when an impression is recorded for an ad.
      onAdImpression={() => {
        console.log('Banner ad recorded an impression.');
      }}
      // Called when a click is recorded for an ad.
      onAdClicked={() => {
        console.log('Banner ad clicked.');
      }}
      // Called when the ad opens an in-app overlay or landing page.
      onAdShowedFullScreenContent={() => {
        console.log('Banner ad opened overlay content.');
      }}
      // Called when the user dismisses the ad overlay.
      onAdDismissedFullScreenContent={() => {
        console.log('Banner ad overlay dismissed.');
      }}
      // Called when the ad is estimated to have earned money.
      onAdPaid={(adValue) => {
        console.log(
          `Banner ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
        );
      }}
      // Called when the ad automatically refreshes.
      onAdRefreshed={() => {
        console.log('Banner ad refreshed.');
      }}
      // Called when the ad fails to automatically refresh.
      onAdFailedToRefresh={(error) => {
        console.error('Banner ad failed to refresh:', error.message);
      }}
    />
  );
}

Ví dụ này theo dõi các sự kiện quảng cáo, chẳng hạn như lượt đóng quảng cáo, lượt hiển thị, lượt nhấp, bản trình bày toàn màn hình, doanh thu ước tính từ quảng cáo, cũng như lượt làm mới thành công và không thành công.

Xem ví dụ đầy đủ

Phần này trình bày ví dụ đầy đủ về cách tích hợp quảng cáo biểu ngữ vào một thành phần React Native.

Ví dụ sau đây tích hợp quảng cáo biểu ngữ vào một thành phần React Native và quản lý thực thể quảng cáo ở trạng thái:

export function BannerScreen() {
  const {width} = useWindowDimensions();
  const insets = useSafeAreaInsets();
  const [ad, setAd] = useState<BannerAd | null>(null);
  const [status, setStatus] = useState('Idle');

  useEffect(() => {
    return () => {
      ad?.destroy();
    };
  }, [ad]);

  const handleLoadAd = async () => {
    setStatus('Loading adaptive banner ad...');
    try {
      const adaptiveSize = await getAdaptiveAdSize(width);
      loadBannerAd(BANNER_AD_UNIT_ID, adaptiveSize, {
        onAdLoaded: (loadedAd) => {
          setAd(loadedAd);
          setStatus('Banner ad loaded successfully.');
        },
        onAdFailedToLoad: (error: LoadAdError) => {
          setStatus(`Failed to load banner ad: ${error.message}`);
        },
      });
    } catch (error) {
      setStatus(`Failed to get adaptive ad size: ${error}`);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Anchored Adaptive Banner Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <View style={styles.buttonGroup}>
        <Button title="Load Banner Ad" onPress={handleLoadAd} />
      </View>
      {ad ? (
        <View style={[styles.bannerContainer, {bottom: insets.bottom}]}>
          <BannerAdView
            ad={ad}
            onAdImpression={() => setStatus('Banner ad recorded impression.')}
            onAdClicked={() => setStatus('Banner ad clicked.')}
            onAdShowedFullScreenContent={() =>
              setStatus('Banner ad showed overlay content.')
            }
            onAdDismissedFullScreenContent={() =>
              setStatus('Banner ad overlay dismissed.')
            }
          />
        </View>
      ) : null}
    </View>
  );
}

Thay thế BANNER_AD_UNIT_ID bằng mã đơn vị quảng cáo của bạn.

Các bước tiếp theo

Sau khi tích hợp quảng cáo biểu ngữ, hãy khám phá các chủ đề sau:

• Doanh thu từ quảng cáo ở cấp lượt hiển thị
• Quyền riêng tư và sự đồng ý của người dùng