📅 最后修改于: 2023-12-03 14:50:04.232000 🧑 作者: Mango
本主题将介绍如何在 Gatsby 网站中使用 Google Analytics 的全局站点标签 (gtag.js)。gtag.js 是 Google Analytics 的最新版本，它提供了对网站流量和用户行为的跟踪和分析。
首先，您需要创建一个 Google Analytics 帐户并获取跟踪 ID。跟踪 ID 是一个标识符，用于对您的网站进行跟踪和分析。
在您的 Gatsby 项目中，您需要安装 gatsby-plugin-google-analytics 插件。这个插件将帮助您轻松地将 Google Analytics 集成到您的网站中。
运行以下命令安装插件：
npm install gatsby-plugin-google-analytics
在 gatsby-config.js 文件中，添加以下配置来指定您的 Google Analytics 跟踪 ID：
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-google-analytics`,
options: {
trackingId: "YOUR_GOOGLE_ANALYTICS_TRACKING_ID"
}
}
]
}
确保将 YOUR_GOOGLE_ANALYTICS_TRACKING_ID 替换为您的实际跟踪 ID。
在你的网站中的每个页面，您需要添加 gtag.js 的全局站点标签。在 Gatsby 中，您可以在 html.js 文件中添加这个标签。
在您的 Gatsby 项目中，找到 src/html.js 文件。在这个文件中，找到以下代码片段：
<head {...props.headAttributes}>
{props.headComponents}
</head>
在这个代码片段之后，添加以下代码来插入 gtag.js 标签：
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_GOOGLE_ANALYTICS_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR_GOOGLE_ANALYTICS_TRACKING_ID');
</script>
确保将 YOUR_GOOGLE_ANALYTICS_TRACKING_ID 替换为您的实际跟踪 ID。
完成上述步骤后，您需要重新编译并部署您的 Gatsby 网站，以使更改生效。
运行以下命令重新编译网站：
gatsby build
然后，将生成的网站文件部署到您选择的托管服务上。
现在，您已成功将 Google Analytics 的全局站点标签 (gtag.js) 集成到您的 Gatsby 网站中。您可以使用 Google Analytics 仪表板来跟踪和分析您的网站的流量和用户行为。