惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Google Online Security Blog
Google Online Security Blog
S
Security @ Cisco Blogs
Recent Commits to openclaw:main
Recent Commits to openclaw:main
人人都是产品经理
人人都是产品经理
The Hacker News
The Hacker News
W
WeLiveSecurity
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
The Cloudflare Blog
博客园 - 司徒正美
雷峰网
雷峰网
L
LINUX DO - 最新话题
博客园 - 叶小钗
云风的 BLOG
云风的 BLOG
The Last Watchdog
The Last Watchdog
V2EX - 技术
V2EX - 技术
S
Security Affairs
有赞技术团队
有赞技术团队
月光博客
月光博客
T
Threatpost
T
Tor Project blog
O
OpenAI News
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
V
V2EX
Know Your Adversary
Know Your Adversary
Project Zero
Project Zero
博客园 - 三生石上(FineUI控件)
D
Docker
AWS News Blog
AWS News Blog
AI
AI
P
Proofpoint News Feed
K
Kaspersky official blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
D
Darknet – Hacking Tools, Hacker News & Cyber Security
www.infosecurity-magazine.com
www.infosecurity-magazine.com
S
Securelist
F
Fortinet All Blogs
F
Full Disclosure
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
量子位
Hacker News - Newest:
Hacker News - Newest: "LLM"
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
P
Palo Alto Networks Blog
Cyberwarzone
Cyberwarzone
Cisco Talos Blog
Cisco Talos Blog
美团技术团队
N
News | PayPal Newsroom
T
The Blog of Author Tim Ferriss
MyScale Blog
MyScale Blog

HaydenBi Blog

2026 Mercury (水星银行) 开户完整教程 2026 Stripe Atlas 注册美国公司实操指南 春节之旅 - 广州篇 OpenClaw 升级指南: 官方推荐方式与常见报错修复 OpenClaw (原 Moltbot) Gmail 集成教程:邮件自动化与每日摘要 OpenClaw (原 Moltbot) 安装教程: 从 0 搭建本地 AI 助手 Ultra Mobile PayGo 充值教程 2025年终总结 Docker中overlay2磁盘占用爆满清理方案 升级MacOS26无法打开ClashX Pro解决办法 Dokploy安装和部署项目流程 包含多个子项目集成一个项目部署Vercel方法 Spring AI使用ollamaModel和qwen3兼容问题because evalDuration is null错误解决
NextJS接入Google Analytics方法
Hayden Bi · 2025-08-20 · via HaydenBi Blog
Back

Aug 20, 2025 · Hayden Bi

Next.js前端开发NodeJSGoogle Analytics

Share

NextJS接入Google Analytics方法

执行npm安装命令

    npm install @next/third-parties

一般在app下的layout.tsx中引入

import { GoogleAnalytics } from '@next/third-parties/google';

加入GoogleAnalytics代码并且控制只在生产环境使用

// 仅在生产环境启用GoogleAnalytics
    const GA_ENABLED = process.env.NODE_ENV === 'production';
    return (
      <html lang="en">
        <body>{children}</body>
        {/* Google Analytics - 仅在生产环境启用 */}
        {GA_ENABLED && <GoogleAnalytics gaId="your gaID" />}
      </html>
    );

项目部署到生产环境后进去页面,通过F12查看

浏览器开发者工具显示Google Analytics代码

如果有图中的代码则表示Google Analytics代码已经成功加入到项目中,一般这段代码会在最末尾

Google Analytics控制台显示过去30分钟活跃用户数据

如图所示,刚刚访问过后会在过去 30 分钟的活跃用户数 中显示数据

也可以通过左侧菜单的实时概览进行查看

Google Analytics实时概览页面显示访问数据

好了,以上就是NextJS接入Google Analytics接入的全过程,希望对你有所帮助

Comments