Thiết lập 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:

Android 

ca-app-pub-3940256099942544/9257395921

iOS 

ca-app-pub-3940256099942544/5575463023

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 khi mở ứng dụng.

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 AppOpenAdPreloader.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 startAppOpenAdPreloader(
  adUnitId: string,
  preloadId: string,
  customPreloadCallback?: PreloadCallback,
): boolean {
  const started = AppOpenAdPreloader.start(
    preloadId,
    {
      request: {adUnitId},
      bufferSize: 2,
    },
    {
      // Called when an ad is preloaded into the buffer.
      onAdPreloaded: (event) => {
        console.log(`App open ad preloaded for ${event.preloadId}`);
        customPreloadCallback?.onAdPreloaded?.(event);
      },
      // Called when an ad fails to preload.
      onAdFailedToPreload: (error: LoadAdError) => {
        console.error('Failed to preload app open ad:', error.message);
        customPreloadCallback?.onAdFailedToPreload?.(error);
      },
      // Called when all preloaded ads in the buffer have been shown.
      onAdsExhausted: () => {
        console.log('App open ad buffer exhausted.');
        customPreloadCallback?.onAdsExhausted?.();
      },
    },
  );
  return started;
}

preloadId 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 adUnitId chỉ được dùng cho một cấu hình tải trước trong ứng dụng, thì bạn có thể 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:

  • 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ớ.
  • Bạn nên giữ dung lượng bộ nhớ đệm là 2 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 quảng cáo hiện có được thăm dò và hiển thị hoặc bị huỷ.

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

Để kiểm tra quảng cáo được tải trước hiện có và truy xuất một thực thể quảng cáo, hãy gọi phương thức AppOpenAdPreloader.pollAd.

Để theo dõi các sự kiện trình bày toàn màn hình, hãy đăng ký lệnh gọi lại trên thuộc tính adEventCallback của thực thể AppOpenAd được trả về trước khi gọi phương thức show:

export function showPreloadedAppOpenAd(
  preloadId: string,
  customAdEventCallback?: FullScreenAdEventCallback,
) {
  if (!AppOpenAdPreloader.isAdAvailable(preloadId)) {
    console.log('No preloaded app open ad available right now.');
    return;
  }

  const ad = AppOpenAdPreloader.pollAd(preloadId);
  if (!ad) {
    return;
  }

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

  ad.show();
}

Để 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 khi người dùng đóng quảng cáo hoặc quảng cáo không hiển thị.

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

Để kiểm tra thông tin chi tiết của 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 AppOpenAdPreloader.peekAdResponseInfo:

export function peekAppOpenAdResponseInfo(
  preloadId: string,
): ResponseInfo | null {
  const responseInfo = AppOpenAdPreloader.peekAdResponseInfo(preloadId);
  if (responseInfo) {
    console.log('Next preloaded app open ad response info:', responseInfo);
  }
  return responseInfo;
}

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

Vì quảng cáo khi mở ứng dụng được hiển thị trên toàn cầu trong quá trình khởi chạy ứng dụng và chuyển đổi nền trước, nên bạn nên quản lý trạng thái vòng đời của trình tải trước trong trình quản lý cấp ứng dụng bên ngoài cây thành phần React.

Việc sử dụng trình quản lý cấp ứng dụng mang lại một số lợi ích chính như sau:

  • Giữ trạng thái của trình tải trước độc lập với hoạt động điều hướng trên màn hình riêng lẻ và vòng đời của thành phần.
  • Tập trung các lệnh gọi lại sự kiện quảng cáo, theo dõi trạng thái và dọn dẹp trong một thực thể dùng chung duy nhất trên ứng dụng của bạn.
  • Kiểm soát thời điểm theo dõi các sự kiện đưa ứng dụng lên nền trước, ngăn chặn việc trình bày trùng lặp khi đóng quảng cáo.

Ví dụ sau đây triển khai trình quản lý cấp ứng dụng bằng cách sử dụng đối tượng AppOpenAdPreloader:

export class AppOpenAdManager {
  private adUnitId: string;
  private preloadId: string;
  private appStateSubscription?: NativeEventSubscription;
  private startTimeoutId?: ReturnType<typeof setTimeout>;

  constructor(adUnitId: string, preloadId: string) {
    this.adUnitId = adUnitId;
    this.preloadId = preloadId;
  }

  start(): boolean {
    if (!AppOpenAdPreloader.getConfiguration(this.preloadId)) {
      AppOpenAdPreloader.start(
        this.preloadId,
        {
          request: {adUnitId: this.adUnitId},
          bufferSize: 2,
        },
        {
          onAdPreloaded: (event) => {
            console.log(`App open ad preloaded for ${event.preloadId}`);
          },
          onAdFailedToPreload: (error: LoadAdError) => {
            console.error('Failed to preload app open ad:', error.message);
          },
          onAdsExhausted: () => {
            console.log('App open ad buffer exhausted.');
          },
        },
      );
    }

    if (!this.appStateSubscription && !this.startTimeoutId) {
      // Delay attaching the listener to ensure native dismissal transitions complete
      this.startTimeoutId = setTimeout(() => {
        this.startTimeoutId = undefined;
        if (!this.appStateSubscription) {
          this.appStateSubscription = AppState.addEventListener(
            'change',
            (nextAppState: AppStateStatus) => {
              if (nextAppState === 'active') {
                this.showAdIfAvailable();
              }
            },
          );
        }
      }, APP_STATE_LISTENER_DELAY_MS);
    }

    return true;
  }

  pause(): void {
    if (this.startTimeoutId) {
      clearTimeout(this.startTimeoutId);
      this.startTimeoutId = undefined;
    }
    this.appStateSubscription?.remove();
    this.appStateSubscription = undefined;
  }

  stop(): void {
    this.pause();
    AppOpenAdPreloader.destroy(this.preloadId);
  }

  showAdIfAvailable() {
    if (!AppOpenAdPreloader.isAdAvailable(this.preloadId)) {
      console.log('App open ad is not preloaded or available right now.');
      return;
    }

    const ad = AppOpenAdPreloader.pollAd(this.preloadId);
    if (!ad) {
      return;
    }

    // Pause listener while presenting the ad
    this.pause();

    ad.adEventCallback = {
      onAdShowedFullScreenContent: () => {
        console.log('Preloaded app open ad showed full screen content.');
      },
      onAdDismissedFullScreenContent: () => {
        console.log('Preloaded app open ad dismissed full screen content.');
        ad.destroy();
        this.start();
      },
      onAdFailedToShowFullScreenContent: (error) => {
        console.error('Failed to show preloaded app open ad:', error);
        ad.destroy();
        this.start();
      },
    };

    ad.show();
  }
}

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 đăng ký trình nghe change trên mô-đun AppState trong thành phần gốc của ứng dụng, chẳng hạn như App.tsx. Kiểm tra khi trạng thái chuyển sang active. Ví dụ: gọi phương thức start trên thực thể trình quản lý quảng cáo trong thành phần App.tsx.

Khi hiển thị lớp phủ quảng cáo hoặc trang đích, chẳng hạn như hiển thị quảng cáo toàn màn hình hoặc nhấn vào quảng cáo biểu ngữ, ứng dụng của bạn sẽ được đẩy xuống nền. Khi người dùng quay lại ứng dụng, ứng dụng của bạn sẽ nhận được một sự kiện trạng thái active mới. Để ngăn việc trình bày quảng cáo ngoài ý muốn hoặc vòng lặp khi quay lại từ một quảng cáo trình bày quảng cáo khi mở ứng dụng từ bộ nhớ đệm, hãy làm như sau:

  1. Xoá trình nghe sự kiện AppState trước khi hiển thị quảng cáo toàn màn hình.
  2. Để đảm bảo việc nghe tiếp tục cho dù người dùng đóng quảng cáo hay quảng cáo không hiển thị, hãy thêm lại trình nghe sự kiện AppState trong lệnh gọi lại onAdDismissedFullScreenContent và onAdFailedToShowFullScreenContent.

Để xem ví dụ hoàn chỉnh về cách kiểm soát thời điểm tạm dừng và tiếp tục trình nghe sự kiện đưa ứng dụng lên nền trước, hãy xem cách triển khai AppOpenAdManager.

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 độ trễ của yêu cầu quảng cáo, 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. 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 tải các thành phần ứng dụng. Nếu 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 xong, thì đừng hiển thị quảng cáo.

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

Khi không cần tải trước cho một màn hình hoặc mã đơn vị quảng cáo nữa (chẳng hạn như khi rời khỏi màn hình tải trước quảng cáo), hãy gọi phương thức AppOpenAdPreloader.destroy để giải phóng tài nguyên của trình tải trước và ngăn việc giữ các đối tượng quảng cáo không dùng đến trong bộ nhớ:

export function destroyAppOpenAdPreloader(preloadId: string) {
  AppOpenAdPreloader.destroy(preloadId);
}

Ngoài việc huỷ hàng đợi của trình tải trước, hãy nhớ huỷ các thực thể quảng cáo được thăm dò riêng lẻ khi người dùng đóng quảng cáo hoặc quảng cáo không hiển thị. Để 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 mẫu 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 khi mở ứng dụng đã tải trước:

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

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

  useEffect(() => {
    // Start preloading ads on component mount
    const started = startAppOpenAdPreloader(APP_OPEN_AD_UNIT_ID, PRELOAD_ID, {
      onAdPreloaded: () => {
        refreshAdCount();
        setStatus('App open ad preloaded into buffer.');
      },
      onAdFailedToPreload: (error) => {
        setStatus(`Failed to preload app open ad: ${error.message}`);
      },
      onAdsExhausted: () => {
        refreshAdCount();
        setStatus('Preload buffer exhausted for app open ads.');
      },
    });
    if (started) {
      setStatus('Preloader started.');
    }

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

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

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Preload App Open 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={handleShowAd}
          disabled={numAdsAvailable === 0}
        />
      </View>
    </View>
  );
}

Thay thế nội dung sau:

  • APP_OPEN_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 tích hợp quảng cáo khi mở ứng dụng, hãy khám phá các chủ đề sau: