> ## Documentation Index
> Fetch the complete documentation index at: https://guide.daro.so/llms.txt
> Use this file to discover all available pages before exploring further.

# 인터스티셜 광고

## 인터스티셜 광고 형태 소개

* 화면 전체를 덮는 형태로 노출되는 광고입니다.
* 이미지/동영상 모두 포함되나 동영상 소재가 더 많이 노출되며 일반적으로 5초 후부터 스킵이 가능합니다.

<img src="https://mintcdn.com/delightroom-5a71a6a8/dxU0bpsPoPvkYh_g/sdk-integration/common-img/ad-formats/interstitial-example-image.png?fit=max&auto=format&n=dxU0bpsPoPvkYh_g&q=85&s=fa0468f45283f40d5937e24afde61f88" alt="Interstitial Example Image Pn" title="Interstitial Example Image Pn" style={{ width:"38%" }} width="1080" height="2336" data-path="sdk-integration/common-img/ad-formats/interstitial-example-image.png" />

### How It Works

<img src="https://mintcdn.com/delightroom-5a71a6a8/dxU0bpsPoPvkYh_g/sdk-integration/common-img/ad-formats/interstitial-example-gif-kor.gif?s=7acbabb11ba699d443e6df486522954f" alt="Interstitial Example Gif Kor Gi" title="Interstitial Example Gif Kor Gi" style={{ width:"38%" }} width="240" height="518" data-path="sdk-integration/common-img/ad-formats/interstitial-example-gif-kor.gif" />

***

## 광고 로드하기

`InterstitialAd.loadAd(unitId)`를 통해서 광고를 load할 수 있습니다.

<Tabs>
  <Tab title="Non-Reward">
    ```javascript theme={null}
    import { InterstitialAd } from "react-native-daro";
    import { AdInfo, AdLoadFailedInfo, AdRevenueInfo } from "react-native-daro";
    ```
  </Tab>

  <Tab title="Reward">
    ```javascript theme={null}
    import { InterstitialAd } from "react-native-daro-m";
    import { AdInfo, AdLoadFailedInfo, AdRevenueInfo } from "react-native-daro-m";
    ```
  </Tab>
</Tabs>

```javascript theme={null}

const INTERSTITIAL_AD_UNIT_ID = Platform.select({
    ios: ${iOS unit Id},
    android: ${Android unit id},
    default: ''
});

const initializeInterstitialAds = () => {
  InterstitialAd.addAdLoadedEventListener((adInfo: AdInfo) => {...});
  InterstitialAd.addAdLoadFailedEventListener((errorInfo: AdLoadFailedInfo) => {...});
  InterstitialAd.addAdClickedEventListener((adInfo: AdInfo) => { ... });
  InterstitialAd.addAdDisplayedEventListener((adInfo: AdInfo) => { ... });
  InterstitialAd.addAdFailedToDisplayEventListener((adInfo: AdDisplayFailedInfo) = { ... });
  InterstitialAd.addAdHiddenEventListener((adInfo: AdInfo) => { ... });
  InterstitialAd.addAdImpressionRecordedListener((adInfo: AdInfo) => { ... });

  // Load the first interstitial
  loadInterstitial();
}

const loadInterstitial = () => {
  InterstitialAd.loadAd(INTERSTITIAL_AD_UNIT_ID);
}
```

## 광고 보여주기

`InterstitialAd.showAd(unitId)`를 통해서 로드한 광고를 보여줄 수 있습니다.

```javascript theme={null}
const isInterstitialReady = await InterstitialAd.isAdReady(
  INTERSTITIAL_AD_UNIT_ID
);

if (isInterstitialReady) {
  InterstitialAd.showAd(INTERSTITIAL_AD_UNIT_ID);
}
```

### 구현 예시

<Accordion title="`InterstitialAd` 구현 예시입니다." icon="sparkles">
  ```javascript theme={null}
  import { useEffect, useRef, useState } from "react";
  import { StyleSheet } from "react-native";
  // import문은 위의 탭 참조
  import { AdDisplayFailedInfo, AdInfo, AdLoadFailedInfo, AdRevenueInfo, InterstitialAd } from "react-native-daro-m";
  import { ThemedButton } from "../ThemedButton";

  enum AdLoadState {
    notLoaded = 'NOT_LOADED',
    loading = 'LOADING',
    loaded = 'LOADED',
  }

  type Props = {
    adUnitId: string;
    isInitialized: boolean;
    log: (str: string) => void;
  };

  const MAX_EXPONENTIAL_RETRY_COUNT = 3;

  const InterstitialAdExample = ({ adUnitId, isInitialized, log }: Props) => {
    const [adLoadState, setAdLoadState] = useState<AdLoadState>(AdLoadState.notLoaded);
    const retryAttempt = useRef(0);

    useEffect(() => {
      InterstitialAd.addAdLoadedEventListener((adInfo: AdInfo) => {
        setAdLoadState(AdLoadState.loaded);
        retryAttempt.current = 0;
        log(`Interstitial ad loaded`);
      });

      InterstitialAd.addAdImpressionRecordedListener((adInfo: AdRevenueInfo) => {
        log(`Interstitial ad revenue paid`);
      });

      InterstitialAd.addAdClickedEventListener((adInfo: AdInfo) => {
        log(`Interstitial ad clicked`);
      });

      // Handle ad load failure
      InterstitialAd.addAdLoadFailedEventListener((errorInfo: AdLoadFailedInfo) => {
        setAdLoadState(AdLoadState.notLoaded)

        if (retryAttempt.current > MAX_EXPONENTIAL_RETRY_COUNT) {
          log('Interstitial ad failed to load with code ' + errorInfo.code);
          return;
        }

        // Interstitial ad failed to load
        // We recommend retrying with exponentially higher delays up to a maximum delay (in this case 64 seconds)
        retryAttempt.current += 1;

        const retryDelay = Math.pow(2, Math.min(MAX_EXPONENTIAL_RETRY_COUNT, retryAttempt.current));
        log('Interstitial ad failed to load with code ' + errorInfo.code + ' - retrying in ' + retryDelay + 's');

        setTimeout(() => {
          setAdLoadState(AdLoadState.loading);
          log('Interstitial ad retrying to load...');
          InterstitialAd.loadAd(adUnitId);
        }, retryDelay * 1000);
      });

      InterstitialAd.addAdDisplayedEventListener((adInfo: AdInfo) => {
        log(`Interstitial ad displayed`);
      });

      InterstitialAd.addAdFailedToDisplayEventListener((adInfo: AdDisplayFailedInfo) => {
        setAdLoadState(AdLoadState.notLoaded);
        log(`Interstitial ad failed to display`);
      });

      InterstitialAd.addAdHiddenEventListener((adInfo: AdInfo) => {
        setAdLoadState(AdLoadState.notLoaded);
        log(`Interstitial ad hidden`);
      });

    }, [adUnitId]);

    const getInterstitialButtonTitle = () => {
      if (adLoadState === AdLoadState.notLoaded) {
        return 'Load Interstitial';
      } else if (adLoadState === AdLoadState.loading) {
        return 'Loading...';
      } else {
        return 'Show Interstitial'; // adLoadState.loaded
      }
    };
    return (
      <ThemedButton
        isEnabled={isInitialized && adLoadState !== AdLoadState.loading}
        isLoading={adLoadState === AdLoadState.loading}
        title={getInterstitialButtonTitle()}
        onPress={async () => {
          const isInterstitialReady = await InterstitialAd.isAdReady(adUnitId);
          if (isInterstitialReady) {
            InterstitialAd.showAd(adUnitId);
        } else {
          log('Loading interstitial ad...');
          setAdLoadState(AdLoadState.loading);
          InterstitialAd.loadAd(adUnitId);
        }
      }} />
    );
  }

  const styles = StyleSheet.create({
    button: {
      margin: 5,
    },
  });

  export default InterstitialAdExample;
  ```
</Accordion>