Appearance

광고 불러오기 ​

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

loadAppsInTossAdMob ​

loadAppsInTossAdMob는 광고를 미리 불러와서, 광고가 필요한 시점에 바로 보여줄 수 있도록 준비하는 함수예요.

시그니처 ​

typescript
function loadAppsInTossAdMob(params: LoadAdMobParams): typeof noop;

파라미터 ​

  • params필수 · LoadAdMobParams

    광고를 불러올 때 사용할 설정 값이에요. 광고 ID와 광고의 동작에 대한 콜백을 설정할 수 있어요.

      • params.options필수 · LoadAdMobOptions

        광고를 불러올 때 전달할 옵션 객체예요.

        • params.options.adGroupId필수 · string

          광고 그룹 단위 ID예요. 콘솔에서 발급받은 ID를 입력해요.

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

      광고 관련 이벤트가 발생했을 때 호출돼요. (예시: 광고가 닫히거나 클릭됐을 때). 자세한 이벤트 타입은 LoadAdMobEvent를 참고하세요.

    • 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: {
                adGroupId: 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;
    }, []);

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

            <Button title="Load Ad" onClick={loadAd}>
                광고 로드
            </Button>
        </div>
    );
}
tsx
import { GoogleAdMob } from '@apps-in-toss/framework';
import { useEffect } from 'react';
import { View, Text } from 'react-native';
     
const AD_GROUP_ID = '<AD_GROUP_ID>';
     
function GoogleAdmobExample() {
    useEffect(() => {
        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);
                        break;
                }
            },
            onError: (error) => {
              console.error('광고 불러오기 실패', error);
            },
        });
     
        return cleanup;
    }, []);
     
    return (
        <View>
            <Text>Page</Text>
        </View>
    );
}