Wenli Zhang‘s CV 数据追踪指南：Google Analytics 埋点 6 个社交按钮的点击-二趣网

Wenli Zhang's CV 数据追踪指南：Google Analytics 埋点 6 个社交按钮的点击

【免费下载链接】cvWenli Zhang's CV as Web Front-End Engineer项目地址: https://gitcode.com/gh_mirrors/cv4/cv

Wenli Zhang's CV 是一个开源的前端工程师网页简历项目。这篇指南将带你弄懂它如何用Google Analytics 数据追踪：不仅自动记录页面浏览，还精准埋点统计底部 6 个社交按钮的每一次点击，是学习前端埋点与网页简历数据分析的教科书级案例。

🔍 项目速览：一个"有数据意识"的简历站

项目结构非常轻，静态页面即可打开：

index.html/cn.html：英文、中文双版本简历页
js/index.js：页面逻辑，配合 pagePiling.js 实现分页滚动切换，并做移动端检测
scss/main.scss：样式入口，通过 gulpfile.js 构建为 CSS，依赖由 bower.json 管理
res/cv.indd：PDF 版简历的 InDesign 源文件

简历最后一页"Learn More"区域有 6 个圆形图标按钮：Twitter、Google+、GitHub、LinkedIn、微博、豆瓣。图标样式由 scss/_components.social.scss 中的"雪碧图 + 背景偏移"实现，悬停时还会变形反馈。

📍 第一步：Google Analytics 埋点代码放在哪

index.html 与 cn.html 的头部都有同一份经典 ga.js 加载代码，做三件事：

_setAccount('UA-38205696-1')—— 声明属性追踪 ID，所有数据都上报到这个属性
_trackPageview——自动记录页面浏览，访客打开任意一版页面即计数
动态创建<script>标签加载 ga.js SDK，并按页面协议自动切换安全加载地址

这个追踪 ID 就是埋点数据的"钥匙"，在 Google Analytics 后台用它才能查到对应数据。

🎯 第二步：6 个社交按钮点击如何被单独追踪

光记浏览量还不够，作者把每个社交按钮单独埋点。在 Learn More 区块（见 index.html），每个<a>按钮都带同一行内联埋点：

_gaq.push(['_trackEvent', 'Follow', 'Twitter', 'InCv']);

这是 Google Analytics 的事件埋点接口，三个参数各有含义：

参数	取值	含义
事件类别	`Follow`	统一归为"关注"类行为
事件动作	`Twitter`/`GPlus`/`GitHub`/`LinkedIn`/`Weibo`/`Douban`	区分点击的是哪个平台
事件标签	`InCv`	标记点击来自 CV 页面

也就是说，访客每点一次"GitHub"，后台立刻多一条Follow / GitHub / InCv事件，直接就能统计出访客对哪个社交平台最感兴趣。

📊 第三步：埋点数据去哪里看

上线后在 Google Analytics 后台：

行为 → 站点内容 → 事件注释：按类别/动作/标签维度查看 6 种社交点击
受众 → 细分：建立"点击过任意社交按钮"的受众段，结合流量来源报表分析追随者画像

💡 提示：经典版 ga.js 已被 GA4 取代，新版语法为gtag('event', ...)，但"定义属性 ID → 自动页面浏览 → 手动事件埋点"三步思路完全一致。

🚀 快速复刻：给自己的页面加上埋点只需 3 步

在 Google Analytics 后台创建属性，拿到追踪 ID
把加载脚本写进页面<head>（可直接参考 index.html 顶部写法）
给想统计的按钮附上事件埋点调用，类别/动作/标签自定义即可

本地体验可执行git clone https://gitcode.com/gh_mirrors/cv4/cv，克隆后用浏览器打开 index.html 即可预览，或把它当成自己的简历页面模板。

📁 项目文件导航

文件	说明
index.html	英文版简历页与 GA 埋点代码
cn.html	中文版简历页
js/index.js	分页滚动与移动端检测逻辑
scss/_components.social.scss	社交按钮雪碧图样式
gulpfile.js	SCSS 构建任务定义
Web Front-End Wenli Zhang.pdf	PDF 版简历

✅小结：这个项目用两处极简代码就完整演示了"页面浏览 + 精确事件"双埋点方案，是新手可以直接照搬的数据追踪入门示例。

【免费下载链接】cvWenli Zhang's CV as Web Front-End Engineer项目地址: https://gitcode.com/gh_mirrors/cv4/cv

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析