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 锚定广告以显示在底部。默认为`false`。有关详细信息，请参阅 AdSense 文档。
`pageLevelAds`	布尔值	启用 AdSense 页面级广告。默认为`false`。有关详细信息，请参阅 AdSense 文档。
`pauseOnLoad`	布尔值	暂停广告请求以获取用户同意使用 cookie 或其他本地存储，以符合 GDPR 的规定。有关详细信息，请参阅 AdSense 文档。`false`。
`tag`	字符串	AdSense 组件标签名称。默认为`adsbygoogle`。
`test`	布尔值	强制 AdSense 进入测试模式（请参阅下文）。

测试模式

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

测试模式使用测试发布商 ID，这样您就不会违反 AdSense 服务条款。

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

用法

在您希望放置广告的任何位置插入<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，该页面应具有类似/相关的內容。

背景

此模块使用 Angular 团队（在 Google AdSense 的帮助下）开发的技术来处理渐进式 Web 应用上的广告更新。

每次请求新广告时，AdSense 参数data-ad-region都会更新为随机值。因此，您不能在<Adsbygoogle />组件上设置data-ad-region属性。

许可证

MIT 许可证