Tải một quảng cáo có tặng thưởng

Quảng cáo có tặng thưởng cung cấp cho người dùng các mặt hàng trong ứng dụng khi họ tương tác với quảng cáo dạng video, quảng cáo có thể chơi và bản khảo sát. Để biết thông tin chi tiết, hãy xem bài viết Tổng quan về đơn vị quảng cáo có tặng thưởng.

Hướng dẫn này trình bày cách tích hợp quảng cáo có tặng thưởng vào ứng dụng gốc 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/5224354917

iOS 

ca-app-pub-3940256099942544/1712485313

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

Để tải quảng cáo có tặng thưởng, hãy gọi phương thức load trên lớp RewardedAd.

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

export async function loadRewardedAd(
  adUnitId: string,
): Promise<RewardedAd | null> {
  try {
    const ad = await RewardedAd.load({adUnitId});
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load rewarded 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ể RewardedAd đã tải. Trình nghe này nhận lệnh gọi lại cho các sự kiện trong vòng đời của quảng cáo, chẳng hạn như quảng cáo xuất hiện 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: RewardedAd) {
  ad.adEventCallback = {
    // Called when the ad is presented on screen.
    onAdShowedFullScreenContent: () => {
      console.log('Rewarded ad showed full screen content.');
    },
    // Called when the ad is closed by the user.
    onAdDismissedFullScreenContent: () => {
      console.log('Rewarded ad dismissed full screen content.');
      ad.destroy();
    },
    // Called when presentation fails.
    onAdFailedToShowFullScreenContent: (error) => {
      console.error('Failed to show rewarded ad:', error);
      ad.destroy();
    },
    // Called when an impression is recorded.
    onAdImpression: () => {
      console.log('Rewarded ad recorded an impression.');
    },
    // Called when the user taps the ad.
    onAdClicked: () => {
      console.log('Rewarded ad was clicked.');
    },
    // Called when the ad is estimated to have earned money.
    onAdPaid: (adValue) => {
      console.log(
        `Rewarded ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
      );
    },
  };
}

Ví dụ này cũng gọi 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 có tặng thưởng, hãy gọi phương thức show bằng một lệnh gọi lại để xử lý phần thưởng mà người dùng nhận được:

export function showRewardedAd(
  ad: RewardedAd,
  onRewardEarned: (reward: Reward) => void,
) {
  ad.show(onRewardEarned);
}

Không bắt buộc: Xác thực lệnh gọi lại của tính năng xác minh phía máy chủ

Nếu ứng dụng của bạn yêu cầu các tham số xác minh tuỳ chỉnh (chẳng hạn như mã nhận dạng người dùng hoặc siêu dữ liệu phần thưởng tuỳ chỉnh) trong lệnh gọi lại của tính năng xác minh phía máy chủ (SSV), hãy đặt thuộc tính serverSideVerificationOptions trên thực thể quảng cáo đã tải trước khi hiển thị quảng cáo.

Các giá trị bạn đặt sẽ được truyền đến tham số truy vấn gọi lại SSV:

  • userId: Chuyển đến tham số truy vấn user_id để xác định người dùng.
  • customData: Chuyển đến tham số truy vấn custom_data để chuyển tiếp siêu dữ liệu tuỳ chỉnh.

Ví dụ sau đây đặt ServerSideVerificationOptions (customData và userId) cho một đối tượng quảng cáo có tặng thưởng trước khi hiển thị quảng cáo:

export function setServerSideVerificationRewarded(ad: RewardedAd) {
  ad.serverSideVerificationOptions = {
    userId: 'user_123',
    customData: 'sample_custom_data',
  };
}

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 có tặng thưởng vào một ứng dụng React Native.

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

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

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

  const handleLoad = async () => {
    setReward(null);
    setStatus('Loading Rewarded ad...');
    const loadedAd = await loadRewardedAd(REWARDED_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('Rewarded ad loaded!');
    } else {
      setStatus('Failed to load Rewarded ad.');
    }
  };

  const handleShow = () => {
    if (ad) {
      showRewardedAd(ad, (userReward) => {
        setReward(`${userReward.amount} ${userReward.type}`);
      });
      setIsLoaded(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Rewarded Ad (Single Load)</Text>
      <Text style={styles.status}>Status: {status}</Text>
      {reward && <Text style={styles.rewardText}>Earned: {reward}</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 có tặng thưởng, hãy khám phá các chủ đề sau: