多彩编程 多彩编程MZPH · CODE BLOG
ARTICLE DETAIL

文章详情

深耕前端与后端开发技术的一线实战笔记与踩坑复盘。

GoatCounter 前端接入指南:count.js 脚本的设置、数据参数与 API 方法全解析

GoatCounter 前端接入指南:count.js 脚本的设置、数据参数与 API 方法全解析 数据分析后端【免费下载链接】goatcounterEasy web analytics. No tracking of personal data.项目地址https://gitcode.com/gh_mirrors/go/goatcounter点击查看免费下载GoatCounter 是一款强调隐私保护的轻量级网页统计工具Easy web analytics. No tracking of personal data.而其官方推荐的主流接入方式就是本文要讲解的count.js前端脚本。本文以 tpl/help/js.md 为骨架结合 public/count.js 与 public/count.v5.js 的源码实现、handlers/count.go 的后端接收逻辑系统讲解如何在你的站点中引入count.js、通过data-goatcounter-settings属性与window.goatcounter对象配置统计行为、定制上报数据并掌握count()、url()、filter()、bind_events()、get_query()等核心方法。读完后你可以在自己的网站上完成从基础埋点到事件跟踪、自定义路径、本地测试的完整接入方案。为什么优先使用 count.js将 GoatCounter 添加到网站的主要方式就是使用count.js脚本这也是迄今为止最简单的集成方式。脚本默认托管在http://gc.zgo.at/count.js正式部署时通常使用 https你也可以自行托管或将脚本内容直接内联进页面——相关说明见 tpl/help/countjs-host.md。此外还有带子资源完整性SRI校验的稳定版本可供选择见 tpl/help/countjs-versions.md。一个值得注意的设计决策是该脚本按设计以未压缩unminified形式下发便于任何人轻松审查其行为。脚本本身不大约 3.2KB压缩后也只能省下约 1KB收益有限因此选择了透明可读。这一点与项目隐私透明、代码可审计的理念一致。脚本加载后会向window.goatcounter暴露一系列设置项与方法。从服务端角度看脚本最终会把数据以查询参数的形式发送到/count端点由 handlers/count.go 中的backend.count处理器接收并写入内存存储goatcounter.Memstore.Append(hit)随后在后台任务中落库。设置Settings两种配置方式与全部支持项配置count.js最直接的方式是给script标签加上data-goatcounter-settings属性也可以直接在window.goatcounter上赋值。两种方式效果一致下面分别演示。方式一data-goatcounter-settings 属性例如允许来自本机/内网的请求用于本地联调测试集成script>var s document.querySelector(script[data-goatcounter]) if (s s.dataset.goatcounterSettings) { try { var set JSON.parse(s.dataset.goatcounterSettings) } catch (err) { console.error(invalid JSON in>script // 这段必须放在 count.js 加载 *之前*否则页面浏览可能已发出 // 而且这里的赋值会直接覆盖脚本建立的对象。 window.goatcounter {allow_local: true} /script script>设置说明no_onload页面加载时不执行任何操作不自动上报适用于你想手动调用count()的场景同时也不会绑定任何事件。no_events不自动绑定事件点击跟踪。allow_local允许来自本地地址localhost、192.168.0.0等的请求用于在本地测试集成。allow_frame允许页面处于 frame/iframe 中时上报。endpoint自定义上报页面浏览的端点会覆盖data-goatcounter里的 URL。仅在设置了no_onload时有用。关于endpoint的补充说明对照源码 public/count.js端点的解析优先级是document.querySelector(script[data-goatcounter]).dataset.goatcounter优先找不到data-goatcounter属性时才回退到goatcounter.endpoint。也就是说data-goatcounter属性永远优先于 JS 中设置的endpoint——如果你在 JS 里定制 endpoint就不要在 script 标签上写data-goatcounter。动态按主机名切换端点的完整示例见 tpl/help/modify.md。数据参数Data Parameters定制上报内容你可以自定义发送给 GoatCounter 的数据。有一个关键规则需要牢记默认值仅在值为null或undefined时生效空字符串、数字0或其他任何值都不会触发默认值对照源码中的is_empty判断v null || v undefined || typeof(v) function见 public/count.js。数据参数还支持回调函数默认值会作为参数传入回调回调的返回值才会真正发送到服务端。特别地如果path的回调返回null则完全不会发送任何页面浏览。变量说明path页面路径不含域名或事件名称。默认取link relcanonical的值若存在否则取location.pathname location.search。title人类可读的标题。默认是document.title。referrer访客来源可以是 URL如https://example.com或任意字符串如June Newsletter。默认使用Referer请求头。event将path视为事件而非 URL。布尔值。no_session本次页面浏览不跟踪会话这样即使刷新页面也始终计数。主要用于事件跟踪如统计每一次按钮点击。一般不建议用于普通页面浏览。示例总是上报 /helloscript>script window.goatcounter {path: /hello} /script script>var data { p: (vars.path undefined ? goatcounter.path : vars.path), // path r: (vars.referrer undefined ? goatcounter.referrer : vars.referrer), // referrer t: (vars.title undefined ? goatcounter.title : vars.title), // title e: !!(vars.event || goatcounter.event), // 是否为事件 s: window.screen.width, // 屏幕宽度 b: is_bot(), // 疑似 bot 的标识 q: location.search, // 原始查询串 }处理流程是先取出 path/referrer/title 的值若是函数则暂存为回调再对空值null/undefined/函数套用默认值document.referrer、document.title、get_path()最后依次执行回调。no_session在 vars 中单独处理为真时追加ns参数。默认path的取法get_path()public/count.js会优先检查同域允许www子域差异的link relcanonical否则回退到当前location.pathname location.search。这与 tpl/help/path.md 中关于 canonical URL 与自定义 path 的说明相互印证。更多高级示例在发送前修改数据的更多高级用法如去掉首页跟踪、去掉.html后缀、按主机名动态切换端点见 tpl/help/modify.md控制发送路径的专项文档见 tpl/help/path.md。方法Methods手动控制上报与过滤count.js以async方式加载因此默认情况下你的脚本运行时它可能尚未加载完毕。要安全地使用下面的方法要么去掉async要么用一个简单的轮询回调var t setInterval(function() { if (!window.goatcounter || !window.goatcounter.count) return clearInterval(t) // 在这里安全地使用 goatcounter。 }, 100)count(vars)发送一个页面浏览或事件到 GoatCounter。vars参数即上文数据参数一节描述的对象会被合并进全局的window.goatcounter若其存在。对照 public/count.jscount()的实际执行链路为先调用goatcounter.filter()若返回过滤原因则console.warn(goatcounter: not counting because of: f)并放弃调用goatcounter.url(vars)生成上报 URL若path回调返回了null则提示后放弃优先使用navigator.sendBeacon(url)发送页面卸载时更可靠若sendBeacon不存在或返回false例如被 CSP 内容安全策略拦截则回退为在页面底部插入一张1px透明 GIF 图片请求img.src url并把alt、aria-hiddentrue以保证可访问性与布局影响最小源码见 public/count.js。url(vars)生成将要发送给服务器的 URLvars参数行为与count()一致。由 public/count.js 可知它会调用get_data()组装参数并在查询串中追加一个 5 位随机字符串rnd源码注释解释浏览器不总是遵守 Cache-Control加随机数是为了绕过缓存若找不到端点则warn(no endpoint found)。注意使用url()时你可能仍希望调用filter()来排除预渲染prerender请求及其他各类情况避免把不该计数的请求算进去。filter()判断本次请求是否应被过滤返回一个说明原因的字符串无需过滤时返回false。对照 public/count.js 的完整过滤逻辑它按顺序检查document.visibilityState prerender→ 返回visibilityState预渲染不计页面处于 frame/iframe 且未设置allow_frame→ 返回frame主机名匹配本地地址localhost、127.、10.、172.(16-31).、192.168.、0.0.0.0且未设置allow_local→ 返回localhostfile:协议且未设置allow_local→ 返回localfilelocalStorage中被标记了skipgc t通过#toggle-goatcounter开关→ 返回disabled with #toggle-goatcounter以上均不命中 → 返回false。示例用法var f goatcounter.filter() if (f) { if (console log in console) console.warn(goatcounter: not counting because of: f) return }补充脚本里还内置了一个跳过自己的访问的便捷开关——当location.hash #toggle-goatcounter时切换localStorage中的skipgc标记见 public/count.js。bind_events()为所有带data-goatcounter-click属性的元素绑定点击事件。页面加载时会自动调用除非设置了no_onload或no_events。如果你在页面加载后动态插入元素需要手动调用它。对照 public/count.js绑定逻辑是遍历所有*[data-goatcounter-click]元素跳过已标记goatcounterBound的同时绑定click和auxclick中键点击并把事件名、标题、referrer 一起上报。点击事件的完整用法包括data-goatcounter-click、data-goatcounter-title、data-goatcounter-referrer、data-goatcounter-no-session等属性见 tpl/help/events.md。get_query(name)从当前页面 URL 获取单个查询参数不存在时返回undefined。常用于从 URL 中提取referrer例如script window.goatcounter { referrer: function() { return goatcounter.get_query(ref) || goatcounter.get_query(utm_campaign) || goatcounter.get_query(utm_source) || document.referrer }, } /script script>script>script window.goatcounter {endpoint: {{.SiteURL}}/count} // [.. count.js 的内容 ..] /script自托管不会收到新功能或更新但/count端点保证长期兼容因此脚本永远不会失效。小结count.js的设计处处体现简单 可审计 隐私友好脚本未压缩以便审查通过data-goatcounter-settings或window.goatcounter提供统一配置入口filter()从源头过滤掉预渲染、iframe、本地地址等噪声get_data()对空值、回调、canonical 路径做了细致的默认值处理上报时优先sendBeacon、失败回退 1px 图片请求。配合 tpl/help/events.md 的事件跟踪、tpl/help/modify.md 的数据改写示例和 tpl/help/countjs-versions.md 的版本策略你可以按需组合出从一行埋点到精细事件统计的完整接入方案。如需深入后端行为可以继续阅读接收上报的 handlers/count.go含 bot 检测、IP 忽略列表、Collect选项下的地理位置与语言解析等逻辑。赞分享数据分析后端【免费下载链接】goatcounterEasy web analytics. No tracking of personal data.项目地址https://gitcode.com/gh_mirrors/go/goatcounter点击查看免费下载相关推荐GoatCounter 自托管 count.js 完整指南内嵌脚本与 endpoint 配置实战GoatCounter 自托管 count.js 完整指南内嵌脚本与 endpoint 配置实战 导读 本文聚焦 GoatCounter 官方文档中关于 自托数据分析后端matplotlib 高阶统计图表实战气泡图、面积图、雷达图、玫瑰图与 3D 曲面图绘制指南matplotlib 高阶统计图表实战气泡图、面积图、雷达图、玫瑰图与 3D 曲面图绘制指南 在 Python 100 天学习路线的数据可视化章节中 Day数据分析后端MarkItDown 文件转Markdown教程3分钟装好20格式一次到位MarkItDown 文件转Markdown教程3分钟装好20格式一次到位 MarkItDown 是一个轻量级 Python 工具负责把 PDF、Wor人工智能AI 应用MCP 服务上一篇如何用雀魂牌谱屋快速提升麻将水平从战绩查询到安定段位的完整数据分析指南下一篇香山 XiangShan 处理器贡献指南Bug 报告、提交规范与 PR 自动化标签全解析创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表