Thiết lập quảng cáo xen kẽ

Quảng cáo xen kẽ là quảng cáo toàn màn hình xuất hiện tại các điểm chuyển tiếp trong ứng dụng, chẳng hạn như giữa các màn hình hoặc trong thời gian tạm dừng giữa các cấp độ của trò chơi. Người dùng có thể nhấn vào quảng cáo để truy cập vào đích đến hoặc đóng quảng cáo và quay lại ứng dụng. Để biết thông tin chi tiết, hãy xem Hướng dẫn về quảng cáo xen kẽ và nghiên cứu điển hình.

Để loại bỏ độ trễ khi hiển thị và đảm bảo quảng cáo có sẵn khi quá trình chuyển đổi diễn ra, Google Mobile Ads SDK for React Native sử dụng tính năng tải trước quảng cáo để quản lý việc tải trong nền, lưu vào bộ nhớ đệm và bổ sung vùng đệm.

Hướng dẫn này trình bày cách tích hợp quảng cáo xen kẽ 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:

Android 

ca-app-pub-3940256099942544/1033173712

iOS 

ca-app-pub-3940256099942544/4411468910

Tìm hiểu về tính năng tải trước quảng cáo

Tính năng tải trước quảng cáo trong Google Mobile Ads SDK for React Native tự động hoá việc tải quảng cáo và lưu vào bộ nhớ đệm.

Tính năng tải trước quảng cáo mang lại những lợi ích sau:

  • Quản lý tệp đối chiếu: duy trì tệp đối chiếu cho đến khi quảng cáo xuất hiện.
  • Tự động tải lại: tải một quảng cáo mới khi một quảng cáo được truy xuất từ bộ nhớ đệm.
  • Lần thử lại được quản lý: tải một quảng cáo mới khi không tải được quảng cáo.
  • Xử lý thời hạn: làm mới quảng cáo trước khi hết hạn.
  • Tối ưu hoá bộ nhớ đệm: tối ưu hoá thứ tự bộ nhớ đệm để phân phối quảng cáo có mức độ ưu tiên cao nhất.

Để tải quảng cáo theo cách thủ công, hãy xem hướng dẫn Tải một quảng cáo xen kẽ.

Bắt đầu tải trước

Để bắt đầu tải trước quảng cáo, hãy gọi phương thức InterstitialAdPreloader.start rồi truyền giá trị preloadId, chế độ cài đặt cấu hình và lệnh gọi lại sự kiện để theo dõi các thay đổi về trạng thái vùng đệm:

export function startPreloader(
  adUnitId: string,
  preloadId: string,
  customPreloadCallback?: PreloadCallback,
): boolean {
  try {
    const started = InterstitialAdPreloader.start(
      preloadId,
      {
        request: {adUnitId},
        bufferSize: 2,
      },
      {
        // Called when an ad is preloaded into the buffer.
        onAdPreloaded: (metadata) => {
          console.log(`Interstitial ad preloaded for ${metadata.preloadId}`);
          customPreloadCallback?.onAdPreloaded?.(metadata);
        },
        // Called when an ad fails to preload.
        onAdFailedToPreload: (error: LoadAdError) => {
          console.error('Failed to preload interstitial ad:', error.message);
          customPreloadCallback?.onAdFailedToPreload?.(error);
        },
        // Called when all preloaded ads in the buffer have been shown.
        onAdsExhausted: () => {
          console.log('Preload buffer exhausted for interstitial ads.');
          customPreloadCallback?.onAdsExhausted?.();
        },
      },
    );
    return started;
  } catch (error) {
    console.error('Error starting interstitial ad preloader:', error);
    return false;
  }
}

Mã tải trước là một chuỗi giúp xác định riêng biệt một cấu hình tải trước quảng cáo. Nếu bạn sử dụng mã đơn vị quảng cáo cho một cấu hình tải trước duy nhất trong ứng dụng, hãy sử dụng mã đơn vị quảng cáo đó làm mã tải trước. Nếu ứng dụng của bạn yêu cầu nhiều trình tải trước cho cùng một mã đơn vị quảng cáo, hãy truyền các chuỗi riêng biệt cho mỗi mã tải trước.

Khi ứng dụng của bạn thăm dò một quảng cáo được tải trước từ vùng đệm, Google Mobile Ads SDK for React Native sẽ yêu cầu một quảng cáo thay thế ở chế độ nền để lấp đầy vùng đệm. Nếu không còn quảng cáo tải trước nào trong vùng đệm, Google Mobile Ads SDK for React Native sẽ gọi lệnh gọi lại onAdsExhausted.

Giới hạn bộ nhớ đệm tải trước

Google Mobile Ads SDK for React Native thực thi giới hạn trên toàn ứng dụng đối với tổng số quảng cáo được tải trước trên tất cả đơn vị quảng cáo và mã tải trước:

  • Giới hạn mặc định: Google lưu giữ tối đa 6 quảng cáo được tải trước trong bộ nhớ. Giới hạn này được áp dụng cho tất cả định dạng và mã tải trước.
  • Bộ đệm được đề xuất: Hai quảng cáo được tải trước cho mỗi mã tải trước.

Nếu ứng dụng của bạn đạt đến giới hạn trên toàn ứng dụng, thì các yêu cầu trong nền cho quảng cáo được tải trước sẽ tạm dừng cho đến khi các quảng cáo hiện có được thăm dò ý kiến từ bộ nhớ đệm hoặc bị huỷ. Quá trình tải trước cũng tạm dừng trong khi quảng cáo toàn màn hình đang hiển thị trên màn hình.

Thăm dò ý kiến và hiển thị quảng cáo

Trước khi hiển thị quảng cáo, hãy xác minh rằng quảng cáo có sẵn bằng cách gọi phương thức InterstitialAdPreloader.isAdAvailable. Để truy xuất quảng cáo, hãy gọi phương thức InterstitialAdPreloader.pollAd.

Để theo dõi các sự kiện trình bày, chẳng hạn như quảng cáo bị đóng hoặc không hiển thị, hãy đặt thuộc tính adEventCallback trên thực thể quảng cáo trước khi gọi phương thức show.

Ví dụ sau đây kiểm tra xem quảng cáo có sẵn hay không và theo dõi các sự kiện trình bày toàn màn hình trước khi hiển thị quảng cáo:

export function showPreloadedAd(
  preloadId: string,
  customAdEventCallback?: FullScreenAdEventCallback,
) {
  if (InterstitialAdPreloader.isAdAvailable(preloadId)) {
    const ad = InterstitialAdPreloader.pollAd(preloadId);
    if (ad) {
      ad.adEventCallback = {
        // Called when the ad is presented on screen.
        onAdShowedFullScreenContent: () => {
          console.log('Preloaded interstitial ad showed full screen content.');
          customAdEventCallback?.onAdShowedFullScreenContent?.();
        },
        // Called when the ad is closed by the user.
        onAdDismissedFullScreenContent: () => {
          console.log('Preloaded interstitial ad dismissed.');
          customAdEventCallback?.onAdDismissedFullScreenContent?.();
          ad.destroy();
        },
        // Called when presentation fails.
        onAdFailedToShowFullScreenContent: (error) => {
          console.error('Preloaded interstitial ad failed to show:', error);
          customAdEventCallback?.onAdFailedToShowFullScreenContent?.(error);
          ad.destroy();
        },
        // Called when an impression is recorded.
        onAdImpression: () => {
          console.log('Preloaded interstitial ad recorded an impression.');
          customAdEventCallback?.onAdImpression?.();
        },
        // Called when the user taps the ad.
        onAdClicked: () => {
          console.log('Preloaded interstitial ad was clicked.');
          customAdEventCallback?.onAdClicked?.();
        },
        // Called when the ad is estimated to have earned money.
        onAdPaid: (adValue) => {
          console.log(
            `Preloaded interstitial ad paid: ${adValue.amountMicros}` +
              ` ${adValue.currencyCode}`,
          );
          customAdEventCallback?.onAdPaid?.(adValue);
        },
      };
      ad.show();
    }
  } else {
    console.log('No preloaded interstitial ad available in buffer.');
  }
}

Để giải phóng bộ nhớ và tài nguyên, hãy gọi phương thức ad.destroy trong lệnh gọi lại onAdDismissedFullScreenContent và onAdFailedToShowFullScreenContent.

Đọc thông tin phản hồi

Để kiểm tra thông tin phản hồi cho quảng cáo được tải trước tiếp theo mà không xoá quảng cáo khỏi bộ nhớ đệm, hãy gọi phương thức InterstitialAdPreloader.peekAdResponseInfo:

export function peekPreloadedAdResponseInfo(preloadId: string) {
  if (InterstitialAdPreloader.isAdAvailable(preloadId)) {
    const responseInfo = InterstitialAdPreloader.peekAdResponseInfo(preloadId);
    if (responseInfo) {
      console.log('Next preloaded ad response info:', responseInfo);
    }
  }
}

Nếu có quảng cáo, phương thức peekAdResponseInfo sẽ trả về một đối tượng ResponseInfo chứa thông tin về nguồn quảng cáo đã tải và bộ chuyển đổi mạng.

Dọn dẹp tài nguyên

Nếu bạn không cần hiển thị quảng cáo cho một mã tải trước cụ thể trong phần còn lại của phiên, hãy gọi phương thức InterstitialAdPreloader.destroy. Quá trình này sẽ dừng tải trước cho mã tải trước đó và giải phóng quảng cáo tải trước không dùng đến khỏi bộ nhớ.

Ví dụ sau đây sẽ dừng tải trước:

export function destroyPreloader(preloadId: string) {
  InterstitialAdPreloader.destroy(preloadId);
}

Sau khi người dùng đóng quảng cáo hoặc quảng cáo không hiển thị, hãy huỷ các thực thể quảng cáo được thăm dò riêng lẻ. Để biết thông tin chi tiết, hãy xem phần Thăm dò ý kiến và hiển thị quảng cáo.

Xem ví dụ đầy đủ

Thành phần ví dụ sau đây bắt đầu tải trước khi gắn, theo dõi số lượng quảng cáo có sẵn và cung cấp các chế độ kiểm soát để hiển thị quảng cáo xen kẽ được tải trước:

export function InterstitialScreen() {
  const [numAdsAvailable, setNumAdsAvailable] = useState<number>(0);
  const [status, setStatus] = useState<string>('Initializing Preloader...');

  const refreshAdCount = () => {
    const count = InterstitialAdPreloader.getNumAdsAvailable(PRELOAD_ID);
    setNumAdsAvailable(count);
  };

  useEffect(() => {
    // Start preloading interstitial ads on component mount
    startPreloader(INTERSTITIAL_AD_UNIT_ID, PRELOAD_ID, {
      onAdPreloaded: () => {
        refreshAdCount();
        setStatus('Ad preloaded and ready!');
      },
      onAdFailedToPreload: (error) => {
        setStatus(`Preload failed: ${error.message}`);
      },
      onAdsExhausted: () => {
        refreshAdCount();
        setStatus('Preload buffer exhausted.');
      },
    });
    setStatus('Preloader started.');

    // Clean up preloader resources on component unmount
    return () => {
      destroyPreloader(PRELOAD_ID);
    };
  }, []);

  const handleShow = () => {
    showPreloadedAd(PRELOAD_ID, {
      onAdDismissedFullScreenContent: () => {
        setStatus('Ad dismissed.');
      },
      onAdFailedToShowFullScreenContent: (error) => {
        setStatus(`Failed to show ad: ${error.message}`);
      },
    });
    setStatus('Showing preloaded ad...');
    refreshAdCount();
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Preload Interstitial Ads</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <Text style={styles.status}>Ads Available: {numAdsAvailable}</Text>
      <View style={styles.buttonGroup}>
        <Button
          title="Show Preloaded Ad"
          onPress={handleShow}
          disabled={numAdsAvailable === 0}
        />
      </View>
    </View>
  );
}

Thay thế nội dung sau:

  • INTERSTITIAL_AD_UNIT_ID bằng mã đơn vị quảng cáo của bạn.
  • PRELOAD_ID bằng mã trình tải trước của bạn.

Các bước tiếp theo

Sau khi bạn tích hợp quảng cáo xen kẽ, hãy khám phá các chủ đề sau: