Docusaurus数据分析：Google Analytics和GTag集成指南
项目地址: https://gitcode.com/gh_mirrors/do/docusaurus 你是否还在为Docusaurus网站的用户行为数据收集而烦恼？想知道访问者来自哪里、停留多长时间、浏览了哪些页面？本文将详细介绍如何在Docusaurus项目中集成Google Analytics和GTag，帮助你轻松实现网站数据分析，读完你将掌握两种跟踪工具的安装配置方法、参数设置及注意事项。
插件概述
Docusaurus提供了两款官方数据分析插件，分别是Google Analytics插件和GTag插件。Google Analytics插件适用于传统的Universal Analytics（UA）跟踪代码，但已被官方标记为 deprecated（ deprecated），推荐使用更先进的GTag插件。GTag（Global Site Tag）是Google推出的新一代标签框架，支持同时向Google Analytics、Google Ads等多个产品发送数据。
相关插件源码路径：
- Google Analytics插件：packages/docusaurus-plugin-google-analytics/
- GTag插件：packages/docusaurus-plugin-google-gtag/
Google Analytics集成（已废弃）
安装方法
虽然Google Analytics插件已被废弃，但仍可了解其基本使用方法。通过npm安装插件：
npm install --save @docusaurus/plugin-google-analytics
配置示例
在Docusaurus配置文件中添加以下配置：
// 插件配置示例
const config = {
trackingID: 'UA-141789564-1',
anonymizeIP: true,
};
配置参数说明：
trackingID：必填项，你的UA跟踪ID，格式通常为UA-XXXXXXXX-XanonymizeIP：可选，是否匿名化用户IP地址，默认值为false
注意：Google已于2023年7月1日停止支持Universal Analytics，建议尽快迁移到Google Analytics 4并使用GTag插件。详细迁移说明可参考官方文档。
Google GTag集成（推荐）
安装方法
GTag插件是Docusaurus推荐的数据分析解决方案，支持Google Analytics 4。通过npm安装插件：
npm install --save @docusaurus/plugin-google-gtag
如果使用@docusaurus/preset-classic，无需单独安装插件，可直接通过预设选项配置，具体可参考使用插件文档。
配置示例
在Docusaurus配置文件中添加以下配置：
// 插件配置示例
const config = {
trackingID: 'G-999X9XX9XX',
anonymizeIP: true,
};
配置参数说明：
trackingID：必填项，你的GA4跟踪ID，格式通常为G-XXXXXXXXXX，也支持传入多个ID组成的数组anonymizeIP：可选，是否匿名化用户IP地址，默认值为false
配置方法
有两种配置方式可供选择：通过预设选项配置或直接配置插件。大多数用户会选择通过预设选项配置：
// 通过预设选项配置
presets: [
[
'@docusaurus/preset-classic',
{
// 其他预设配置...
gtag: {
trackingID: 'G-999X9XX9XX',
anonymizeIP: true,
},
},
],
]
或直接配置插件：
// 直接配置插件
plugins: [
[
'@docusaurus/plugin-google-gtag',
{
trackingID: 'G-999X9XX9XX',
anonymizeIP: true,
},
],
]
验证安装
集成完成后，可通过以下方法验证安装是否成功：
- 构建生产版本并运行：
npm run build
npm run serve
-
访问网站，打开浏览器开发者工具（F12）
-
在Network面板中查看是否有向
www.googletagmanager.com发送的请求 -
检查Google Analytics后台是否有数据统计
Docusaurus架构概览：
最佳实践
-
开发环境不跟踪：插件在开发环境（
docusaurus start）下默认不激活，不会发送分析数据，避免污染统计结果 -
隐私合规：如果网站面向欧盟用户，建议启用
anonymizeIP: true并添加Cookie同意横幅 -
多平台跟踪：GTag支持同时向多个Google产品发送数据，只需传入多个trackingID：
trackingID: ['G-999X9XX9XX', 'AW-XXXXXXXXX']
- 数据验证：使用Google Tag Assistant工具检查标签配置是否正确
总结
本文介绍了Docusaurus集成Google Analytics和GTag的详细步骤，包括插件安装、配置方法、参数说明及最佳实践。虽然Google Analytics插件已被废弃，但仍提供了其使用方法作为参考。推荐使用GTag插件集成Google Analytics 4，以获得更强大的数据分析能力。
官方文档资源：
通过集成数据分析工具，你可以深入了解网站访问情况，优化内容策略，提升用户体验。开始使用GTag插件，让数据驱动你的网站决策吧！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
