当前位置：首页 > article >正文

vuepress配置谷歌广告-通过vue-google-adsense库

article 2024/11/14 14:47:04

在 VuePress 中可以使用 vue-google-adsense 插件来配置 Google AdSense 广告，这个库可以简化在 VuePress 项目中插入广告的过程。

以下是使用 vue-google-adsense 配置广告的步骤：

1. 安装 `vue-google-adsense` 库

在你的 VuePress 项目根目录下安装 vue-google-adsense：

npm install vue-google-adsense

2. 配置 VuePress 插件

在 VuePress 项目的 .vuepress/config.js 文件中进行配置。通过 enhanceAppFiles 注入 Adsense 组件。

// .vuepress/config.js
module.exports = {
  plugins: [
    [
      'vue-google-adsense',
      {
        adClient: 'ca-pub-7393013649146304', // 替换为你的广告客户 ID
        isNonPersonalizedAds: true, // 可选：是否显示非个性化广告
      },
    ],
  ],
}

3. 在 VuePress 页面中使用广告组件

在你的 VuePress 页面或 Markdown 文件中使用 Adsense 组件来插入广告：

# 我的页面标题

这是页面内容的一部分。

<Adsense
  style="display:block"
  data-ad-client="ca-pub-7393013649146304"
  data-ad-slot="9716578691"
  data-ad-format="auto"
  data-full-width-responsive="true"
/>

在 VuePress 中使用 Google AdSense 时，如果广告没有显示，可能存在以下一些常见问题和解决方案。以下是详细的检查步骤，确保广告能正常显示：

4. 确认 AdSense 账号和广告位的审核状态

新账号和广告位审核：Google AdSense 的新账号和广告位通常需要审核一段时间，只有审核通过后广告才会显示。如果是新账号，建议先检查 AdSense 的后台，确保广告位已被批准。
广告屏蔽：如果页面流量或内容不符合 AdSense 的政策，广告可能会被屏蔽。确保你的页面内容符合 AdSense 的政策。

5. 确保在 `<head>` 中加载了 AdSense 脚本

在 VuePress 的 .vuepress/public/index.html 文件的 <head> 标签中，确保正确加载了 adsbygoogle 脚本：

<!-- .vuepress/public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Site Title</title>
  
  <!-- AdSense Script -->
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7393013649146304"
          crossorigin="anonymous"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

6. 使用 `vue-google-adsense` 插件并检查配置

确保在 .vuepress/config.js 中正确配置了 vue-google-adsense 插件。检查是否启用了非个性化广告（isNonPersonalizedAds）来提高显示率。

// .vuepress/config.js
module.exports = {
  plugins: [
    [
      'vue-google-adsense',
      {
        adClient: 'ca-pub-7393013649146304', // 确保这个 ID 正确无误
        isNonPersonalizedAds: true,
      },
    ],
  ],
}

7. 插入 `<Adsense>` 组件并测试广告位置

在 Markdown 文件中插入 <Adsense> 组件，同时尝试在不同位置（如顶部或底部）查看是否显示。

# 示例文章标题

一些文章内容。

<Adsense
  style="display:block; text-align:center; margin: 20px 0;"
  data-ad-client="ca-pub-7393013649146304"
  data-ad-slot="9716578691"
  data-ad-format="auto"
  data-full-width-responsive="true"
/>

继续其他内容。

8. 在 `mounted` 钩子中重新触发广告（解决 SPA 中的路由问题）

由于 VuePress 是单页面应用（SPA），广告可能不会在路由切换时自动加载。可以在 mounted 钩子中重新触发广告加载。

在 .vuepress/enhanceApp.js 中添加以下代码：

// .vuepress/enhanceApp.js
export default ({ router }) => {
  router.afterEach(() => {
    if (window.adsbygoogle) {
      (adsbygoogle = window.adsbygoogle || []).push({});
    }
  });
};

9. 使用隐私模式或清除缓存测试

有时，浏览器的广告屏蔽插件（如 AdBlock）或隐私模式可能会拦截广告内容。尝试在隐私模式中或禁用广告屏蔽插件后查看广告是否显示。

10. 等待 Google 缓存生效

广告的显示有时需要等待一段时间，因为 Google 可能会缓存广告请求。确保广告配置和代码已经部署到线上环境并等待数小时进行确认。

11. 使用控制台检查是否有错误

打开浏览器开发者工具的控制台，查看是否有相关的错误信息。若存在与 adsbygoogle 相关的错误信息，通常是脚本未加载或配置错误导致的。

经过这些检查后，广告应该能在 VuePress 中成功显示。若仍有问题，可以联系 Google AdSense 支持，确认是否有账号或广告配置方面的问题。

12. 注意事项

合法使用广告：在 Google AdSense 中配置的广告客户 ID 和广告位 ID 要符合规范。
样式控制：可以通过 style 属性控制广告的显示样式。
路由重载广告：如果在单页面应用中切换路由，确保广告能在新页面重新加载，可以通过在 mounted 钩子中调用 (adsbygoogle = window.adsbygoogle || []).push({})。

完成以上步骤后，VuePress 项目中就能成功显示 Google AdSense 广告。

最后vue-google-adsense的链接: https://www.npmjs.com/package/vue-google-adsense

查看全文

http://www.kler.cn/a/388119.html