google激励广告

• 文档：https://support.google.com/admanager/answer/9116812?hl=zh-Hans#traffic_rewarded_ads&zippy=%2C%E6%9F%A5%E7%9C%8B%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81%E4%BA%8B%E4%BB%B6%E8%AF%B4%E6%98%8E%E5%92%8C%E6%BF%80%E5%8A%B1%E5%B9%BF%E5%91%8A%E7%BD%91%E9%A1%B5-api

实现步骤

• 1、在 Google Ad Manager 中创建广告单元

  • 新建广告单元 → 选择类型为 Out-of-page（页面外广告）；
  • 格式选择 Rewarded；
  • 获得广告单元路径，如 /1234567/web_rewarded_ad;

• 2、在网页中加载 Google GPT 脚本

• 3、定义 Rewarded Slot 广告单元 并加载广告

useRewardAd

ts

import { ref } from 'vue'

/**
 * useRewardAd - Google Rewarded Ad Hook
 * 统一管理激励广告加载、展示、回调
 */
export function useRewardAd(adUnitPath: string) {
  const isLoaded = ref(false)
  const isLoading = ref(false)
  const rewardEarned = ref(false)
  const error = ref<string | null>(null)

  let rewardedSlot: any = null

  /**
   * 初始化广告系统（GPT.js）
   */
  const initialize = () => {
    if (typeof window === 'undefined') return
    if (window.googletag?.apiReady) return // 避免重复初始化

    window.googletag = window.googletag || { cmd: [] }
    const script = document.createElement('script')
    script.src = 'https://securepubads.g.doubleclick.net/tag/js/gpt.js'
    document.head.appendChild(script)
  }

  /**
   * 加载激励广告
   */
  const loadAd = () => {
    isLoading.value = true
    isLoaded.value = false
    error.value = null

    window.googletag = window.googletag || { cmd: [] }
    window.googletag.cmd.push(() => {
      rewardedSlot = window.googletag.defineOutOfPageSlot(adUnitPath, window.googletag.enums.OutOfPageFormat.REWARDED)
      if (rewardedSlot) {
        rewardedSlot.addService(window.googletag.pubads())

        // 注册激励事件
        window.googletag.pubads().addEventListener('rewardedSlotReady', (event: any) => {
          if (event.slot === rewardedSlot) {
            isLoaded.value = true
            isLoading.value = false
          }
        })

        window.googletag.pubads().addEventListener('rewardedSlotClosed', (event: any) => {
          if (event.slot === rewardedSlot) {
            if (rewardEarned.value) {
              console.log('✅ 用户观看完成，发放奖励')
            } else {
              console.log('❌ 用户中途退出广告')
            }
          }
        })

        window.googletag.pubads().addEventListener('rewardedSlotGranted', (event: any) => {
          if (event.slot === rewardedSlot) {
            rewardEarned.value = true
          }
        })

        window.googletag.enableServices()
        window.googletag.display(rewardedSlot)
      } else {
        isLoading.value = false
        error.value = 'Rewarded slot creation failed'
      }
    })
  }

  /**
   * 展示激励广告（用户触发）
   */
  const showAd = () => {
    if (!isLoaded.value || !rewardedSlot) {
      console.warn('广告未加载完成')
      return
    }
    rewardedSlot.show()
  }

  return {
    initialize,
    loadAd,
    showAd,
    isLoaded,
    isLoading,
    rewardEarned,
    error
  }
}