본문으로 건너뛰기

네이티브 캐러셀 광고

GFPSDK 7.6.0 버전부터 Native Carousel 광고를 지원합니다.
Native Normal 타입으로 지원되며 아래 특이 사항들을 제외하고는 NN 타입 광고와 동일하게 적용됩니다.
네이티브 노말 연동과 관련된 가이드는 링크를 참고해주세요.

캐로셀 이미지

Preferred Height 적용​

캐로셀은 광고 특성 상 미디어뷰의 Height(가로모드일 시), Width(세로모드일 시)를 기준으로 개별 슬롯의 렌더링 기준을 잡습니다.
로드된 광고가 알맞은 높이로 렌더링 될 수 있게, 가장 알맞은 크기의 MediaView Height를 서비스에게 광고 로드 시점에 MediaData에서 제공합니다.

func adLoader(_ unifiedAdLoader: GFPAdLoader, didReceiveNativeAd nativeAd: GFPNativeAd) {
    ...
    if nativeAd.mediaData.preferredMediaHeight > 0 {
        self.nativeAdView.frame = CGRect(x: self.nativeAdView.frame.origin.x,
                                         y: self.nativeAdView.frame.origin.y,
                                         width: self.nativeAdView.frame.size.width,
                                         height: nativeAd.mediaData.preferredMediaHeight)
    }
    ...
    self.nativeAdView.nativeAd = nativeAd
    ...
}

NativeAdView에 nativeAd를 Set하는 시점 이전에 MediaView 의 높이를 조정하는 것이 권장됩니다.
다만, 해당 높이로 설정하지 않더라도 설정된 MediaView의 Height에 맞춰 자동으로 조절됩니다.

Preferred Width 적용​

캐로셀이 특정한 레이아웃을 가진 형태로 적용될 때 ( 2x2나 1x3 형태의 광고 ) 이상적인 높이 뿐만 아니라 이상적인 넓이까지 함께 제공됩니다. 일반적인 캐로셀 상품에는 Preferred Width는 -1 상태로 제공됩니다. Preferred Height와 Preferred Width가 모두 양수일 경우에는 MediaView의 크기를 해당 값으로 조절합니다.

제공되는 값과는 다른 값으로 너비를 설정한다면, MediaData의 preferredHeightWithFixedWidth: 메서드를 통해서 height값을 전달받아 사용합니다.

정보

해당 프로퍼티는 GFPSDK 7.9.0 이상부터 제공됩니다.

func adLoader(_ unifiedAdLoader: GFPAdLoader, didReceiveNativeAd nativeAd: GFPNativeAd) {
    ...
    if nativeAd.mediaData.preferredMediaHeight > 0 {
        self.nativeAdView.frame = CGRect(x: self.nativeAdView.frame.origin.x,
                                         y: self.nativeAdView.frame.origin.y,
                                         width: self.nativeAdView.frame.size.width,
                                         height: nativeAd.mediaData.preferredMediaHeight)
    }

    if nativeAd.mediaData.preferredMediaWidth > 0 {
        self.nativeAdView.frame = CGRect(x: self.nativeAdView.frame.origin.x,
                                         y: self.nativeAdView.frame.origin.y,
                                         width: nativeAd.mediaData.preferredMediaWidth, 
                                         height: self.nativeAdView.frame.size.height)
    }
    ...
    //제공된 값과는 다른 고정된 너비값을 사용하고 싶은 경우
    if nativeAd.mediaData.preferredMediaHeight > 0 && nativeAd.mediaData.preferredMediaWidth > 0 {
        let fixedSize = self.nativeAdView.mediaView.frame.size.width;
        self.nativeAdView.frame = CGRect(x: self.nativeAdView.frame.origin.x,
                                         y: self.nativeAdView.frame.origin.y,
                                         width: fixedSize, 
                                         height: nativeAd.mediaData.preferredHeightWithFixedWidth(fixedSize))
        
    }

    ...
    self.nativeAdView.nativeAd = nativeAd
    ...
}

Collection View의 Insets 적용 여부​

캐로셀은 내부적으로 UICollectionView 를 사용합니다.
서비스의 MediaView 배치 방법에 따라 여백을 지정할 필요가 있다면 다음 옵션을 사용합니다.

GFPNativeAdRenderingSetting의 richMediaInsets 값으로 제어하며 기본값은 UIEdgeInsetsZero 입니다.

정보

캐러셀 광고는 GFPNativeAdRenderingSetting을 사용합니다. richMediaInsets 외에 사용 가능한 다른 옵션은 네이티브 렌더링 옵션을 참고해 주세요.

참고 이미지

self.adLoader = GFPAdLoader(unitID: self.unitId, 
                            rootViewController: self.rvc, 
                            adParam: self.nativeInfo.param)

let nativeOptions = GFPAdNativeOptions()
nativeOptions.renderingSetting = GFPNativeAdRenderingSetting()
nativeOptions.renderingSetting.richMediaInsets = UIEdgeInsets(top: 0, left: 16, bottom: 16, right: 16)
self.adLoader.setNativeDelegate(self, nativeOptions: nativeOptions)

슬롯 플레이스홀더 설정​

캐러셀 광고는 매체 측에서 플레이스홀더 및 로드 실패 이미지를 별도로 설정할 수 있습니다. GFPNativeAdRenderingSetting의 아래 프로퍼티를 통해 로딩 색상과 이미지를 지정합니다.

프로퍼티설명
slotLoadingColor슬롯 로딩 중 표시할 배경 색상 (라이트 모드)
slotLoadingDarkColor슬롯 로딩 중 표시할 배경 색상 (다크 모드)
slotPlaceHolderImage슬롯 로드 실패 시 표시할 이미지 (라이트 모드)
slotPlaceHolderDarkImage슬롯 로드 실패 시 표시할 이미지 (다크 모드)
let renderingSetting = GFPNativeAdRenderingSetting()
renderingSetting.slotLoadingColor     = UIColor(white: 0.9, alpha: 1.0)
renderingSetting.slotLoadingDarkColor = UIColor(white: 0.2, alpha: 1.0)
renderingSetting.slotPlaceHolderImage     = UIImage(named: "placeholder")
renderingSetting.slotPlaceHolderDarkImage = UIImage(named: "placeholder_dark")

let nativeOptions = GFPAdNativeOptions()
nativeOptions.renderingSetting = renderingSetting
self.adLoader.setNativeDelegate(self, nativeOptions: nativeOptions)