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.

Tải một quảng cáo khi mở ứng dụng

Quảng cáo khi mở ứng dụng xuất hiện khi người dùng mở hoặc quay lại ứng dụng của bạn. Người dùng có thể đóng quảng cáo khi mở ứng dụng bất cứ lúc nào. Để kiếm tiền từ màn hình tải của ứng dụng, hãy sử dụng quảng cáo khi mở ứng dụng. Để biết thông tin chi tiết, hãy xem

Hướng dẫn và các phương pháp hay nhất về quảng cáo khi mở ứng dụng.

Hướng dẫn này giải thích cách tích hợp quảng cáo khi mở ứng dụng vào một ứ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 đơn vị quảng cáo thử nghiệm sau:

Android

ca-app-pub-3940256099942544/9257395921

iOS

ca-app-pub-3940256099942544/5575463023

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

Để tải quảng cáo khi mở ứng dụng, hãy gọi phương thức load.

Ví dụ sau đây tải quảng cáo khi mở ứng dụng khi thành công và ghi lại lỗi khi không thành công:

export async function loadAppOpenAd(
  adUnitId: string,
): Promise<AppOpenAd | null> {
  try {
    const ad = await AppOpenAd.load({adUnitId});
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load app open ad:', loadError.message);
    return null;
  }
}

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

Trước khi hiển thị quảng cáo, hãy đặt trình nghe adEventCallback trên thực thể AppOpenAd đã tải. Trình nghe này nhận lệnh gọi lại của các sự kiện trong vòng đời quảng cáo, chẳng hạn như quảng cáo hiển thị trên màn hình hoặc người dùng nhấn vào quảng cáo. Để biết các lệnh gọi lại hiện có, hãy xem AdEventCallback.

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

export function registerAdEvents(ad: AppOpenAd) {
  ad.adEventCallback = {
    // Called when the ad is presented on screen.
    onAdShowedFullScreenContent: () => {
      console.log('App open ad showed full screen content.');
    },
    // Called when the ad is closed by the user.
    onAdDismissedFullScreenContent: () => {
      console.log('App open ad dismissed full screen content.');
      ad.destroy();
    },
    // Called when presentation fails.
    onAdFailedToShowFullScreenContent: (error) => {
      console.error('Failed to show app open ad:', error);
      ad.destroy();
    },
    // Called when an impression is recorded.
    onAdImpression: () => {
      console.log('App open ad recorded an impression.');
    },
    // Called when the user taps the ad.
    onAdClicked: () => {
      console.log('App open ad was clicked.');
    },
    // Called when the ad is estimated to have earned money.
    onAdPaid: (adValue) => {
      console.log(
        `App open ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
      );
    },
  };
}

Ví dụ này cũng sử dụng phương thức destroy khi người dùng đóng quảng cáo hoặc khi quảng cáo không hiển thị. Quá trình này giải phóng tài nguyên mà quảng cáo đã sử dụng.

Hiển thị quảng cáo

Để hiển thị quảng cáo khi mở ứng dụng, hãy gọi phương thức show:

export function showAppOpenAd(ad: AppOpenAd) {
  ad.show();
}

Quản lý quảng cáo bằng trình quản lý cấp ứng dụng

Bạn nên quản lý quảng cáo khi mở ứng dụng trong trình quản lý cấp ứng dụng bên ngoài cây thành phần React. Vì quảng cáo khi mở ứng dụng xuất hiện trên toàn cầu khi người dùng mở hoặc quay lại ứng dụng của bạn, nên trình quản lý cấp ứng dụng sẽ tách riêng quảng cáo khỏi giao diện người dùng.

Ví dụ sau đây tạo một thực thể SingleLoadAppOpenAdManager tải quảng cáo, theo dõi các sự kiện quảng cáo và kiểm tra xem có quảng cáo hay không:

export class SingleLoadAppOpenAdManager {
  private ad: AppOpenAd | null = null;
  private loadTime = 0;
  private isShowingAd = false;

  async loadAd(adUnitId: string) {
    // Avoid re-loading if an ad is already loaded or showing.
    if (this.ad) {
      return;
    }
    try {
      this.ad = await AppOpenAd.load({adUnitId});
      this.loadTime = Date.now();
      this.ad.adEventCallback = {
        onAdDismissedFullScreenContent: () => {
          this.ad?.destroy();
          this.ad = null;
          this.isShowingAd = false;
          // Preload the next ad for future foreground transitions.
          this.loadAd(adUnitId);
        },
        onAdFailedToShowFullScreenContent: () => {
          // An ad object that fails to present is consumed and cannot be reused.
          // Clean up native resources and preload a new ad for future events.
          this.ad?.destroy();
          this.ad = null;
          this.isShowingAd = false;
          this.loadAd(adUnitId);
        },
      };
    } catch (error) {
      console.error('Failed to load app open ad:', error);
    }
  }

  showAdIfAvailable() {
    if (!this.ad || !this.isAdAvailable()) {
      console.warn(
        'App open ad cannot be shown: ad is not loaded or has expired.',
      );
      return;
    }
    if (this.isShowingAd) {
      console.warn('App open ad cannot be shown: an ad is already displaying.');
      return;
    }

    this.ad.show();
    this.isShowingAd = true;
  }

  isAdAvailable(): boolean {
    // App Open ads expire after 4 hours per Google Mobile Ads policy.
    const FOUR_HOURS_IN_MS = 4 * 60 * 60 * 1000;
    return this.ad !== null && Date.now() - this.loadTime < FOUR_HOURS_IN_MS;
  }
}

Người quản lý cấp ứng dụng giúp bạn làm những việc sau:

Giữ trạng thái quảng cáo độc lập với hoạt động điều hướng trên màn hình và vòng đời của thành phần.
Theo dõi trạng thái hiển thị quảng cáo trên các sự kiện luồng gốc.
Xử lý các chuyển đổi trên nền trước của ứng dụng để tránh hiển thị quảng cáo lặp lại.
Tải trước quảng cáo ở chế độ nền để quảng cáo sẵn sàng khi ứng dụng của bạn mở.
Kiểm tra giới hạn thời gian hết hạn của quảng cáo là 4 giờ để tránh hiển thị quảng cáo đã hết hạn.
Kết hợp việc tải, hiển thị và dọn dẹp tài nguyên quảng cáo.

Theo dõi các sự kiện đưa ứng dụng lên nền trước

Để hiển thị quảng cáo khi ứng dụng của bạn quay lại nền trước, hãy sử dụng mô-đun AppState để theo dõi các thay đổi về trạng thái ứng dụng ở thư mục gốc của ứng dụng, ví dụ: trong tệp App.tsx. Hãy thực hiện như sau:

Đăng ký trình nghe AppState cho sự kiện 'change'.
Khi trạng thái chuyển sang trạng thái 'active', hãy gọi phương thức showAdIfAvailable trên thực thể trình quản lý quảng cáo.

Ví dụ sau đây theo dõi các sự kiện đưa ứng dụng lên nền trước và hiển thị quảng cáo nếu có:

export function setupAppOpenAdForegroundListener(adManager: {
  showAdIfAvailable: () => void;
}): NativeEventSubscription {
  return AppState.addEventListener('change', (nextAppState: AppStateStatus) => {
    if (nextAppState === 'active') {
      adManager.showAdIfAvailable();
    }
  });
}

Tìm hiểu về khởi động nguội và màn hình tải

Quá trình khởi động nguội xảy ra khi ứng dụng của bạn khởi chạy từ đầu, chẳng hạn như khi người dùng mở ứng dụng lần đầu tiên hoặc sau khi thiết bị đóng ứng dụng để giải phóng bộ nhớ. Trong trường hợp khởi động nguội, bạn không có quảng cáo khi mở ứng dụng đã tải trước đó để hiển thị tiếp theo.

Do yêu cầu quảng cáo bị chậm trễ, người dùng có thể tương tác với ứng dụng của bạn trước khi quảng cáo xuất hiện. Để tránh mang lại trải nghiệm kém cho người dùng, hãy chỉ hiển thị quảng cáo khi mở ứng dụng vào lúc khởi động nguội trên màn hình tải trong khi các thành phần ứng dụng tải. Nếu các thành phần đã tải xong và người dùng truy cập vào nội dung chính trước khi quảng cáo tải, thì đừng hiển thị quảng cáo.

Thiết lập màn hình kiểm thử

Để thử nghiệm quảng cáo một cách tương tác hoặc hiển thị quảng cáo trên một màn hình cụ thể, hãy quản lý thực thể quảng cáo ở trạng thái thành phần.

Ví dụ sau đây tích hợp quảng cáo khi mở ứng dụng vào một thành phần React Native bằng hook dọn dẹp useEffect. Nếu thành phần này bị ngắt kết nối trước khi quảng cáo xuất hiện, thì hook này sẽ giải phóng tài nguyên gốc.

export function AppOpenSingleLoadScreen() {
  const [ad, setAd] = useState<AppOpenAd | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [status, setStatus] = useState<string>('Idle');

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

  const handleLoad = async () => {
    setStatus('Loading App Open ad...');
    const loadedAd = await loadAppOpenAd(APP_OPEN_AD_UNIT_ID);
    if (loadedAd) {
      registerAdEvents(loadedAd);
      const onDismiss =
        loadedAd.adEventCallback?.onAdDismissedFullScreenContent;
      loadedAd.adEventCallback = {
        ...loadedAd.adEventCallback,
        onAdDismissedFullScreenContent: () => {
          onDismiss?.();
          setStatus('Ad dismissed.');
        },
      };
      setAd((prevAd) => {
        prevAd?.destroy();
        return loadedAd;
      });
      setIsLoaded(true);
      setStatus('App Open ad loaded!');
    } else {
      setStatus('Failed to load App Open ad.');
    }
  };

  const handleShow = () => {
    if (ad) {
      showAppOpenAd(ad);
      setIsLoaded(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>App Open Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <View style={styles.buttonGroup}>
        <Button title="Load Ad" onPress={handleLoad} />
        <View style={styles.spacerSmall} />
        <Button title="Show Ad" onPress={handleShow} disabled={!isLoaded} />
      </View>
    </View>
  );
}

Các bước tiếp theo

Sau khi tích hợp quảng cáo khi mở ứng dụng, hãy khám phá các chủ đề sau:

Tải một quảng cáo khi mở ứng dụng 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.