如何安装 statpx 追踪代码：任何网站的分步指南

发布于 2026 年 5 月 31 日 • statpx 团队 • 6 分钟阅读 • 入门指南

statpx 追踪代码片段仅两行 HTML。一旦这两行代码在您的网页上，statpx 就会自动开始记录每个页面浏览量 — 无需额外配置、无需来自服务器的 API 调用、无需更改您端的数据库。本指南涵盖了在哪里找到代码、每一行的作用，以及如何在最常见的网站平台上正确添加它。

找到您的追踪代码

在安装任何内容之前，您需要找到特定于您网站的代码。登录 statpx 并转到您的控制台。您添加的每个网站都有一张卡片，其中有一个获取代码片段按钮 — 点击您要追踪的网站。

这将打开代码片段页面，该页面在复制按钮旁显示您已准备好粘贴的追踪代码。您账户中的每个网站都有不同的代码片段，因为每个都有唯一的网站 ID。不要从不同网站复制代码片段并在另一个网站上使用它 — 数据会流入错误的属性。

statpx 代码片段页面显示唯一的两行追踪代码以及复制按钮 — statpx 代码片段页面显示您的唯一两行追踪代码 — 点击复制按钮一次性抓取两行代码

两行代码片段说明

代码片段看起来像这样（用您自己的网站 ID 替代示例）：

<!-- statpx analytics -->
<script src="https://statpx.com/track.js" defer></script>
<script>window._stid = "YOUR_SITE_ID";</script>

以下是每一行的作用：

第 1 行从 statpx.com 加载 track.js。defer 属性告诉浏览器在后台下载脚本，仅在 HTML 完全解析后执行 — 这可防止分析代码减慢页面加载。
第 2 行将 window._stid 设置为您的唯一网站 ID。当 track.js 运行时，它读取此值以了解要将页面浏览量关联到哪个网站。没有它，脚本将不知道在哪里发送数据。

两行都必须出现在您要追踪的每个页面上，放置在关闭 </body> 标记之前。不包含代码片段的页面将不会出现在您的分析中。

在纯 HTML 网站上安装

如果您的网站是一组静态 .html 文件，请在文本编辑器中打开每个文件，并在 </body> 之前粘贴代码片段。以下是它在上下文中的样子：

    <p>感谢阅读。</p>

    <!-- statpx analytics -->
    <script src="https://statpx.com/track.js" defer></script>
    <script>window._stid = "YOUR_SITE_ID";</script>
  </body>
</html>

如果您有一个在所有页面中包含的共享页脚文件（在使用 include 'footer.php' 的 PHP 网站中很常见），请将代码片段添加到该共享文件一次，它将自动出现在每个页面上。

在 WordPress 上安装

WordPress 根据您网站的设置方式提供了多个选项：

选项 1 — 插件（推荐给大多数用户）

安装插件，如插入页眉和页脚（免费、广泛使用）。转到设置 → 插入页眉和页脚，将 statpx 代码片段粘贴到页脚中的脚本字段，然后保存。该插件在每个页面上的 </body> 之前注入代码。

选项 2 — 主题的 footer.php

在 WordPress 管理界面中，转到外观 → 主题文件编辑器并打开 footer.php。找到关闭 </body> 标记并在其上方粘贴代码片段。保存文件。这种方法有效，但存在一个风险：如果您更新或更改主题，编辑会被覆盖。为避免这种情况，始终使用子主题 — 对子主题的 footer.php 的编辑会在主题更新后保留。

提示：如果您正在使用页面生成器（Elementor、Divi、Beaver Builder），这些插件通常在其全局设置中有自己的"自定义代码"或"脚本"部分 — 在那里粘贴代码片段以获得相同的结果。

在 Next.js 或 React 上安装

对于 Next.js，最简洁的方法是使用内置的 Script 组件和 strategy="afterInteractive"。将以下代码添加到您的根布局文件（App Router 中的 app/layout.tsx 或 Pages Router 中的 pages/_app.js）：

// app/layout.tsx (Next.js App Router)
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://statpx.com/track.js"
          strategy="afterInteractive"
        />
        <Script id="statpx-id" strategy="afterInteractive">
          {`window._stid = "YOUR_SITE_ID";`}
        </Script>
      </body>
    </html>
  );
}

afterInteractive 策略会将脚本执行延迟到页面交互为止，这与纯 HTML 中 defer 属性的行为相匹配。对于 URL 在没有完整页面重新加载的情况下更改的单页应用，请查看关于在 React 和 Vue SPA 中追踪分析的指南 — 您需要在每次路由更改时手动触发页面浏览事件。

在 Shopify 或 Webflow 上安装

两个平台都在其主题编辑器中提供"自定义代码"部分。在 Shopify 中，转到在线商店 → 主题 → 编辑代码，打开 theme.liquid，并在 </body> 之前粘贴代码片段。或者，如果您的计划支持，使用首选项 → 其他脚本。在 Webflow 中，转到项目设置 → 自定义代码 → 页脚代码并在那里粘贴 — Webflow 会在每个已发布页面上注入它。

验证安装

安装后，返回您的 statpx 控制台，然后单击您网站卡片上的重新检查。statpx 获取您的主页并扫描追踪代码。如果找到，网站卡片显示绿色活跃徽章和复选标记。如果没有，卡片会显示"未检测到代码片段" — 仔细检查实时页面的 HTML 源中是否存在代码片段（使用浏览器的"查看页面源"或 DevTools）。

statpx 控制台显示网站卡片，代码片段验证后带有绿色活跃徽章 — 验证后，您的网站卡片显示绿色活跃徽章 — 页面浏览量现在正在记录中

您也可以打开浏览器的"网络"标签（F12 → 网络 → 按"statpx"或"track.js"筛选），并在您的网站上加载一个页面。您应该看到在页面加载后不到一秒内向 statpx.com/collect 的请求触发 — 该请求是正在记录的页面浏览。

免费开始追踪您的网站

statpx 为您提供隐私友好的分析，无需 cookie 横幅、无数据限制、无需信用卡。设置耗时不超过 5 分钟。

免费开始 →

要点

安装 statpx 追踪代码片段归结为在您要追踪的每个页面上的关闭 </body> 标记之前粘贴两行 HTML。在任何带有共享页脚的平台上 — 无论是 PHP include、WordPress 插件、Next.js 布局文件还是主题的自定义代码字段 — 您只需添加一次。一旦就位，验证只需几秒钟，数据立即开始流动。如果您还没有设置账户，请先从入门指南开始。