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

# 배너 & MREC 광고

> DARO를 통해 배너와 MREC 광고를 구현하는 방법을 알아봅니다.

## 배너 & MREC 형태 소개

### 배너 광고

* 앱 레이아웃의 일부를 차지하는 직사각형 광고 형태로 보편적으로 사용됩니다.
* 대부분의 광고 디맨드들이 지원하는 형태인 320x50 사이즈를 사용합니다.

<img src="https://mintcdn.com/delightroom-5a71a6a8/j3-znW7LKrbpP3mb/sdk-integration/common-img/ad-formats/banner-example.png?fit=max&auto=format&n=j3-znW7LKrbpP3mb&q=85&s=d00b59bcc639852f56ead46315f574a5" alt="Banner Example Pn" title="Banner Example Pn" style={{ width:"37%" }} width="998" height="2160" data-path="sdk-integration/common-img/ad-formats/banner-example.png" />

### MREC 광고

* 300x250 의 사이즈를 MREC으로 구분하여 부릅니다.
* 전반적으로 배너와 동일한 특성을 가집니다.

<img src="https://mintcdn.com/delightroom-5a71a6a8/dxU0bpsPoPvkYh_g/sdk-integration/common-img/ad-formats/mrec-example.png?fit=max&auto=format&n=dxU0bpsPoPvkYh_g&q=85&s=6e43a92f3517134aba67f81f874cd36e" alt="Mrec Example Pn" title="Mrec Example Pn" style={{ width:"38%" }} width="998" height="2160" data-path="sdk-integration/common-img/ad-formats/mrec-example.png" />

***

## 광고 연동하기

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

          ```kotlin Mrec theme={null}
          val adUnit = DaroBannerAdUnit(
            key = ${AdUnitId},
            placement = ${placement}, //로그 상 보여질 이름입니다. 공백을 보내도 무관합니다.
            bannerSize = DaroBannerSize.MREC,
          )
          ```
        </CodeGroup>
      </Step>

      <Step title="adView 생성 및 뷰에 추가">
        ```kotlin theme={null}
        val adView = DaroBannerAdView(
          context = context,
          adUnit = adUnit
        )

        binding.adViewContainer.addView(adView)
        ```
      </Step>

      <Step title="리스너 설정">
        ```kotlin theme={null}
        adView.setListener(object : DaroAdViewListener {
          override fun onAdImpression(adInfo: DaroAdInfo) {}
          override fun onAdClicked(adInfo: DaroAdInfo) {}
          override fun onAdLoadSuccess(ad: DaroViewAd, adInfo: DaroAdInfo) {}
          override fun onAdLoadFail(err: DaroAdLoadError) {}
        })
        ```
      </Step>

      <Step title="광고 로드">
        ```kotlin theme={null}
        adView.loadAd()
        ```
      </Step>
    </Steps>

    <Tip>
      * 뷰를 선언하면 자체적으로 화면에 맞는 라이프사이클을 찾아 동작을 관리합니다. 따로 `resume`, `pause`, `destroy`를 호출하지 않아도 됩니다.
      * `autoDetectLifecycle` 값을 false(default: true)로 설정하는 경우, `resume`, `pause`, `destroy`를 직접 호출해주셔야 합니다.
    </Tip>
  </Tab>

  <Tab title="Compose">
    <CodeGroup>
      ```kotlin Banner theme={null}
      DaroBanner(
        adUnit = DaroBannerAdUnit(
          key = ${AdUnitId},
          placement = ${placement}
          bannerSize = DaroBannerSize.Banner,
        ),
        listener = object : DaroAdViewListener {
          override fun onAdImpression(adInfo: DaroAdInfo) {}
          override fun onAdClicked(adInfo: DaroAdInfo) {}
          override fun onAdLoadSuccess(ad: DaroViewAd, adInfo: DaroAdInfo) {}
          override fun onAdLoadFail(err: DaroAdLoadError) {}
        },
        modifier = Modifier
      )
      ```

      ```kotlin Mrec theme={null}
      DaroBanner(
        adUnit = DaroBannerAdUnit(
          key = ${AdUnitId},
          placement = ${placement}
          bannerSize = DaroBannerSize.MREC,
        ),
        listener = object : DaroAdViewListener {
          override fun onAdImpression(adInfo: DaroAdInfo) {}
          override fun onAdClicked(adInfo: DaroAdInfo) {}
          override fun onAdLoadSuccess(ad: DaroViewAd, adInfo: DaroAdInfo) {}
          override fun onAdLoadFail(err: DaroAdLoadError) {}
        },
        modifier = Modifier
      )
      ```
    </CodeGroup>
  </Tab>
</Tabs>

<Tip>
  `DaroBannerAdView.requestPreload()` 메서드를 통해서 광고 뷰를 생성하지 않고도 광고를 미리 로드할 수 있습니다.

  ```kotlin theme={null}
  DaroBannerAdView.requestPreload(
    this,
    DaroBannerAdUnit(
      key = ${AdUnitId},
      placement = ${placement},
      bannerSize = ${bannerSize}
    )
  )
  ```

  이 때, 뷰에 사용하는 DaroBannerAdUnit의 `AdUnitId`, `placement`, `bannerSize` 모두 일치해야 미리 로드한 광고를 바로 사용할 수 있습니다.
</Tip>