Google Adsense · Nuxt 模块

注意： 此分支适用于 Nuxt 3 兼容模块。查看 legacy-v2 分支以获得 Nuxt 2 支持。

用于 Nuxt.js 的 Google AdSense 集成。广告会在页面路由更改时更新

设置

使用 yarn 或 npm 将 @nuxtjs/google-adsense 依赖项添加到你的项目中
将 @nuxtjs/google-adsense 添加到 nuxt.config.js 的 modules 部分

{
  modules: [
    // Simple usage
    ['@nuxtjs/google-adsense', {
      id: 'ca-pub-###########'
    }]
 ]
}

使用顶级选项

{
  modules: [
    ['@nuxtjs/google-adsense']
  ],

 googleAdsense: {
    id: 'ca-pub-#########'
  }
}

使用运行时配置

{
  modules: [
    ['@nuxtjs/google-adsense']
  ],

  googleAdsense: {
    onPageLoad: false,
    pageLevelAds: false,
  },

  publicRuntimeConfig: {
    googleAdsense: {
      id: process.env.GOOGLE_ADSENSE_ID,
      test: process.env.GOOGLE_ADSENSE_TEST_MODE === 'true',
    },
  },
}

异步广告代码（//127.0.0.1/pagead/js/adsbygoogle.js）会自动添加到你页面的 <head> 部分。

配置选项

选项	类型	描述
`id`	字符串	你的 Google AdSense 发布商客户端 ID（例如，`ca-pub-#########`）。在非测试模式下时，为必需。
`adFormat`	字符串	设置全局默认广告格式。可以使用组件 props 覆盖。
`analyticsDomainName`	字符串	Google Analytics 帐户域名（如果将分析与 AdSense 关联，例如 `example.com`）。
`analyticsUacct`	字符串	Google Analytics 帐户 ID（如果将分析与 AdSense 关联，例如 `UA-#######-#`）。
`hideFilled`	布尔值	当 `false` 时，未填充的广告将不会被隐藏；当 `true` 时，未填充的广告将被隐藏。默认值为 `false`。
`includeQuery`	布尔值	当 `false` 时，仅检查 `$route.path` 的更改。如果设置为 `true`，则也会考虑 `$route.query`。默认值为 `false`。
`onPageLoad`	布尔值	在页面加载后加载 Adsense 脚本。默认值为 `false`。
`overlayBottom`	布尔值	启用在底部显示的 Adsense Anchor Ads。默认值为 `false`。有关详细信息，请参阅 AdSense 文档。
`pageLevelAds`	布尔值	启用 AdSense 页面级广告。默认值为 `false`。有关详细信息，请参阅 AdSense 文档。
`pauseOnLoad`	布尔值	暂停广告请求，以便根据 GDPR 获得用户同意使用 cookie 或其他本地存储。有关详细信息，请参阅 AdSense 文档。`false`。
`tag`	字符串	AdSense 组件标签名称。默认为 `adsbygoogle`。
`test`	布尔值	强制 AdSense 进入测试模式（见下文）。

测试模式

当在 dev 模式下运行 Nuxt 时，AdSense 模块将自动切换到 test 模式。但是，你可以通过将配置选项 test 设置为 true 来在生产环境中保持测试模式。

测试模式使用测试发布商 ID，这样你就不会违反 AdSense TOS。

请注意，测试广告通常会显示为空白区域，但会具有正确的尺寸（即会占用渲染广告所需的正确空间）。

用法

在你想要放置广告的任何位置插入 <Adsbygoogle /> 组件。

你应该将 <Adsbygoogle /> 组件放置在具有指定（最小/最大）宽度和（最小/最大）高度（可以基于媒体查询）的容器元素内，或者在 <Adsbygoogle /> 组件上使用样式或类来将广告限制为特定尺寸（或多个尺寸）。

使用 ad-slot 属性指定你的 Google AdSense 广告位值（指定为字符串）。

有关更多信息，请参阅 adsense 文档。Google Adsense 文档

组件 props

prop	类型	描述
`ad-slot`	字符串	Google Adsense 广告位。当不在测试模式下时，此 prop 为必需。请参阅你的 AdSense 帐户以获取广告位值。
`ad-format`	字符串	可选。有关其他选项，请参阅 AdSense 文档
`ad-style`	对象	应用于渲染的 `<ins>` 元素的样式。默认值：`{ display: 'block' }`。有关对象格式，请参阅 VueJS 样式绑定文档。
`ad-layout`	字符串	可选。请参阅 AdSense 文档
`ad-layout-key`	字符串	可选。请参阅 AdSense 文档
`hide-unfilled`	布尔值	可选。如果为 true，则隐藏未填充的广告。
`page-url`	字符串	可选。如果广告位于需要身份验证的页面上，则设置引用页面 URL（具有相似内容）。设置后，此 prop 必须是完全限定的 URL（包括协议和主机名）。
`include-query`	布尔值	在每个广告的基础上覆盖全局选项 `includeQuery`。确保页面上的所有广告都具有相同的设置。
`analytics-uacct`	字符串	Google Analytics 帐户 ID（如果将分析与 AdSense 关联，例如 `UA-#######-#`）。默认为插件选项 `analyticsUacct` 中指定的值。
`analytics-domain-name`	字符串	Google Analytics 帐户域名（如果将分析与 AdSense 关联，例如 `example.com`）。默认为插件选项 `analyticsDomainName` 中指定的值。

组件暴露的内部数据 | 名称 | 类型 | 描述 | ____ | ____ | ___________ |showAd | 方法 | 触发显示广告的方法以显示广告。 | updateAd | 方法 | 触发更新广告的方法以刷新广告。 | isUnfilled | 计算出的 ref | 跟踪广告元素上的未填充属性。如果 data-ad-state = 'unfilled'，则返回 true。

自动更新广告

每当你的路由更改或可选地如果你的路由查询参数更改时，任何显示的广告都会更新，就像在正常页面加载时一样。

注意事项

注意： 随意重新加载广告（页面内容更改最少）可能会导致你的 AdSense 帐户被暂停。请参阅 AdSense 的完整使用条款。
Google 需要抓取每个显示广告的页面。确保你的网站 SSR 呈现任何显示广告的页面。未抓取的页面上的广告将不会显示。
当在需要身份验证的页面上放置广告时，请将 <Adsbygoogle /> 组件上的 page-url 设置为你网站上可公开访问的页面的 URL，该页面应具有相似/相关的内容。