1

vuepress配置谷歌访问统计google-analytics

 1 month ago
source link: http://eryajf.net/pages/5ccb6a/#%E6%A3%80%E6%9F%A5%E6%98%AF%E5%90%A6%E6%88%90%E5%8A%9F
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

vuepress配置谷歌访问统计google-analytics

文章发布较早,内容可能过时,阅读注意甄别。

之前博客一直对接的百度访问统计,现在想着对接一下谷歌的访问统计,在此简单记录一下配置流程。

# 注册账号

访问: https://analytics.google.com/ (opens new window) 没有账号注册一个账号。

根据提醒添加自己的网站信息,之后会获取一个统计代码:

1712499056391.png

# 配置插件

市面上有好几款 vuepress 对接的插件,经过一番摸索,发现下边这个比较理想:

安装插件:

yarn add vuepress-plugin-google-analytics-4
# OR npm install vuepress-plugin-google-analytics-4

配置插件:

module.exports = {
  plugins: [
      // Google 统计
	  [
	    'google-analytics-4',
	    {
	      gtag: 'G-PNSZ4B1K60'
	    }
	  ],
  ]
};
1
2
3
4
5
6
7
8
9
10
11

# 检查是否成功

配置完毕之后,将博客重新发布,可通过如下方式检查是否配置成功。

方式一:打开检查,搜索 analytics,每当点击页面可以看到会发起对应的请求。

方式二:通过Tag Assistant Legacy (opens new window)插件进行检测。

方式三:一般配置成功之后,大约等个十来分钟,再回到谷歌访问统计的网站,应该就能看到有对应的检测数据了:

1712499085660.png


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK