> ## 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.

# 라이트 팝업 광고

> DARO를 통해 라이트 팝업 광고를 구현하는 방법을 알아봅니다.

## 라이트 팝업 광고 형태 소개

* 전면 광고 유형입니다.
* 8초 후에 자동으로 닫히게 됩니다. 인터스티셜이나, 리워드 비디오보다 ux를 해치지 않고 광고를 보여줄 수 있습니다.

<img src="https://mintcdn.com/delightroom-5a71a6a8/j3-znW7LKrbpP3mb/sdk-integration/common-img/ad-formats/android-light-popup-example.png?fit=max&auto=format&n=j3-znW7LKrbpP3mb&q=85&s=0ceffe2daef45a0bf0e7f269f93f67ce" alt="Android Light Popup Example Pn" title="Android Light Popup Example Pn" style={{ width:"40%" }} width="1080" height="2340" data-path="sdk-integration/common-img/ad-formats/android-light-popup-example.png" />

***

## 광고 연동하기

<Steps>
  <Step title="adUnit 생성">
    ```kotlin theme={null}
    val adUnit = DaroLightPopupAdUnit(
        key = ${AdUnitId},
        placement = ${placement}, //로그 상 보여질 이름입니다. 공백을 보내도 무관합니다.
        options = DaroLightPopupAdOptions()
    )
    ```

    <Expandable title="DaroLightPopupAdOptions">
      <ResponseField name="backgroundColor" type="Int">
        전체 배경색
      </ResponseField>

      <ResponseField name="containerColor" type="Int">
        팝업 컨테이너 배경색
      </ResponseField>

      <ResponseField name="adMarkLabelTextColor" type="Int">
        상단 광고 마크 텍스트 색상
      </ResponseField>

      <ResponseField name="adMarkLabelBackgroundColor" type="Int">
        상단 광고 마크 배경색
      </ResponseField>

      <ResponseField name="titleColor" type="Int">
        타이틀 텍스트 색상
      </ResponseField>

      <ResponseField name="bodyColor" type="Int">
        본문 텍스트 색상
      </ResponseField>

      <ResponseField name="ctaBackgroundColor" type="Int">
        CTA(버튼) 배경색
      </ResponseField>

      <ResponseField name="ctaTextColor" type="Int">
        CTA(버튼) 텍스트 색상
      </ResponseField>

      <ResponseField name="closeButtonText" type="String">
        닫기 버튼 텍스트
      </ResponseField>

      <ResponseField name="closeButtonColor" type="Int">
        닫기 버튼 텍스트 색상
      </ResponseField>
    </Expandable>
  </Step>

  <Step title="Loader 생성 및 광고 로드">
    ```kotlin theme={null}
    val loader = DaroLightPopupAdLoader(
        context = context,
        adUnit = adUnit
    )
    loader.setListener(object : DaroLightPopupAdLoaderListener {
        override fun onAdLoadSuccess(ad: DaroLightPopupAd, adInfo: DaroAdInfo) {
            // ...
        }
        override fun onAdLoadFail(err: DaroAdLoadError) {
            // ...
        }
    })
    loader.load()
    ```
  </Step>

  <Step title="리스너 설정 및 광고 표시">
    ```kotlin theme={null}
    loader.setListener(object : DaroLightPopupAdLoaderListener {
        override fun onAdLoadSuccess(ad: DaroLightPopupAd, adInfo: DaroAdInfo) {
            ad.setListener(object : DaroLightPopupAdListener {
                override fun onAdImpression(adInfo: DaroAdInfo) {}
                override fun onAdClicked(adInfo: DaroAdInfo) {}
                override fun onShown(adInfo: DaroAdInfo) {}
                override fun onFailedToShow(adInfo: DaroAdInfo, error: DaroAdDisplayFailError) {}
                override fun onDismiss(adInfo: DaroAdInfo) {}
            })
            ad.show(activity = this@MainActivity)
        }
        override fun onAdLoadFail(err: DaroAdLoadError) {}
    })
    ```
  </Step>

  <Step title="광고 시청 완료 후 destroy 호출">
    ```kotlin theme={null}
    ad.destroy()
    ```
  </Step>
</Steps>

***

## Example

```kotlin expandable theme={null}
private fun showLightPopupAd() {
  DaroLightPopupAdLoader(
    context = context,
    adUnit = DaroLightPopupAdUnit(
      key = ${AdUnitId},
      placement = ${placement}
    )
  ).apply {
    setListener(object : DaroLightPopupAdLoaderListener {
      override fun onAdLoadSuccess(
        ad: DaroLightPopupAd,
        adInfo: DaroAdInfo,
      ) {
        Log.d("Ad Test", "lightpopup - success")

        ad.setListener(object : DaroLightPopupAdListener {
          override fun onAdImpression(adInfo: DaroAdInfo) {
            Log.d("Ad Test", "lightpopup - impression")
          }

          override fun onAdClicked(adInfo: DaroAdInfo) {
            Log.d("Ad Test", "lightpopup - clicked")
          }

          override fun onShown(adInfo: DaroAdInfo) {
            Log.d("Ad Test", "lightpopup - onShown")
          }

          override fun onFailedToShow(
            adInfo: DaroAdInfo,
            error: DaroAdDisplayFailError,
          ) {
            Log.d("Ad Test", "lightpopup - onFailedToShow")
          }

          override fun onDismiss(adInfo: DaroAdInfo) {
            Log.d("Ad Test", "lightpopup - onDismiss")
            ad.destory()
          }
        })

        ad.show(activity = this@MainActivity)
      }

      override fun onAdLoadFail(err: DaroAdLoadError) {
        Log.d("Ad Test", "lightpopup - fail : ${err.message}")
      }
    }
    )
    load()
  }
}
```