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`	字符串	设置全局默认广告格式。可以使用组件属性覆盖。
`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 锚定广告以在底部显示。默认为 `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 文档

组件属性

属性	类型	描述
`ad-slot`	字符串	Google AdSense 广告位。在非测试模式下，此属性为必需。请参阅您的 AdSense 帐户以获取广告位值。
`ad-format`	字符串	可选。有关其他选项，请参阅 AdSense 文档
`ad-style`	对象	应用于渲染的 `<ins>` 元素的样式。默认值：`{ display: 'block' }`。有关对象格式，请参阅 VueJS 样式绑定文档。
`ad-layout`	字符串	可选。请参阅 AdSense 文档
`ad-layout-key`	字符串	可选。请参阅 AdSense 文档
`hide-unfilled`	布尔值	可选。如果为 true，则隐藏未填充的广告。
`page-url`	字符串	可选。如果广告位于需要身份验证的页面上，请设置参考页面 URL（内容相似）。设置后，此属性必须是完全限定的 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 | 跟踪广告元素上的 unfilled 属性。如果 data-ad-state = 'unfilled'，则返回 true。

广告自动更新

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

注意事项

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