如何使用 NextJS 13 实施 Google Analytics？
Fla*_*eau 25 google-analytics next.js
//GoogleAnalytics.tsx
"use client";
import Script from "next/script";
const GoogleAnalytics = ({ GA_TRACKING_ID }: { GA_TRACKING_ID: string }) => {
return (
<>
<Script
src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
strategy="afterInteractive"
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', ${GA_TRACKING_ID});
`}
</Script>
</>
);
};
export default GoogleAnalytics;
//layout.tsx
import GoogleAnalytics from "@/components/molecules/GoogleAnalytics";
import { ReactNode } from "react";
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en">
<GoogleAnalytics GA_TRACKING_ID={process.env.GA_TRACKING_ID} />
<body>
{children}
</body>
</html>
);
}
使用此代码，脚本标签将正确填充我的 ID G-XXXXXXX。
但是，加载页面时，我在浏览器控制台中收到“G 未定义”错误。
VM689:6 Uncaught ReferenceError: G is not defined
at <anonymous>:6:26
at loadScript (webpack-internal:///(:3000/app-client)/./node_modules/.pnpm/next@13.2.4_dpxg4zawgzznnxdt7it3f5d76m/node_modules/next/dist/client/script.js:91:19)
at eval (webpack-internal:///(:3000/app-client)/./node_modules/.pnpm/next@13.2.4_dpxg4zawgzznnxdt7it3f5d76m/node_modules/next/dist/client/script.js:182:17)
at commitHookEffectListMount (webpack-internal:///(:3000/app-client)/./node_modules/.pnpm/next@13.2.4_dpxg4zawgzznnxdt7it3f5d76m/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:26416:26)
我已经尝试将 GoogleAnalytics 标签放置在 body 中以及 head.tsx 中。同样的错误。
Fla*_*eau 21
我发现“G未定义”代表什么。G 实际上是跟踪 ID 的第一个字母。通过在这里使用模板字符串，我没有意识到最终的代码是错误的。我在这里不是导入字符串，而是字面上导入跟踪 ID，因此它被视为变量。
为了解决这个问题，我简单地添加了引号：
gtag('config', '${GA_TRACKING_ID}');
| 归档时间： |
|
| 查看次数： |
9217 次 |
| 最近记录： |