✨ 更新日志
🚀 安装部署
✒ 写作指引
🛠 站点配置
📊 网站统计
⭐ 主题配置
📩 评论插件
🧷 外部插件
🔊 站点订阅
⌨ 开发指引
👨👦👦 联系方式
🤝 购买服务
Clarity站点统计
category
tags
type
status
slug
date
password
Last edited time
Jan 31, 2024 09:39 AM
summary
icon
什么是Clarity
微软推出的完全免费的站点统计数据,它是一个用户行为分析工具,可帮助你了解用户如何通过会话重播和热度地图等功能与网站交互。
优点
Microsoft Clarity有以下这些优点:
- 墙内使用无忧,微软出品。
- 无抽样,100%还原数据。
- 100%免费,
- 对站点大小量级无限制。
- 接近实时的数据更新。
- 不影响网站性能。
- 可与其他分析工具集成。
- 数据安全,不收集敏感信息。
效果
在后台查看实时访客,总访客、文章访问、等信息。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F9fccba2b-79c9-48ca-89b8-47e99740dc92%2FUntitled.png?table=block&id=5724c4a7-497a-4d78-88a1-60f72a4eba48&t=5724c4a7-497a-4d78-88a1-60f72a4eba48&width=1896&cache=v2)
支持实时查看用户访问的动作,您可以身临其境地了解到每一个用户在您的站点中,依次浏览了什么内容,点击了什么按钮,在哪篇文章停留得最久。
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F869b9d4d-38b2-48d9-a019-4d113f6830e0%2FUntitled.png?table=block&id=cc1fd858-8bf0-4f97-b2b0-60c8fe37701a&t=cc1fd858-8bf0-4f97-b2b0-60c8fe37701a&width=1920&cache=v2)
同时clarity支持直接连接您的GoogleAnalytics数据,在clarity后台就可以查看GA的统计数据
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2Fa6fee181-d7c8-451f-9286-b9dd35776536%2FUntitled.png?table=block&id=afb7ef1a-2680-409c-828f-b0c5677dcb98&t=afb7ef1a-2680-409c-828f-b0c5677dcb98&width=1264&cache=v2)
接下来介绍如何部署
创建您的Clarity账户
登录clarity
设置您的站点信息
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F3a7e995d-8b8e-4dca-b36e-1d788b5820f3%2FUntitled.png?table=block&id=589d2eb0-60a9-4cbc-8253-4c99251cbc98&t=589d2eb0-60a9-4cbc-8253-4c99251cbc98&width=972&cache=v2)
获取Clarity的ID
创建好项目后选择手动安装
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F9e1d37a1-9faf-4bbc-96ab-72a7cf7c4dea%2FUntitled.png?table=block&id=343ec6bf-cad2-4b0b-a814-5d7e220e2e98&t=343ec6bf-cad2-4b0b-a814-5d7e220e2e98&width=1376&cache=v2)
页面中的这串10个字符就是您的ID
![notion image](https://www.notion.so/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F6c096b44-beb9-48ee-8f92-1efdde47f3a3%2F256b2291-55a1-4983-916d-5a8ea4e60639%2FUntitled.png?table=block&id=ff0c1371-62f0-4e67-8dd5-418a6890470c&t=ff0c1371-62f0-4e67-8dd5-418a6890470c&width=1589&cache=v2)
配置NotionNext
对应的配置文件在blog.config.js:356行,在NotionNext项目后台添加如下环境变量即可
字段名 | 说明 | 示例值 |
NEXT_PUBLIC_CLARITY_ID
| clarity的id | a1b2c3d4e5 |
您可以在blog.config.js 或者在 vercel环境变量,或者直接在notion-config中配置
Loading...
Last update: