본문으로 건너뛰기

Jetpack Compose

본 가이드에서는 Jetpack Compose 기반으로 작성된 UI 에서의 GFP Android SDK 연동 방식을 설명합니다.

시작하기​

Jetpack Compose 기반 UI 에서의 광고 렌더링은 AndroidView 를 사용하여 렌더링합니다. 리컴포지션으로 인해 광고가 중복 로딩되는 것을 방지하기 위해 광고 로더와 광고 객체들을 remember 상태로 관리하는 것을 권장드립니다. 또한 광고 표시를 종료하거나 화면을 벗어나는 경우에는 AndroidView.onRelease 또는 DisposableEffect 와 같은 함수를 통해 자원을 해제해야 합니다.

배너 광고​

Banner 는 로드 방식에 따라 GfpAdLoader 를 사용하는 방식과 사용하지 않는 방식을 지원합니다. GfpAdLoader 를 사용해 로딩할 경우, 로딩 완료 시에 GfpBannerAdView 를 전달받아 상태로 관리하여 광고를 표시합니다.

GfpBannerAdView 를 사용한 배너 광고 로드 시​

@Composable
fun BannerAdView(
    adParam: AdParam,
    modifier: Modifier = Modifier
) {
    AndroidView(
        modifier = modifier,
        factory = { context ->
            GfpBannerAdView(context, adParam).apply {
                setAdListener(/* . . . */)
                loadAd()
            }
        },
        onRelease = { view ->
            view.destroy()
        }
    )
}

GfpAdLoader 를 사용한 배너 광고 로드 시​

@Composable
fun BannerAdView(
    adParam: AdParam,
    modifier: Modifier = Modifier
) {
    val context = LocalContext.current
    var adLoader by remember { mutableStateOf<GfpAdLoader?>(null) }
    var bannerAdView by remember { mutableStateOf<GfpBannerAdView?>(null) }

    LaunchedEffect(Unit) {
        adLoader = GfpAdLoader.Builder(context, adParam)
            .withAdListener(/* . . . */)
            .withBannerAd {
                bannerAdView = it
            }
            .build()
            .also { loadAd() }
    }

    bannerAdView?.let { adView ->
        AndroidView(
            modifier = modifier,
            factory = { adView },
            onRelease = { view ->
                view.destroy()
                adLoader?.cancel()
            }
        )
    }
}

네이티브 광고​

GFP SDK 의 네이티브 광고는 아직 Android View 렌더링만을 지원하며, Compose 환경에서는 AndroidViewBinding 을 이용해 렌더링하게 됩니다. 연동 시에 광고를 렌더링 할 xml 형식의 layout 파일과 compose.ui:ui-viewbinding 의존성 및 gradle 설정이 필요합니다.

buildFeatures {
    compose = true
    viewBinding = true
}
dependencies {
    // . . .
    implementation("androidx.compose.ui:ui-viewbinding:<compose-version>")
}
@Composable
fun NativeAdView(
    adParam: AdParam,
    modifier: Modifier = Modifier
) {
    val context = LocalContext.current
    var adLoader by remember { mutableStateOf<GfpAdLoader?>(null) }
    var nativeAd by remember { mutableStateOf<GfpNativeAd?>(null) }

    LaunchedEffect(Unit) {
        adLoader = GfpAdLoader.Builder(context, adParam)
            .withAdListener(/* . . . */)
            .withNativeAd {
                nativeAd = it
            }
            .build()
            .also { loadAd() }
    }

    nativeAd?.let { ad ->
        AndroidViewBinding(
            factory = LayoutNativeAdBinding::inflate,
            modifier = modifier,
            onRelease = { adLoader?.cancel() }
        ) {
            with(nativeAdView) {
                assetsContainer = assetsContainerLayout
                adChoicesView = adChoices
                mediaView = media
                titleView = title.apply { text = ad.title }
                bodyView = body.apply { text = ad.body }
                callToActionView = callToAction.apply { text = ad.callToAction }
                advertiserView = advertiser.apply { text = ad.advertiserName }
                iconView = icon.apply {
                    ad.icon?.let { setImageDrawable(it.drawable) } ?: run { visibility = GONE }
                }
                socialContextView = socialContext.apply {
                    ad.socialContext?.let { text = it } ?: run { visibility = GONE }
                }
                noticeView = notice.apply {
                    ad.notice?.let { text = it } ?: run { visibility = GONE }
                }
                setNativeAd(ad)
            }
        }
    }
}
정보

layout_native_ad.xml 코드는 생략합니다.

네이티브 심플 광고​

GfpAdLoader 를 통해 로드가 완료되면 전달 받은 GfpNativeSimpleAd 객체를 리컴포지션에 안전하도록 상태로 관리하고, AndroidView 에서 factory 또는 update 를 통해 GfpNativeSimpleAdView 에 설정합니다.

@Composable
fun NativeSimpleAdView(
    adParam: AdParam,
    modifier: Modifier = Modifier
) {
    val context = LocalContext.current
    var adLoader by remember { mutableStateOf<GfpAdLoader?>(null) }
    var nativeSimpleAd by remember { mutableStateOf<GfpNativeSimpleAd?>(null) }

    LaunchedEffect(Unit) {
        adLoader = GfpAdLoader.Builder(context, adParam)
            .withAdListener(/* . . . */)
            .withNativeSimpleAd {
                nativeSimpleAd = it
            }
            .build()
            .also { loadAd() }
    }

    nativeSimpleAd?.let { ad ->
        AndroidView(
            modifier = modifier,
            factory = { context -> GfpNativeSimpleAdView(context) },
            update = { view -> view.setNativeSimpleAd(ad) },
            onRelease = { adLoader?.cancel() }
        )
    }
}

보상형 & 전면형 광고​

보상형과 전면형의 경우, AdManager 를 통해 광고를 로드하고 AdEventListener 로부터 전달받은 광고 로드 완료 여부를 상태로 관리하여 로드 완료 시 광고 표시 버튼을 나타나게 합니다. 이 때 showAd() 함수에 전달되는 context 는 Activity 로 캐스팅이 필요하며, 자원 해제 시에는 DisposableEffect.onDispose() 등을 사용하여 destroy() 를 반드시 호출해야 합니다.

Rewarded​

@Composable
fun RewardedAdView(
    adParam: AdParam,
    modifier: Modifier = Modifier
) {
    val context = LocalContext.current
    var adManager by remember { mutableStateOf<GfpRewardedAdManager?>(null) }
    var isAdLoaded by remember { mutableStateOf(false) }

    DisposableEffect(Unit) {
        adManager = GfpRewardedAdManager(context, adParam).apply {
            setAdListener(object : RewardedAdListener() {
                override fun onAdLoaded(ad: GfpRewardedAd) {
                    isAdLoaded = true
                }
            })
            loadAd()
        }

        onDispose {
            adManager?.destroy()
        }
    }

    if (isAdLoaded) {
        Button(
            onClick = { adManager?.showAd(context as Activity) },
            modifier = modifier
        ) {
            Text(text = "Show Rewarded AD")
        }
    }
}

Interstitial​

@Composable
fun InterstitialAdView(
    adParam: AdParam,
    modifier: Modifier = Modifier
) {
    val context = LocalContext.current
    var adManager by remember { mutableStateOf<GfpInterstitialAdManager?>(null) }
    var isAdLoaded by remember { mutableStateOf(false) }

    DisposableEffect(Unit) {
        adManager = GfpInterstitialAdManager(context, adParam).apply {
            setAdListener(object : InterstitialAdListener() {
                override fun onAdLoaded(ad: GfpInterstitialAd) {
                    isAdLoaded = true
                }
            })
            loadAd()
        }

        onDispose {
            adManager?.destroy()
        }
    }

    if (isAdLoaded) {
        Button(
            onClick = { adManager?.showAd(context as Activity) },
            modifier = modifier
        ) {
            Text(text = "Show Interstitial AD")
        }
    }
}
warning

androidx.compose:compose-bom:2024.09.03 미만의 버전에서는 Compose 버그로 인해 impression 또는 click 등의 이벤트가 잘 발화되지 않을 수 있습니다. 정상적인 광고 연동을 위해 2024.09.03 이상의 버전을 사용해주세요.