技术篇：Google 统计服务
Next.js实战教程 - 系列文章
学习目标：掌握 Google 统计服务接入方式
Google Analytics 是一个功能强大的工具，帮助开发者和网站所有者追踪网站流量、用户行为、以及其他重要的分析数据。将 Google Analytics 集成到项目中，可以为你提供深刻的用户洞察，帮助优化网站性能。本文将详细介绍如何在 Next.js 13 中接入 Google Analytics。
为什么使用 Google Analytics？ #
Google Analytics 提供了丰富的功能和数据，包括：
- 实时数据：实时监控用户在网站上的活动。
- 受众分析：了解用户的地理位置、设备、浏览器等信息。
- 行为分析：分析用户在网站上的操作路径和停留时间。
准备工作 #
在开始集成 Google Analytics 之前，你需要完成以下准备工作：
- 创建 Google Analytics 帐号：如果你还没有 Google Analytics 帐号，可以通过 Google Analytics 官网 创建一个新的账号，并设置一个新的属性。
- 获取跟踪 ID：在 Google Analytics 中，为你的网站创建一个新的属性，并获取跟踪 ID，格式通常为
G-XXXXXXXXXX。
- 创建账号
- 创建媒体资源
- 商家描述
- 业务目标
- 数据收集
- 设置数据流
- 设置 Google 代码
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LZHFHGMSKZ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-LZHFHGMSKZ');
</script>
在 Next.js 13 中集成 Google Analytics #
在 Next.js 13 中集成 Google Analytics 主要分为以下几个步骤：安装必要的依赖，配置 Google Analytics 跟踪代码，并在组件中加载 Google Analytics 脚本。
目前 Next.js 已经发布了实验性质的三方包，由于还没有正式的 Release，因此我们还用传统的方式集成。 https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries#google-analytics
配置 Google Analytics 跟踪代码 #
在 app 目录下创建 google-analytics.js
// google-analytics.js
"use client";
import Script from "next/script";
const GoogleAnalytics = () => {
const GA_TRACKING_ID = "G-LZHFHGMSKZ";
return (
<>
<Script
strategy="afterInteractive"
src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
/>
<Script
id="gtag-init"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${GA_TRACKING_ID}', {
page_path: window.location.pathname,
});
`,
}}
/>
</>
);
};
export default GoogleAnalytics;
然后将代码 app/layout.js 中
import GoogleAnalytics from "./google-analytics";
export default function RootLayout({ children }) {
return (
// https://github.com/pacocoursey/next-themes
// 不加suppressHydrationWarning会有警告
<html lang="en" suppressHydrationWarning>
<body>
<GoogleAnalytics />
<AuthProvider>
<ThemeProvider attribute="class" defaultTheme="dark">
<Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
</ThemeProvider>
</AuthProvider>
</body>
</html>
);
}
- Script 组件：
next/script组件用于动态加载第三方脚本，strategy="afterInteractive"表示在页面交互之后加载脚本，以减少初始加载时间。
测试集成是否成功 #
在你的网站上成功集成 Google Analytics 后，你可以通过以下方式进行测试：
- 浏览器控制台：打开浏览器控制台，导航到你的 Next.js 网站，并确保没有出现与 Google Analytics 相关的错误。
- 实时数据：登录到 Google Analytics 仪表板，导航到“实时数据”部分，查看是否可以看到当前访问你网站的用户数据。
进阶功能：事件追踪 #
除了基本的页面访问数据外，Google Analytics 还支持事件追踪，让你能够跟踪用户在网站上的特定操作，如点击按钮、提交表单等。
自定义事件追踪 #
你可以通过 gtag 函数手动发送事件到 Google Analytics。例如，在一个按钮点击事件中发送一个自定义事件：
// 在页面或组件中
const handleClick = () => {
window.gtag('event', 'button_click', {
event_category: 'button',
event_label: 'cta_button',
});
};
return <button onClick={handleClick}>点击我</button>;
最佳实践 #
使用环境变量管理跟踪 ID #
为了确保生产环境和开发环境的配置分离，建议使用环境变量管理 Google Analytics 的跟踪 ID。你可以在 .env 文件中定义跟踪 ID：
NEXT_PUBLIC_GA_TRACKING_ID=G-XXXXXXXXXX
然后在代码中使用它：
const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_TRACKING_ID;
在开发环境中禁用 Google Analytics #
为了避免在开发过程中生成不必要的分析数据，你可以在开发环境中禁用 Google Analytics。
if (process.env.NODE_ENV === 'production') {
// 加载 Google Analytics 脚本
}
总结 #
将 Google Analytics 集成到 Next.js 13 项目中，可以帮助你更好地了解用户行为和网站性能。通过本文的步骤，你可以轻松配置 Google Analytics，并确保在不同环境中合理管理和使用跟踪信息。通过事件追踪等进阶功能，你还可以获得更精细的用户行为数据，从而优化网站内容和用户体验。