@nuxtjs/google-adsense

适用于 Nuxt 的 Google AdSense 模块

5K 下载•211 颗星•v3.0.0

TheAlexLichter•

tmorehouse

注意：此分支适用于兼容 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',
    },
  },
}

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

配置选项

选项	类型	描述
`ID`	字符串	您的 Google AdSense 发布商客户端 ID（例如 `ca-pub-#########`）。在非测试模式下必需。
`adFormat`	字符串	设置全局默认广告格式。可以通过组件属性覆盖。
`analyticsDomainName`	字符串	Google Analytics 账户域名（如果将 Analytics 与 AdSense 关联，例如 `example.com`）。
`analyticsUacct`	字符串	Google Analytics 账户 ID（如果将 Analytics 与 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 进入测试模式（参见下文）。

测试模式

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

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

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

使用

将 <Adsbygoogle /> 组件插入到您希望放置广告的任何位置。

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

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

请参阅 Adsense 文档以获取更多信息。Google Adsense 文档

组件属性

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

组件暴露的内部数据 | 名称 | 类型 | 描述 | ____ | ____ | ___________ |showAd | 方法 | 触发显示广告方法以显示广告。 | updateAd | 方法 | 触发更新广告方法以刷新广告。 | isUnfilled | 计算引用 | 跟踪广告元素上的未填充属性。如果 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 属性。

许可证

麻省理工学院许可证