Ionic AdMob Plus 如何追踪RewardedAd奖励并更新UI金币余额

你当前的代码只完成了激励视频的初始化、加载和展示逻辑，缺少奖励发放的事件监听，按以下步骤修改即可实现需求。

核心逻辑 #

激励视频的奖励发放必须依赖AdMob抛出的reward事件，该事件仅会在用户完整观看完整个广告、满足平台奖励发放规则时触发，不要在广告展示、广告关闭的回调里写发奖励的逻辑，否则会出现用户没看完广告就拿到奖励的漏洞。

完整实现代码 #

先在你的页面/服务里维护用户金币的状态变量，再给RewardedAd实例绑定事件监听，代码如下：

// 替换为你项目中实际的金币存储字段，初始值从本地缓存/后端接口拉取
userCoinBalance: number = 6;
// 每次观看固定发放的金币数
const REWARD_COIN_COUNT = 3;

async loadRewardsAd(): Promise<void> {
  try {
    this.rewarded = new this.admob.RewardedAd({
      adUnitId: this.adRewardedId,
      serverSideVerification: {
        customData: `coin=${REWARD_COIN_COUNT}`,
        userId: '1234567', // 替换为你项目里的真实用户ID
      }
    });

    // 绑定奖励触发回调
    this.rewarded.on('reward', async () => {
      // 1. 累加金币
      this.userCoinBalance += REWARD_COIN_COUNT;
      // 2. 持久化存储：调用后端接口更新用户金币/写入本地存储
      // 示例：await this.api.updateUserCoin(this.userCoinBalance);
      // 3. 触发UI更新，Ionic/Angular项目如果用了OnPush策略，手动调用变更检测即可
      // 4. 可选：弹窗告知用户奖励到账
      console.log(`奖励发放成功，当前金币余额：${this.userCoinBalance}`);

      // 预加载下一条广告，方便下次直接展示
      this.loadRewardsAd();
    });

    // 可选：绑定广告关闭回调，仅做页面状态恢复，不要在这里发奖励
    this.rewarded.on('dismiss', () => {
      console.log('激励视频已关闭');
    });

    // 加载并展示广告
    await this.rewarded.load();
    await this.rewarded.show();
  } catch (error) {
    console.error('激励视频加载或展示失败：', error);
  }
}

避坑提示 #

• 不要把奖励逻辑写在this.rewarded.show()的await后面，show()方法 resolve 仅代表广告成功开始展示，不代表用户看完了广告
• 如果你开启了服务端验证（SSV），客户端的奖励逻辑仅做UI即时反馈，最终金币到账要以后端收到AdMob官方的校验回调为准，避免被恶意用户抓包篡改奖励
• 测试阶段请使用AdMob官方提供的测试广告位ID，避免频繁触发正式广告请求导致广告账号被封禁

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