Wenli Zhangs CV 数据追踪指南Google Analytics 埋点 6 个社交按钮的点击【免费下载链接】cvWenli Zhangs CV as Web Front-End Engineer项目地址: https://gitcode.com/gh_mirrors/cv4/cvWenli Zhangs CV 是一个开源的前端工程师网页简历项目。这篇指南将带你弄懂它如何用Google Analytics 数据追踪不仅自动记录页面浏览还精准埋点统计底部 6 个社交按钮的每一次点击是学习前端埋点与网页简历数据分析的教科书级案例。 项目速览一个有数据意识的简历站项目结构非常轻静态页面即可打开index.html/cn.html英文、中文双版本简历页js/index.js页面逻辑配合 pagePiling.js 实现分页滚动切换并做移动端检测scss/main.scss样式入口通过 gulpfile.js 构建为 CSS依赖由 bower.json 管理res/cv.inddPDF 版简历的 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.jsSCSS 构建任务定义Web Front-End Wenli Zhang.pdfPDF 版简历✅小结这个项目用两处极简代码就完整演示了页面浏览 精确事件双埋点方案是新手可以直接照搬的数据追踪入门示例。【免费下载链接】cvWenli Zhangs CV as Web Front-End Engineer项目地址: https://gitcode.com/gh_mirrors/cv4/cv创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考