Jetpack Compose中AdMob原生广告点击事件如何处理？

我正尝试在Jetpack Compose中实现适配应用设计的AdMob原生广告，但不清楚该如何处理点击事件。我知道可以通过ViewBinding实现，但Jetpack Compose作为Android开发的未来，肯定有对应的实现方式。广告的标题、正文和号召性文本均能正常加载显示，但我不知道该如何让点击事件生效。AdMob SDK在传统XML视图中会自动处理广告资源的点击，但我不知道如何在Compose中实现这一点。另外，原生广告本应支持自定义，但无法自定义点击按钮的情况显得不太合理。请问目前Compose中是否无法实现该功能，必须使用XML编写广告代码？或者我该采用何种方式解决？

我的可组合函数代码如下：

object Advertising {
        var currentImageAd: NativeAd? by mutableStateOf(null)
    }
    
    @Composable
    fun ImageAd(modifier: Modifier = Modifier, adId: String, nativeAd: NativeAd?, setNativeAd: (NativeAd?) -> Unit) {
        val context = LocalContext.current
        var iconPainter = rememberAsyncImagePainter(
            model = ImageRequest.Builder(LocalContext.current)
                .data(nativeAd?.icon)
                .size(coil.size.Size.ORIGINAL)
                .build()
        )
    
        DisposableEffect(Unit) {
            val adLoader = AdLoader.Builder(context, adId)
                .forNativeAd { ad ->
                    if (nativeAd == null) {
                        setNativeAd(ad)
                    }
                }
                .withAdListener(object : AdListener() {
                    override fun onAdFailedToLoad(loadAdError: LoadAdError) {
                    }
                })
                .withNativeAdOptions(NativeAdOptions.Builder().build())
                .build()
    
            adLoader.loadAd(AdRequest.Builder().build())
    
            onDispose {
    
            }
        }
    
        nativeAd?.let { adData ->
            Box.SimpleBox(modifier,
                icon = R.drawable.advertisement,
                iconColor = colors.ad,
                headline = adData.headline,
                body = adData.body
            ) {
                Row(modifier = Modifier.height(IntrinsicSize.Max), horizontalArrangement = Arrangement.spacedBy(Padding.ContentSeparation.standard)) {
                    Image(painter = iconPainter,
                                contentDescription = null,
                                modifier = Modifier
                                    .fillMaxHeight()
                                    .aspectRatio(1f)
                            )
                    Button_Basic(shape = Shapes.tight, 
                         color = colors.ad, 
                         text = adData.callToAction ?:"Mehr", 
                         icon = R.drawable.web_exit, 
                         onClick = { 
                               //What to call here? 
                         })
                }
            }
        }
}

解决方案 #

不需要退回到XML，Compose中完全可以通过AdMob NativeAd的API手动处理点击事件，核心是调用performClick方法并指定对应的广告资源类型，同时记得记录广告曝光和清理资源：

1. 处理CTA按钮点击
   在Button_Basic的onClick回调中，调用nativeAd.performClick()并传入NativeAd.ASSET_CALL_TO_ACTION，这会触发AdMob的点击追踪逻辑：

onClick = {
    adData.performClick(NativeAd.ASSET_CALL_TO_ACTION)
}

2. 记录广告曝光（推荐）
   当广告成功渲染后，调用recordImpression()来告诉AdMob广告已经被用户看到，这对广告统计很重要：

nativeAd?.let { adData ->
    // 添加这行代码
    LaunchedEffect(Unit) {
        adData.recordImpression()
    }
    // 原有的渲染代码
    Box.SimpleBox(...) { ... }
}

3. 处理整个广告容器的点击（可选）
   如果需要让整个广告区域（而不只是CTA按钮）可点击，可以给外层的Box.SimpleBox添加点击事件，调用performClick并传入对应的资源类型（比如NativeAd.ASSET_HEADLINE）：

Box.SimpleBox(
    modifier = modifier.clickable {
        adData.performClick(NativeAd.ASSET_HEADLINE)
    },
    // 其他参数
) { ... }

4. 清理广告资源避免内存泄漏
   在DisposableEffect的onDispose中销毁NativeAd，这是必须的步骤：

onDispose {
    nativeAd?.destroy()
}

修改后的完整代码示例：

object Advertising {
        var currentImageAd: NativeAd? by mutableStateOf(null)
    }
    
    @Composable
    fun ImageAd(modifier: Modifier = Modifier, adId: String, nativeAd: NativeAd?, setNativeAd: (NativeAd?) -> Unit) {
        val context = LocalContext.current
        var iconPainter = rememberAsyncImagePainter(
            model = ImageRequest.Builder(LocalContext.current)
                .data(nativeAd?.icon)
                .size(coil.size.Size.ORIGINAL)
                .build()
        )
    
        DisposableEffect(nativeAd) {
            val adLoader = AdLoader.Builder(context, adId)
                .forNativeAd { ad ->
                    if (nativeAd == null) {
                        setNativeAd(ad)
                    }
                }
                .withAdListener(object : AdListener() {
                    override fun onAdFailedToLoad(loadAdError: LoadAdError) {
                    }
                })
                .withNativeAdOptions(NativeAdOptions.Builder().build())
                .build()
    
            adLoader.loadAd(AdRequest.Builder().build())
    
            onDispose {
                // 销毁广告资源
                nativeAd?.destroy()
            }
        }
    
        nativeAd?.let { adData ->
            // 记录广告曝光
            LaunchedEffect(Unit) {
                adData.recordImpression()
            }
            
            Box.SimpleBox(
                modifier = modifier.clickable {
                    // 处理整个广告容器的点击
                    adData.performClick(NativeAd.ASSET_HEADLINE)
                },
                icon = R.drawable.advertisement,
                iconColor = colors.ad,
                headline = adData.headline,
                body = adData.body
            ) {
                Row(modifier = Modifier.height(IntrinsicSize.Max), horizontalArrangement = Arrangement.spacedBy(Padding.ContentSeparation.standard)) {
                    Image(painter = iconPainter,
                                contentDescription = null,
                                modifier = Modifier
                                    .fillMaxHeight()
                                    .aspectRatio(1f)
                            )
                    Button_Basic(shape = Shapes.tight, 
                         color = colors.ad, 
                         text = adData.callToAction ?:"Mehr", 
                         icon = R.drawable.web_exit, 
                         onClick = { 
                             // 处理CTA按钮点击
                             adData.performClick(NativeAd.ASSET_CALL_TO_ACTION)
                         })
                }
            }
        }
}

内容的提问来源于stack exchange，提问作者user19095510