跳到主要内容

Google 广告

  • adsense广告
  • 积分墙广告
  • 激励广告
功能Google 官方支持备注
普通展示广告（AdSense）✅iframe 内展示
激励视频广告（Rewarded Ad）✅（Google Ad Manager）通过 GPT API 实现
积分墙广告（Offerwall）❌需第三方广告平台实现
本地调试⚠️ 不可在 localhost需 HTTPS 域名环境

Google 官方目前的广告产品现状​

目前 Google 的广告体系中：

类型支持平台对网页（Web）的支持
AdMob Rewarded Ads（激励视频广告）App（Android / iOS）❌ 不支持 Web，仅限移动应用 SDK
AdSense Auto Ads / Display Ads网站✅ 支持，但不具备激励机制（无法发奖励）
Google Ad Manager Rewarded InventoryApp（SDK）❌ 不支持 Web
Custom Offerwall / Choice-based Ads（实验项目）Web（测试）⚠️ 目前没有开放 SDK，仅为 Google 官方 Demo，不能商用

广告脚本​

Google AdSense​

  • 增加Google AdSense 的异步广告脚本

方案一：

  • 为了让您的网站可以开始展示广告，将ads.txt，然后上传到您网站的根目录。
  • Nuxt的静态文件目录（public/）直接映射到服务器根目录，直接在public目录中添加即可

方案二：

加载Google广告​

如果发现自定义调整不了样式，去掉 data-full-width-responsive和data-ad-format

js
 <ins class="adsbygoogle w-full"
         style="display:inline-block;width:100%;height:153px"
         data-ad-client="ca-pub-9713184199339119"
         data-ad-slot="8799317261"
         data-ad-format="auto"
         data-full-width-responsive="true">
    </ins>
js
(adsbygoogle = window.adsbygoogle || []).push({});

检测广告加载​

  • 1、检测广告 iframe 的加载情况
  • 2、检测广告单元渲染状态：data-ad-status 属性
  • 3、检测 AdSense 脚本加载状态

adsbygoogle回调方法​

1. 核心生命周期回调​

回调方法触发场景代码示例
onLoad广告资源加载完成时触发（非广告内容加载）(adsbygoogle=...).push({ onLoad: () => console.log('SDK loaded') })
onRender广告内容完成渲染时触发(adsbygoogle=...).push({ onRender: () => hideLoading() })
onError广告请求失败时触发onError: (error) => console.error('Error:', error.errorCode)

2. 用户交互回调​

回调方法用途
onVisible广告进入可视区域时触发（需配合 Intersection Observer）
onClick用户点击广告时触发（可能受浏览器安全策略限制）

广告设置​

加载google广告hooks​

js
import { onMounted } from 'vue'

declare global {
  interface Window {
    adsbygoogle: any[]
  }
}

// google广告
export const useGoogleAdsense = () => {
  const loadAdsenseScript = () => {
    const script = document.createElement('script')
    script.src =
      'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9713184199339119'
    script.async = true
    script.crossOrigin = 'anonymous'
    document.head.appendChild(script)
  }

  const initializeAdsense = () => {
    try {
      ;(window.adsbygoogle = window.adsbygoogle || []).push({
        google_ad_client: 'ca-pub-YOUR_PUBLISHER_ID',
        enable_page_level_ads: true
      })
    } catch (error) {
      console.error('Error initializing AdSense:', error)
    }
  }

  onMounted(() => {
    loadAdsenseScript()
  })

  return {
    initializeAdsense
  }
}

自动广告设置​

需要在特定页面，展示广告，在google后台配置了自动广告位，然后需要在对应的路由页面自动展示

  • 1、Google AdSense 的自动广告会根据页面内容自动分析并放置广告,不需要我们手动指定广告位置
  • 2、添加 ads.txt， 让Google 知道授权了 AdSense
  • 3、启用自动广告
    • 设置enable_page_level_ads: true
      • 表示页面级广告，即由Google 自动控制广告
    • 这样 Google AdSense 会自动分析页面结构并放置广告

固定广告设置​

  • 需要设置 <ins> 标签作为广告容器，通过ins标签来指定广告位置
vue
<template>
  <div class="ad-page">
    <!-- 自动广告容器 -->
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-YOUR_PUBLISHER_ID"
         data-ad-slot="YOUR_AD_SLOT"
         data-ad-format="auto"
         data-full-width-responsive="true">
    </ins>
    <div>novel</div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useGoogleAdsense } from '@/hooks/useGoogleAdsense'

const { initializeAdsense } = useGoogleAdsense()

onMounted(() => {
  // 初始化广告
  initializeAdsense()
})
</script>

google广告问题​

  • 广告加载不出的原因？

    • 内容过少、空白页、无实际信息，Google 可能不会投放广告。
    • 内容不合规（如侵权、违规、低质量内容），广告不会展示，甚至账号会被限制。
    • 网络、浏览器、服务器等问题都有可能导致广告不填充
    • 检测是否ins标签的data-ad-status状态
      • data-ad-status="unfilled" 表示系统未返回任何广告，广告单元为空。
      • data-ad-status="filled" ` 系统向广告单元返回了一个广告，该广告正在展示。

  • 广告显示需要的条件？

    • AdSense 账号和网站已通过审核。

    • 页面内容丰富、合规、非空白。

    • 有实际访问量。

    • 广告代码集成正确（自动广告只需 script，手动广告需 ins 标签和 push）。

    • 没有广告拦截插件影响。

    • 广告单元类型和代码一致（如响应式广告、横幅广告等）。

    • 广告主有出价且有合适广告

  • 页面静态内容会影响广告显示吗？

  • google广告客服

google广告不出现处理方式​

  • 当广告单元完成对广告的请求后，AdSense 会向 <ins> 元素添加一个名为 data-ad-status 的参数。 根据系统是否返回广告，此参数将更新为以下项之一：
data-ad-status="filled"系统向广告单元返回了一个广告，该广告正在展示。
data-ad-status="unfilled"系统未返回任何广告，广告单元为空。

处理方式​

  • 1、直接使用CSS 隐藏广告空缺的广告单元ins元素
css
ins.adsbygoogle[data-ad-status="unfilled"] {  
    display: none !important;  
}
  • 2、兼容的容错处理，当google未匹配到广告时，展示我们自己的广告图片。
html
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxx"
     data-ad-slot="xxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true">
    <!-- 就在这里添加自己的图片，类似如下 图片宽高自己定-->
   <a href="https://s.click.taobao.com/HJJzA4u" target="_blank" rel="nofollow"><img src="https://www.panziye.com/wp-content/themes/Git-alpha/assets/img/ads/tb_cu.png" width="900px" height="200px"></a>
</ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

  • css
css
ins.adsbygoogle a {
    display: none;
}
ins.adsbygoogle[data-ad-status="unfilled"] a {
    display: block !important;
}