@nuxtjs/google-adsense

适用于 Nuxt 的 Google AdSense 模块

5.2K 下载•211 星•v3.0.0

TheAlexLichter•

tmorehouse

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

用于 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`	字符串	设置全局默认广告格式。可以通过组件 props 覆盖。
`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 文档

组件 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（如果将 Analytics 与 AdSense 关联，例如 `UA-#######-#`）。默认为插件选项 `analyticsUacct` 中指定的值。
`analytics-domain-name`	字符串	Google Analytics 帐户域名（如果将 Analytics 与 AdSense 关联，例如 `example.com`）。默认为插件选项 `analyticsDomainName` 中指定的值。

组件暴露的内部数据 | 名称 | 类型 | 描述 | ____ | ____ | ___________ | showAd | 方法 | 触发 show ad 方法以显示广告。 | updateAd | 方法 | 触发 update ad 方法以刷新广告。 | 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 属性。

许可证

麻省理工学院许可证