VitePress 接入 Google Adsense 与 Google Analytics

Google Adsense

• Google Adsense 一般需要在网站的 head 中添加这样的 JavaScript 代码
• 代码在 Google Adsense -> 侧边栏“广告” -> 右侧“获取代码” 中可以找到

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXX"
     crossorigin="anonymous"></script>

• 在 VitePress 中，只需要在 config.ts 中的 head 配置项中添加以下代码

head: [
  [
    'script',
    {
      async: '',
      src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXX',
      crossorigin: 'anonymous'
    }
  ]
]

Google Analytics

• Google Analytics 一般需要在网站的 head 中添加这样的 JavaScript 代码
• 代码在 Google Analytics -> 左下角“管理” -> 媒体资源 -> 数据流 -> 网站 中可以找到，详情可参考官方文档

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX');
</script>

• 在 VitePress 中，只需要在 config.ts 中的 head 配置项中添加以下代码

head: [
  [
    'script',
    {
      async: '',
      src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX'
    }
  ],
  [
    'script',
    {},
    "window.dataLayer = window.dataLayer || [];\nfunction gtag(){dataLayer.push(arguments);}\ngtag('js', new Date());\ngtag('config', 'G-XXXXXXXXXX');"
  ] 1
]