快速上手 - Flutter 网站统计

1

注册账号

进入系统登录页，已有账号请直接点击登录；新用户点击注册，按提示填写账号、密码并完成验证即可。

图 1 · 注册 / 登录入口

提示：若公司已有团队账号，建议联系管理员邀请加入团队，无需重复注册；多团队账号可在浏览器 localStorage 的 currentOrgId 切换团队。

2

新建项目（添加要统计的网站）

登录后进入左侧菜单 系统管理 → 项目设置，点击右上角 新建项目，填写以下信息：

项目名称：用于在系统内识别，建议填写网站中文名称
项目编码：英文/拼音/字母数字组合，会写入统计代码，建议简短
项目访问域名：要统计的网站完整域名（含 http:// 或 https://），每行一个，可填多个

保存后系统会自动为该项目生成唯一的 Token，用于鉴权上报。

图 2 · 新建项目表单

请注意：只有「项目访问域名」中登记过的域名才会被收录数据，未登记的域名上报将被过滤。后续可在「修改」中扩充域名列表。

3

获取统计代码

项目创建成功后，在项目列表操作列点击 统计代码，弹窗中会展示该项目专属的统计代码片段，点击复制按钮即可。

将复制的代码 粘贴到网站每个需要统计的页面的 </body> 标签之前。如果是模板化网站（WordPress、Discuz、织梦等），只需粘贴到通用模板（footer、layout）即可全站生效。

图 3 · 同步版统计代码

代码示例（实际请以系统生成的为准）：

<script charset="UTF-8" src="https://your-domain/flutter-loader.js"></script>
<script>
  FLUTTER.init({
    autotrack_url: "https://your-domain/autotrack.js",
    project:           "your-project-code",
    token:             "your-token",
    receiver_base_url: "https://your-domain/receiver",
    show_log:          true
  });
</script>

4

异步代码（Vue / React 等 SPA 推荐）

如果你的网站是 Vue / React / Angular / Nuxt / Next 等单页面应用（SPA），或者你希望统计代码 不阻塞页面渲染，请在弹窗中点击 异步代码 切换为异步加载版本。

异步版会通过 JavaScript 动态注入 <script async>，并在脚本加载完成后才调用 FLUTTER.init，因此：

不阻塞 HTML 解析，对首屏渲染 / FCP / LCP 无影响
可以安全地放在 <head> 内
SPA 路由切换自动追踪（is_track_single_page 默认开启）

图 4 · 异步版统计代码

代码示例：

<script>
(function () {
  var s = document.createElement("script");
  s.async = true;
  s.charset = "UTF-8";
  s.src = "https://your-domain/flutter-loader.js";
  s.onload = function () {
    FLUTTER.init({
      autotrack_url: "https://your-domain/autotrack.js",
      project:           "your-project-code",
      token:             "your-token",
      receiver_base_url: "https://your-domain/receiver",
      show_log:          true
    });
  };
  document.head.appendChild(s);
})();
</script>

同步 vs 异步怎么选？

同步版：传统多页站点（PHP/JSP 服务端渲染、静态 HTML），粘贴到 </body> 前即可
异步版：SPA 框架（Vue/React 等）或对性能敏感的站点，推荐使用，可放 <head> 内

5

查看数据

代码安装后 刷新被统计的页面，约 3–5 分钟后 即可在系统中看到第一条数据。

登录控制台进入 项目概览，可查看每个项目的 PV / UV / IP / 跳出率 / 平均访问时长等核心指标，并对比昨日 / 上周环比。更详细的访问明细、来路、受访页面、地域、热力图等可在左侧菜单进入对应报表。

图 5 · 项目概览（核心指标 + 环比）

没看到数据？请按顺序排查：

访问的页面确实包含了统计代码（浏览器 DevTools → Sources 查看）
浏览器 DevTools → Network 中能看到对 /receiver/api/gp?project=...&token=... 的请求，HTTP 状态码为 200
当前访问域名已加入到「项目访问域名」列表（步骤 2）
当前 IP / 浏览器 UA 未被「排除的 IP / 用户代理」过滤

快速上手：5 分钟接入网站流量统计

注册账号

新建项目（添加要统计的网站）

获取统计代码

异步代码（Vue / React 等 SPA 推荐）

查看数据