토스 광고 2.0 변경 후 광고 로드가 안됩니다

개발
1 
import { GoogleAdMob } from "@apps-in-toss/web-framework";
import { useCallback, useRef, useState } from "react";
import { REWARDED_AD_ID } from "../constants/adId";

const AD_UNIT_ID = REWARDED_AD_ID;

interface RewardedAdCallbacks {
  onFailRewarded?: () => void;
  onDismiss?: () => void;
  handlePause?: (visibleState: string) => void;
}

export function useRewardedAd() {
  //   const [loading, setLoading] = useState(true);
  const [rewardADLoadStatus, setRewardADLoadStatus] = useState<
    "not_loaded" | "loaded" | "failed" | "loading"
  >("not_loaded");
  const cleanupRef = useRef<(() => void) | undefined>(undefined);
  const failCallbackRef = useRef<(() => void) | undefined>(undefined);
  const dismissCallbackRef = useRef<(() => void) | undefined>(undefined);

  const loadRewardAd = useCallback(() => {
    // setLoading(true);

    const isAdUnsupported =
      GoogleAdMob.loadAppsInTossAdMob.isSupported?.() === false;

    if (isAdUnsupported) {
      console.warn("광고가 준비되지 않았거나, 지원되지 않아요.");
      return;
    }

    if (rewardADLoadStatus === "loading" || rewardADLoadStatus === "loaded") {
      return;
    }

    cleanupRef.current?.();
    cleanupRef.current = undefined;

    const cleanup = GoogleAdMob.loadAppsInTossAdMob({
      options: {
        adUnitId: AD_UNIT_ID,
      },
      onEvent: (event) => {
        switch (event.type) {
          case "loaded":
            console.log("Reward 광고 로드 성공");
            setRewardADLoadStatus("loaded");
            // setLoading(false);
            break;

          case "dismissed":
            dismissCallbackRef.current?.();
            dismissCallbackRef.current = undefined;
            break;

          case "clicked":
            // 사용자가 광고를 클릭했어요.
            break;

          case "failedToShow":
            // 광고를 보여주지 못했어요.
            failCallbackRef.current?.();
            failCallbackRef.current = undefined;
            break;

          case "impression":
            // 광고가 화면에 노출됐어요.
            break;

          case "show":
            // 광고 컨텐츠가 노출되기 시작했어요.
            break;
          case "userEarnedReward":
            break;
        }
      },
      onError: (error) => {
        console.error("광고 로드 실패", error);
        failCallbackRef.current?.();
        failCallbackRef.current = undefined;
      },
    });

    cleanupRef.current = cleanup;
  }, [rewardADLoadStatus]);

  const showRewardAd = ({
    onFailRewarded,
    onDismiss,
    handlePause,
  }: RewardedAdCallbacks) => {
    const isAdUnsupported =
      GoogleAdMob.showAppsInTossAdMob.isSupported?.() === false;

    if (rewardADLoadStatus !== "loaded" && isAdUnsupported) {
      console.warn("광고가 준비되지 않았거나, 지원되지 않아요.");
      if (onFailRewarded) onFailRewarded();
      return;
    }

    if (handlePause) handlePause("hidden");

    failCallbackRef.current = onFailRewarded;
    dismissCallbackRef.current = onDismiss;

    GoogleAdMob.showAppsInTossAdMob({
      options: {
        adUnitId: AD_UNIT_ID,
      },
      onEvent: (event) => {
        if (event.type === "requested") {
          // 광고 노출이 요청됐어요.
          setRewardADLoadStatus("not_loaded");
        }
      },
      onError: (error) => {
        failCallbackRef.current?.();
        console.error("광고 보여주기 실패", error);
      },
    });
  };

  return {
    loadRewardAd,
    showRewardAd,
  };
}

이런식으로 인앱 광고 2.0이 나와서 수정하였는데 qr코드 테스트에서 광고를 볼 수 없습니다.

2

저도 동일한 문제를 겪었었는데, loadAppsInTossAdMob와 showAppsInTossAdMob함수의
options: { adUnitId: AD_UNIT_ID, }, 이부분을
options: { adGroupId: AD_GROUP_ID }, 이렇게 수정하니까 로드 됐었습니다.

3

감사합니다! 적용해 보겠습니다!

4

앗 AD_GROUP_ID 가 맞습니다.
수정해둘게요 감사해요 :slight_smile: