学习目标：掌握 Google 统计服务接入方式
Google Analytics 是一个功能强大的工具，帮助开发者和网站所有者追踪网站流量、用户行为、以及其他重要的分析数据。将 Google Analytics 集成到项目中，可以为你提供深刻的用户洞察，帮助优化网站性能。本文将详细介绍如何在 Next.js 13 中接入 Google Analytics。
Google Analytics 提供了丰富的功能和数据，包括：
在开始集成 Google Analytics 之前，你需要完成以下准备工作：
G-XXXXXXXXXX。
<!-- 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 主要分为以下几个步骤：安装必要的依赖，配置 Google Analytics 跟踪代码，并在组件中加载 Google Analytics 脚本。
目前 Next.js 已经发布了实验性质的三方包，由于还没有正式的 Release，因此我们还用传统的方式集成。 https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries#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>
);
}
next/script 组件用于动态加载第三方脚本，strategy="afterInteractive" 表示在页面交互之后加载脚本，以减少初始加载时间。在你的网站上成功集成 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>;
为了确保生产环境和开发环境的配置分离，建议使用环境变量管理 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。
if (process.env.NODE_ENV === 'production') {
// 加载 Google Analytics 脚本
}
将 Google Analytics 集成到 Next.js 13 项目中，可以帮助你更好地了解用户行为和网站性能。通过本文的步骤，你可以轻松配置 Google Analytics，并确保在不同环境中合理管理和使用跟踪信息。通过事件追踪等进阶功能，你还可以获得更精细的用户行为数据，从而优化网站内容和用户体验。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。