如何向任何平台或CMS添加网站分析

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

每个网站分析工具在其核心的工作原理都是相同的：一个小的JavaScript代码片段在您的页面上运行，并向分析服务器发送访问数据。追踪代码片段总是相同的两行代码。唯一改变的是如何将其添加到您的特定平台。

本指南涵盖了将statpx追踪添加到最常见平台的正确方法——从纯HTML文件到WordPress、Shopify、Next.js和网站构建器——因此，无论您的网站如何构建，您都可以在五分钟内获得准确的数据流。

两行代码片段

您的statpx追踪代码片段始终是两个脚本标签。添加网站后，您将在网站的设置页面上找到您的个人版本，但模式如下所示：

<!-- statpx追踪代码片段 — 粘贴在</body>前 -->
<script>window._st=window._st||function(){(_st.q=_st.q||[]).push(arguments)}</script>
<script src="https://statpx.com/tracker.js" data-id="YOUR_TRACKING_ID" async></script>

第一行立即初始化_st()函数，以便您在脚本加载前进行的任何调用都会被排队。第二行异步加载跟踪器——async属性意味着它永远不会阻止页面呈现。跟踪器加载后，它会触发自动页面浏览并处理任何排队的调用。

将YOUR_TRACKING_ID替换为仪表板中的追踪ID。该ID是statpx如何知道将数据归属于哪个网站和账户的方式。

逐平台设置

HTML / PHP网站

对于静态HTML或基于PHP的网站，打开主模板文件——在所有页面中共享的输出结束</body>标签的文件。这通常是footer.php、layout.php或共享的包含文件。将两个代码片段行粘贴到</body>之前。因为模板是共享的，每个页面都会自动包含该代码片段。

如果您的网站不使用共享模板，每个页面都是单独的文件，那么您需要将代码片段添加到每个文件中——或者，更好的方法是，首先将您的页脚重构为共享的包含文件。部分覆盖会产生不准确的数据，特别是对于跳出率和会话路径。

WordPress

WordPress的推荐方法是官方statpx插件，可从您仪表板的集成页面获得。安装并激活它，将您的追踪ID粘贴到插件设置中，追踪会立即在所有页面（包括主页、博客文章和WooCommerce页面）上开始。

如果您不想使用插件，请通过外观→主题文件编辑器打开您的活动主题的footer.php文件，并将代码片段粘贴到</body>前。请注意，主题更新可能会覆盖此文件——如果您的主题频繁更新，请使用子主题。第三个选项是代码片段插件（例如WPCode），它可以让您添加自定义代码，而无需直接编辑主题文件。

Shopify

在您的Shopify管理界面中，转到在线商店→主题→编辑代码。打开theme.liquid——这是包裹您商店中每个页面的全局布局文件。将代码片段粘贴到结束</body>标签之前，然后单击保存。Shopify将此文件应用于所有店面页面，因此单次粘贴涵盖您的主页、产品页面、集合页面和结账确认页面。

Next.js / React

对于Next.js（Pages Router），使用useEffect钩子将代码片段添加到pages/_app.js以确保其在组件挂载后运行。对于Next.js App Router，使用内置Script组件将其添加到app/layout.tsx，使用strategy="afterInteractive"：

// app/layout.tsx — App Router
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script src="https://statpx.com/tracker.js"
          data-id="YOUR_TRACKING_ID"
          strategy="afterInteractive" />
      </body>
    </html>
  );
}

对于导航发生在客户端而无全页面重载的单页应用程序，您还需要在路线更改时手动触发页面浏览事件。请参阅我们关于在单页应用中追踪分析的专门指南以了解完整模式。

Webflow / Framer / Squarespace / Wix

网站构建器都提供了用于自定义代码的指定区域。位置因平台而异：

Webflow — 项目设置 → 自定义代码 → 页脚代码
Framer — 网站设置 → 自定义代码 → <body>末尾
Squarespace — 设置 → 高级 → 代码注入 → 页脚
Wix — 设置 → 自定义代码 → 添加自定义代码 → 正文（末尾）

在每种情况下，将两行代码片段粘贴到页脚代码字段中并保存。构建器会自动将其注入到每个页面中。

黄金法则：追踪每个页面

部分安装——代码片段存在于某些页面但不存在于其他页面——比根本没有安装还要糟糕。当访问者登陆未追踪页面然后导航到已追踪页面时，statpx会将已追踪页面视为没有引荐人背景的新会话开始。您的跳出率将被人为地夸大，您的会话计数将是错误的，您最受欢迎的页面甚至可能没有被追踪。

在认为您的设置完成之前，请检查您的代码片段正在加载：您的主页、至少一篇博客文章、您的价格页面、您的注册/注册页面和您的404页面。如果其中任何一个缺少代码片段，请找到它们使用的布局或模板文件并将其添加到那里。

验证您的安装

添加代码片段后，在浏览器中访问您的网站，然后返回到您的statpx仪表板。您网站在仪表板上的卡片将有一个验证按钮——单击它以触发自动检查，确认追踪器正在加载并正确报告。您还可以观看实时视图，它每几秒更新一次，如果代码片段正在运行，它会立即显示您的访问。

如果验证检查失败，最常见的原因是：代码片段仅在某些页面上（请参阅上面的黄金法则）、内容安全策略阻止追踪器脚本，或追踪ID粘贴不正确。statpx用户指南有一个完整的故障排除部分，涵盖每个场景。

两行代码。每个平台。从第一天开始的免费分析。

免费开始 →

底线

正确安装分析归结为一个原则：将代码片段放在在每个页面上呈现的共享模板文件中，并在依赖数据前验证其工作正常。无论您使用的是手工编码的PHP网站、WordPress主题、Shopify商店还是无代码构建器，方法总是相同的——找到全局页脚、添加两行、确认。一旦代码片段就位并验证，statpx可以做的一切——页面浏览追踪、会话分析、自定义事件、引荐来源数据、实时访问者——都无需任何额外设置即可自动工作。