使用admob-plus-cordova的Cordova应用广告无法显示求解决方案

你的操作步骤回顾 #

1. 创建Cordova项目：

cordova create AdmobProject
cd AdmobProject

2. 添加AdMob插件（使用官方测试应用ID）：

cordova plugin add admob-plus-cordova --save --variable APP_ID_ANDROID=ca-app-pub-3940256099942544~3347511713

3. 修改www/index.html添加横幅广告代码（使用官方测试广告单元ID）：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
    <meta name="color-scheme" content="light dark">
    <link rel="stylesheet" href="css/index.css">
    <title>Joputa</title>
</head>

<body>
    <script src="cordova.js"></script>
    <script>
        let banner

        document.addEventListener('deviceready', async () => {
            banner = new admob.BannerAd({
                adUnitId: 'ca-app-pub-3940256099942544/6300978111',
            })

            banner.on('impression', async (evt) => {
                await banner.hide()
            })

            await banner.show()
        }, false)
    </script>
</body>

</html>

修复建议 #

• 移除广告立即隐藏逻辑
  当前代码中impression事件会在广告展示瞬间调用banner.hide()，导致广告刚加载就被隐藏，直接注释或删除这段代码：

  // banner.on('impression', async (evt) => {
  //     await banner.hide()
  // })
  

• 添加AdMob初始化步骤
  在创建BannerAd实例前，必须先完成插件初始化，否则广告请求会失败：

  document.addEventListener('deviceready', async () => {
      // 先初始化AdMob
      await admob.initialize();
      
      banner = new admob.BannerAd({
          adUnitId: 'ca-app-pub-3940256099942544/6300978111',
      })
  
      await banner.show()
  }, false)
  

• 添加错误监听排查问题
  给BannerAd添加加载失败监听，通过控制台日志定位具体错误：

  banner.on('loadfail', (err) => {
      console.error('横幅广告加载失败:', err);
  });
  

  可以通过Chrome调试工具（chrome://inspect）连接设备查看控制台输出，或在Android Studio的Logcat中过滤AdMob相关日志。

• 检查平台配置与权限

  1. 确认config.xml中已正确配置应用ID：

     <platform name="android">
         <preference name="ADMOB_APP_ID_ANDROID" value="ca-app-pub-3940256099942544~3347511713" />
     </platform>
     

  2. 确保AndroidManifest.xml包含必要权限（插件通常会自动添加，可手动验证）：

     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
     

• 优化测试环境

  1. 使用真实Android设备测试，部分模拟器存在广告加载兼容性问题；
  2. 确保设备网络稳定，广告加载需要正常联网；
  3. 关闭设备上的广告拦截类应用，避免阻止AdMob请求。

内容的提问来源于stack exchange，提问作者Pablo D.