Appearance

광고 보여주기 ​

지원환경: React NativeWebView
실행환경: Toss App

showAppsInTossAdMob ​

광고를 사용자에게 노출해요. 이 함수는 loadAppsInTossAdMob 로 미리 불러온 광고를 실제로 사용자에게 노출해요.

시그니처 ​

typescript
function showAppsInTossAdMob(params: ShowAdMobParams): typeof noop;

파라미터 ​

  • params필수 · ShowAdMobParams

    광고를 보여주기 위해 사용할 설정 값이에요. 광고 그룹 ID와과 광고의 동작에 대한 콜백을 설정할 수 있어요.

      • params.options필수 · ShowAdMobOptions

        광고를 보여줄 때 전달할 옵션 객체예요.

        • params.options.adUnitId필수 · string

          광고 그룹 단위 ID예요. loadAppsInTossAdMob로 불러온 광고용 그룹 ID를 입력해요.

    • params.onEvent(event: ShowAdMobEvent) => void

      광고 관련 이벤트가 발생했을 때 호출돼요. (예시: 광고 노출을 요청했을 때). 자세한 이벤트 타입은 ShowAdMobEvent를 참고하세요.

    • params.onError(reason: unknown) => void

      광고를 불러오지 못했을 때 호출돼요. (예시: 네트워크 오류나 지원하지 않는 환경일 때)

프로퍼티 ​

  • isSupported() => boolean

    현재 실행 중인 앱(예: 토스 앱, 개발용 샌드박스 앱 등)에서 Google AdMob 광고 기능을 지원하는지 확인하는 함수예요. 기능을 사용하기 전에 지원 여부를 확인해야 해요.

예제 ​

버튼 눌러 불러온 광고 보여주기 ​

tsx
import { GoogleAdMob } from '@apps-in-toss/web-framework';
import { Button, Text } from '@toss-design-system/mobile';
import { useCallback, useState } from 'react';

const AD_GROUP_ID = '<AD_GROUP_ID>';

function GoogleAdmobExample() {
  const [adLoadStatus, setAdLoadStatus] = useState<'not_loaded' | 'loaded' | 'failed'>('not_loaded');

  const loadAd = useCallback(() => {
    if (GoogleAdMob.loadAppsInTossAdMob.isSupported() !== true) {
      return;
    }

    const cleanup = GoogleAdMob.loadAppsInTossAdMob({
      options: {
        adUnitId: AD_GROUP_ID,
      },
      onEvent: (event) => {
        console.log(event.type);
        switch (event.type) {
          case 'loaded':
            console.log('광고 로드 성공', event.data);
            setAdLoadStatus('loaded');
            break;
        }
      },
      onError: (error) => {
        console.error('광고 불러오기 실패', error);
      },
    });

    return cleanup;
  }, []);

  const showAd = useCallback(() => {
    if (GoogleAdMob.showAppsInTossAdMob.isSupported() !== true) {
      return;
    }

    GoogleAdMob.showAppsInTossAdMob({
      options: {
        adGroupId: AD_GROUP_ID,
      },
      onEvent: (event) => {
        switch (event.type) {
          case 'requested':
            console.log('광고 보여주기 요청 완료');
            setAdLoadStatus('not_loaded');
            break;
          case 'clicked':
            console.log('광고 클릭');
            break;

          case 'dismissed':
            console.log('광고 닫힘');
            break;

          case 'failedToShow':
            console.log('광고 보여주기 실패');
            break;

          case 'impression':
            console.log('광고 노출');
            break;

          case 'userEarnedReward': // 보상형 광고만 사용 가능
            console.log('광고 보상 획득 unitType:', event.data.unitType);
            console.log('광고 보상 획득 unitAmount:', event.data.unitAmount);
            console.log('사용자가 광고 시청을 완료했음');
            break;

          case 'show':
            console.log('광고 컨텐츠 보여졌음');
            break;
        }
      },
      onError: (error) => {
        console.error('광고 보여주기 실패', error);
      },
    });
  }, []);

  return (
    <div>
      <Text>
        {adLoadStatus === 'not_loaded' && '광고 로드 하지 않음 '}
        {adLoadStatus === 'loaded' && '광고 로드 완료'}
        {adLoadStatus === 'failed' && '광고 로드 실패'}
      </Text>

      <Button title="Load Ad" onClick={loadAd}>
        광고 로드
      </Button>
      <Button title="Show Ad" onClick={showAd} disabled={adLoadStatus !== 'loaded'}>
        광고 보여주기
      </Button>
    </div>
  );
}
tsx
import { GoogleAdMob } from '@apps-in-toss/framework';
import { useFocusEffect } from '@granite-js/native/@react-navigation/native';
import { useNavigation } from '@granite-js/react-native';
import { useCallback, useState } from 'react';
import { Button, Text, View } from 'react-native';

const AD_GROUP_ID = '<AD_GROUP_ID>';
 
export function GoogleAdmobExample() {
const [adLoadStatus, setAdLoadStatus] = useState<'not_loaded' | 'loaded' | 'failed'>('not_loaded');
const navigation = useNavigation();

const loadAd = useCallback(() => {
    if (GoogleAdMob.loadAppsInTossAdMob.isSupported() !== true) {
        return;
    }

    const cleanup = GoogleAdMob.loadAppsInTossAdMob({
        options: {
            adGroupId: AD_GROUP_ID,    
        },
        onEvent: (event) => {
            switch (event.type) {
                case 'loaded':
                    console.log('광고 로드 성공', event.data);
                    setAdLoadStatus('loaded');
                    break;
            }
        },
        onError: (error) => {
          console.error('광고 불러오기 실패', error);
        },
      });
 
      return cleanup;
    }, [navigation]);
 
    const showAd = useCallback(() => {
      if (GoogleAdMob.showAppsInTossAdMob.isSupported() !== true) {
        return;
      }
 
      GoogleAdMob.showAppsInTossAdMob({
        options: {
          adGroupId: AD_GROUP_ID,
        },
        onEvent: (event) => {
          switch (event.type) {
            case 'requested':
              console.log('광고 보여주기 요청 완료');
              break;
  
            case 'clicked':
              console.log('광고 클릭');
              break;
 
            case 'dismissed':
              console.log('광고 닫힘');
              navigation.navigate('/examples/google-admob-interstitial-ad-landing');
              break;
 
            case 'failedToShow':
              console.log('광고 보여주기 실패');
              break;
 
            case 'impression':
              console.log('광고 노출');
              break;
  
            case 'userEarnedReward': // 보상형 광고만 사용 가능
              console.log('광고 보상 획득 unitType:', event.data.unitType);
              console.log('광고 보상 획득 unitAmount:', event.data.unitAmount);
              break;
 
            case 'show':
              console.log('광고 컨텐츠 보여졌음');
              break;
          }
        },
        onError: (error) => {
          console.error('광고 보여주기 실패', error);
        },
      });
    }, []);
 
    useFocusEffect(loadAd);
 
    return (
      <View>
        <Text>
          {adLoadStatus === 'not_loaded' && '광고 로드 하지 않음 '}
          {adLoadStatus === 'loaded' && '광고 로드 완료'}
          {adLoadStatus === 'failed' && '광고 로드 실패'}
        </Text>
 
        <Button title="Show Ad" onPress={showAd} disabled={adLoadStatus !== 'loaded'} />
      </View>
    );
}