Back to Blog

我把个人网站的 GA 和 GSC 接上了：一篇小白也能跟着做的实操记录

•林小卫很行

项目上线之后，我最近补了一件很真实的事。

把我的个人网站 xiaoweibox.top 接入 Google Search Console 和 Google Analytics。

一个是 Google 能不能找到我。

另一个是用户来了之后，到底看了什么。

这篇文章就记录一下完整过程。不是什么高深教程，就是个人开发者把网站正式接入 GA 和 GSC 的实操笔记。

如果你也有个人主页、作品集、博客、工具站，尤其是部署在 Vercel、域名托管在 Cloudflare 这种常见组合上，这篇应该可以直接照着走。

先说结论：GA 和 GSC 都值得接

我一开始也有点混淆。GA 和 GSC 不都是 Google 的网站数据工具吗？

后来我发现，它们看的其实是两段不同的旅程。

GSC 看的是用户来之前。Google 有没有发现你的页面？有没有收录？用户在 Google 搜索里用什么关键词看到了你？你的页面在搜索结果里曝光了多少次、点击了多少次？

GA 看的是用户来之后。用户进站之后看了哪些页面？从哪里来？停留多久？有没有点击按钮、下载文件、使用工具、提交表单？

简单整理成表格：

问题 用 GSC 用 GA
Google 是否收录了页面 是 否
搜索关键词、排名、曝光 是 否
sitemap、索引问题 是 否
用户进入网站后的行为 否 是
页面浏览、停留、跳出 不适合 是
按钮点击、转化事件 否 是
流量来源分析 搜索内较强 全渠道较强

我现在的理解是这样的。GSC 是搜索侧的体检报告，GA 是站内行为的仪表盘。这两个工具各看各的一段，合起来就是完整链路。

举个例子。GSC 可能告诉你。

你的个人网站在「David Lam portfolio」这个词下曝光了 500 次，点击了 20 次。

GA 则可能告诉你。

这 20 个用户进来后，12 个看了项目页，3 个点了 GitHub，1 个点了联系邮箱。

这时候你就知道，不只看有没有人来，而是 Google 有没有展示你、用户有没有点进来、点进来以后有没有发生你想要的行为。

我的站点情况

我的个人网站是：

xiaoweibox.top

个人网站 xiaoweibox.top 首页截图

还有一个子域名工具站：

wechat-tool.xiaoweibox.top

子域名工具站 wechat-tool 首页截图

域名 DNS 在 Cloudflare，网站部署在 Vercel。

这里有一个关键点：GSC 的域名验证看 DNS 在哪里，不看你的网站部署在哪里。

所以虽然网站部署在 Vercel，但如果 DNS 记录在 Cloudflare，就要去 Cloudflare 添加 GSC 给的 TXT 验证记录。

另外，GSC 和 GA 对根域名、子域名的处理也不一样。

GSC 建议添加 Domain property。

在 GSC 里添加：

xiaoweibox.top

不要加 https://，不要加 /。

这样它会覆盖：

https://xiaoweibox.top
https://www.xiaoweibox.top
https://wechat-tool.xiaoweibox.top

也就是根域名和所有子域名。

GA 看的是哪个页面加载了 GA tag，哪个页面才会被统计。

所以如果你有两个站：

xiaoweibox.top
wechat-tool.xiaoweibox.top

那两个站的代码里都要接入 GA。

我这里选择让两个站共用一个 GA4 Property 和 Measurement ID，后面在 GA 里可以通过 hostname 区分。

第一步：接入 GSC

先打开 Google Search Console，用 Google 账号登录。

添加网站资源时，我选择的是 Domain property，输入：

xiaoweibox.top

然后 GSC 会给一条 DNS TXT 记录。

因为我的 DNS 在 Cloudflare，所以我去 Cloudflare 的 DNS 记录里添加这条 TXT。注意，Cloudflare 那个橙色云朵是否开启不影响 TXT 验证。

添加后回到 GSC 点验证，成功之后会看到这个页面。

GSC 域名所有权验证成功

这里点 GO TO PROPERTY 就可以进入这个网站资源。

第二步：提交 sitemap

进到 GSC 之后，左侧菜单里有：

Indexing -> Sitemaps

GSC 后台 Sitemaps 菜单入口

我一开始以为直接填：

sitemap.xml

就可以了，结果报错。

GSC 提交相对路径报错

原因是我添加的是 Domain property，它不是某一个固定 URL 前缀，所以这里要填完整 sitemap 地址。

最后我提交了两个：

https://xiaoweibox.top/sitemap.xml
https://wechat-tool.xiaoweibox.top/sitemap.xml

如果你也是根域名加子域名，并且两个站都有独立 sitemap，就可以都提交到同一个 Domain property 里。

提交后，GSC 的 Pages / Indexing 数据不会马上出来。它可能显示 Processing，等 1 到 2 天很正常。

我还用 URL Inspection 检查了首页：

https://xiaoweibox.top/
https://wechat-tool.xiaoweibox.top/

两个都显示 URL is on Google，这就说明最基础的搜索收录链路是通的。

第三步：创建 GA4

GSC 搞定之后，下一步就是 GA。

打开 Google Analytics，用 Google 账号登录，创建 Account。Account name 只是内部管理名字，不会显示在网站上。我这里填了自己的名字。

GA 创建 Account

然后创建 Property。

Property name 建议写清楚一点，比如：

xiaoweibox.top

时区建议选自己的主要工作时区。比如人在中国，就选 China / Shanghai 相关时区，这样每天的数据切分不会按美国时间来。

GA 创建 Property

接下来 GA 会问一些 Business details。

个人网站、工具站、小项目，Business size 直接选：

Small - 1 to 10 employees

行业分类可以选最接近的，比如 Internet & Telecom、Computers & Electronics 之类。

GA 填写 Business details

Business objectives 我选的是：

Understand web and/or app traffic
View user engagement & retention

因为我现在主要想知道：

  • 有多少人访问
  • 用户从哪里来
  • 他们看了哪些页面
  • 工具站有没有被实际使用

GA 选择 Business objectives

如果你的网站现在不是卖东西，不需要选 Drive sales。

如果你的站不是收集销售线索，也不需要选 Generate leads。

然后会出现 Google Analytics Terms of Service Agreement。

国家或地区这里，我的理解是按网站所有者或账号主体所在地区选。个人在中国运营，就选 China。

下面 GDPR 的 Data Processing Terms，我也勾选了。公开网站有可能被欧洲用户访问，勾上更稳妥。

GA 服务条款和国家选择

第四步：创建 Web Data Stream

接下来 GA 会问你从哪里收集数据。

因为这是网站，不是 App，所以选择 Web。

GA 创建 Web stream

创建 Web stream 时，我填的是：

Website URL: https://xiaoweibox.top
Stream name: xiaoweibox.top

Enhanced measurement 保持开启。

它会自动记录一些基础事件，比如：

  • page_view
  • scroll
  • outbound click
  • file download

GA Data stream 配置完成

创建完成后，GA 会给你一个 Measurement ID，长这样：

G-XXXXXXXXXX

这个 ID 就是接入代码要用的东西。

第五步：把 GA tag 加到 Next.js 项目里

我这个项目是 Next.js + Vercel。

GA 给的原始代码长这样：

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-5VQVQ4CL91"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
 
  gtag('config', 'G-XXXXXXXXXX');
</script>

在 Next.js 里，我没有直接把这段 HTML 复制进页面，而是用 next/script 放到根 layout 中。

大概结构是这样：

import Script from "next/script";
 
const GA_MEASUREMENT_ID =
  process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID ?? "G-XXXXXXXXXX";
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>
        {children}
 
        <Script
          src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
          strategy="afterInteractive"
        />
        <Script id="google-analytics" strategy="afterInteractive">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){window.dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', ${JSON.stringify(GA_MEASUREMENT_ID)});
          `}
        </Script>
      </body>
    </html>
  );
}

这里有几个注意点。

  1. 放在根 layout，确保所有页面都有 GA。
  2. 用 strategy="afterInteractive"，不阻塞首屏加载。
  3. 用环境变量 NEXT_PUBLIC_GA_MEASUREMENT_ID，以后换 ID 不用改代码。
  4. 代码里留 fallback，即使环境变量没配，也会用默认 ID。

因为我的个人主页和 wechat-tool 是两个独立站，所以两个 Next.js app 的根 layout 都加了。

第六步：在 Vercel 配环境变量

虽然代码里有 fallback，不配环境变量也能跑，但更规范的方式还是在 Vercel 里配：

NEXT_PUBLIC_GA_MEASUREMENT_ID=G-5VQVQ4CL91

Vercel 配置环境变量

这里有几个小细节。

Sensitive 可以关掉。GA Measurement ID 不是密钥，它本来就会暴露在前端代码里。

Environment 选 Production 就可以。如果你经常用 Preview 环境测试，也可以选 Production and Preview。但我一般不怎么验证 Preview，经常直接上 Production。为了避免 Preview 访问污染数据，我最后只选了 Production。

注意不要填错。

我这里还踩了一个很小但很真实的坑。一开始 homepage 对应的 Vercel 环境变量少填了开头的 G，变成了：

-XXXXXXXXXX

结果 wechat-tool 有数据，homepage 没数据。

后来检查线上 HTML 才发现 homepage 加载的是：

https://www.googletagmanager.com/gtag/js?id=-XXXXXXXXXX

改成：

G-5VQVQ4CL91

重新 deploy 后就好了。

第七步：测试 GA 是否安装成功

部署之后，回到 GA，可以点 Test installation。

如果检测成功，会看到。

GA Tag 检测成功

页面里还有两个提示值得解释一下。

EEA 是什么？EEA 是 European Economic Area，欧洲经济区。这个提示是在说，如果你有欧洲用户，最好配置 Consent Mode，也就是用户同意 cookie / analytics 之前，先告诉 Google 哪些数据能收、哪些不能收。

我现在这个阶段只是个人网站基础统计，没有做 Google Ads 再营销，也没有复杂广告投放，所以先暂时不处理。

后续如果要更合规，可以再加 cookie consent banner 和 Google Consent Mode。

Install with a CMS or website builder 是什么？这是给 WordPress、Wix、Squarespace、Shopify 这类建站工具用的。我的站是 Next.js + Vercel，已经手动接入，所以不用选。保持 Install manually 就可以。

第八步：看 Realtime

最后进入 Reports -> Realtime。

我打开 xiaoweibox.top 和 wechat-tool.xiaoweibox.top 后，Realtime 里已经能看到 2 个 active users。

GA Realtime 显示活跃用户

这两个大概率就是我自己。

刚开始数据都是自己测试出来的，很正常。

真正的数据要等网站自然有访问之后再看，而且不要只看 Realtime。Realtime 只是看现在有没有人，正式分析还是要看后面的 Reports。

一个小白容易误解的地方

GA 页面有时候会显示。

Data collection isn't active for your website.
If you installed tags more than 48 hours ago, make sure they are set up correctly.

这个提示不一定代表你装错了。如果你刚刚装好 tag，它可能只是后台状态还没刷新。

判断是否真的通了，可以看三件事。

  1. Test installation 是否 detected。
  2. 浏览器 Network 里有没有 google-analytics.com/g/collect。
  3. Realtime 里有没有 active users。

我当时在 wechat-tool 里已经看到类似请求：

https://www.google-analytics.com/g/collect?...&en=page_view

这就说明浏览器已经真的把 page_view 发给 GA 了。

总结：上线后这几件事值得补上

如果你有一个正式上线的网站，我现在会建议按这个顺序做。

  1. GSC 添加 Domain property。
  2. 去 DNS 后台加 TXT 记录完成验证。
  3. 提交根域名和子域名的 sitemap。
  4. 用 URL Inspection 检查首页是否在 Google 上。
  5. GA 创建 Account、Property、Web stream。
  6. 把 Google tag 加到网站代码里。
  7. Vercel 配 NEXT_PUBLIC_GA_MEASUREMENT_ID。
  8. 部署后用 Test installation 和 Realtime 验证。

GSC 负责让你知道 Google 有没有找到你。

GA 负责让你知道用户来了以后做了什么。

这两个工具不复杂，但很像网站正式上线之后的一道分水岭。接上它们之后，你的网站就不再只是做出来了，而是开始进入你能观察它、理解它、优化它的阶段。

对于个人网站、作品集、博客、小工具站来说，这一步很值得做。

← Previous Post
出海第一步：用 PayPal CN 开通个人卖家账户，20分钟搞定全球收款
Next Post →
接上 Bing 和 Clarity 后，我把搜索引擎四件套彻底理清了