react-native-admob/admob 가이드 (3) - 코드 작성

이전 포스팅

react-native-admob/admob 가이드 (2) - admob 설정

https://honeystorage.tistory.com/336

 

 

애드몹 관련 코드는

매우 간단하다.

 

각 플랫폼별, 광고 유형별 ID를 세팅해주고

load / show만 상황에 맞게 제어해주면 된다.

 

바로 코드를 살펴보자.

가벼운 스테이지형 게임 앱이며

특정 스테이지에 접근하려면 광고를 보여주는 상황을 가정해보자.

 

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

type Stage = {
  stage: number;
  hasAd: boolean;
}
const Stages: Stage[] = [
  {
    stage: 1,
    hasAd: false,
  },
  {
    stage: 2,
    hasAd: true,
  },
  {
    stage: 3,
    hasAd: false,
  }
];

function StageScreen({ navigation }: any) {
  const onEnterStage = (stage, hasAd) => {
    // has ad
    ...
    
    // no ad
    ...
  }
  
  return(
    <>
      { Stages.map((stage) => (
        <StageButton
          key={`curren-stage-${ stage.stage }`}
          stageNumber={ stage.stage }
          onEnter={() => {
            onEnterStage(stage.stage, stage.hasAd);
          }}
        />
      ))}
    </>
  );
}

const StageButton = ({ stageNumber, onEnter }: { stageNumber: number; onEnter: () => void; }) => {
  return (
    <TouchableOpacity onPress={onEnter}>
      <Text>Stage - { stageNumber }</Text>
    </TouchableOpacity>
  )
}

export default StageScreen;

간단히 코드를 구성해보면 이렇게 될것이다.

기본 React 코드에

광고를 보여주고, 로드하고 하는 코드만 덧 붙여주면

코드가 완성될것같다.

 

그럼 바로 추가해보자.

 

import { useInterstitialAd } from '@react-native-admob/admob';

function StageScreen({ navigation }: any) {
  const PLATFORM_FULLPAGE_AD_ID = Platform.select({
    ios: '???',
    android: '???',
  }) || '';
  
  const { adLoaded, adDismissed, show, load } = useInterstitialAd(PLATFORM_FULLPAGE_AD_ID);
  
  useEffect(() => {
    const userVisitedToAd = adLoaded && adDismissed;
    if (userVisitedToAd) {
      // stage save
      navigation.push('MyStage');
      
      // load new ad for next time
      load();
    }
    
  }, [adLoaded, adDismissed]);
  
  const onEnterStage = (stage, hasAd) => {
    if (hasAd && adLoaded && !adDismissed) {
      show();    
    } else {
      // stage save
      navigation.push('MyStage');
    }
  }
}

코드를 잠깐 살펴보자

이전의 코드에서  Stage를 클릭하면

onEnterStage가 호출됨을 알수있었다.

 

onEnterStage는

해당 Stage가 광고를 제공해야 하며(hasAd)

+ 로드되 광고가 있고(adLoaded)

+ 광고를 보여준적이 없는 상태일 때(!adDismissed)

사용자에게 광고를 보여주고

그렇지 않으면 바로 스테이지로 진입시킨다.

 

광고가 종료되면 adDismissed가 true로 바뀐다.

useEffect를 통해 해당 state의 변화를 감지해

사용자의 이전 기대 액션을 그대로 흘러가게 해준다.

(스테이지로 진입하는)

 

이때, 다음번 스테이지 진입때 광고를 보여주기위해

load를 미리 해둔다.

 

stage save는 각 환경에 맞게

글로벌 state나 storage에

현재 스테이지의 정보를 저장하라는 것이다.

 

 

개인적인 생각으로는

너무 많은 광고를 보여주면

스팸성 앱이 될수있다.

 

storage에 이전 광고 시점을 저장하여

다음 광고 시점을 20분뒤, 30분뒤

수준으로 조정하는것을 추천한다.