Integrations & Plugins — statpx Analytics

🌐

HTML / PHP Easy

Works on any static HTML site or PHP app

1

Get your Tracking ID

Sign in to statpx → Dashboard → click your site → Snippet. Copy the 16-character Tracking ID.

2

Paste two lines before </body>

Open your HTML template or layout file and paste the snippet just before the closing body tag. Replace YOUR_TRACKING_ID with your actual ID.

3

Deploy and verify

Upload your files. Visit your site — within seconds you'll see your first pageview in the statpx dashboard. Use the Verify Install button to confirm.

HTML
<!-- Place before </body> on every page -->
<script>window._stid='YOUR_TRACKING_ID';window._stendpoint='https://statpx.com';</script>
<script src="https://statpx.com/track.js" async></script>

✓ SPA support — statpx automatically tracks navigation in React, Vue, and any framework that uses history.pushState. No extra configuration needed.

WP

WordPress Easy

Official plugin — settings page, no code editing

statpx-analytics.zip

WordPress plugin — includes settings page, no coding required

⬇ Download Plugin

1

Download the plugin

Click "Download Plugin" above to get statpx-analytics.zip.

2

Install in WordPress Admin

Go to WP Admin → Plugins → Add New → Upload Plugin. Select the downloaded zip and click "Install Now", then "Activate Plugin".

3

Enter your Tracking ID

Go to Settings → statpx and paste your Tracking ID. Click "Save Settings".

Find your Tracking ID: statpx Dashboard → your site → Snippet

4

Done

Visit your site — analytics will appear in your statpx dashboard immediately.

Manual installation (alternative)

PHP — functions.php or a custom plugin
// Add to functions.php or any plugin file
add_action('wp_footer', function() { ?>
<script>window._stid='YOUR_TRACKING_ID';window._stendpoint='https://statpx.com';</script>
<script src="https://statpx.com/track.js" async></script>
<?php }, 99);

SH

Shopify Easy

Paste snippet into theme.liquid or use the snippet file

statpx-analytics.liquid

Shopify snippet file — paste into your theme editor

⬇ Download Snippet

1

Open Theme Editor

Go to Shopify Admin → Online Store → Themes → ⋯ → Edit code.

2

Paste into theme.liquid

Open Layout → theme.liquid. Find the closing </body> tag and paste the snippet just before it. Replace YOUR_TRACKING_ID with your actual ID.

3

Save

Click "Save". Visit your store — pageviews will appear in statpx within seconds.

Liquid — theme.liquid (before </body>)
{%- comment -%}statpx Analytics{%- endcomment -%}
<script>window._stid='YOUR_TRACKING_ID';window._stendpoint='https://statpx.com';</script>
<script src="https://statpx.com/track.js" async></script>

Shopify's storefront is a multi-page app. statpx tracks every page visit including product pages, cart, and checkout (standard checkout only).

NX

Next.js Easy

App Router and Pages Router supported

StatpxScript.tsx

React component using next/script — drop into your layout

⬇ Download Component

App Router (app/layout.tsx)

TypeScript — app/layout.tsx
import Script from 'next/script'

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

Pages Router (_document.tsx)

TypeScript — pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        <script dangerouslySetInnerHTML={{
          __html: "window._stid='YOUR_TRACKING_ID';window._stendpoint='https://statpx.com';"
        }} />
        <script src="https://statpx.com/track.js" async />
      </body>
    </Html>
  )
}

statpx automatically tracks client-side navigation via history.pushState — no extra router event listener needed.

NT

Nuxt.js Easy

Nuxt 3 client plugin or nuxt.config.ts

statpx.client.ts

Nuxt 3 client plugin — place in /plugins/

⬇ Download Plugin

Option A — nuxt.config.ts (simplest)

TypeScript — nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        { innerHTML: "window._stid='YOUR_TRACKING_ID';window._stendpoint='https://statpx.com';",
          tagPosition: 'bodyClose' },
        { src: 'https://statpx.com/track.js',
          async: true, tagPosition: 'bodyClose' }
      ]
    }
  }
})

Option B — Client Plugin (plugins/statpx.client.ts)

TypeScript — plugins/statpx.client.ts
export default defineNuxtPlugin(() => {
  (window as any)._stid = 'YOUR_TRACKING_ID'
  (window as any)._stendpoint = 'https://statpx.com'
  const s = document.createElement('script')
  s.src = 'https://statpx.com/track.js'
  s.async = true
  document.head.appendChild(s)
})

GT

Gatsby Easy

gatsby-ssr.js or gatsby-browser.js

gatsby-ssr.js

Gatsby SSR integration — place in project root

⬇ Download File

JavaScript — gatsby-ssr.js
const React = require('react')

exports.onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    React.createElement('script', {
      key: 'statpx-config',
      dangerouslySetInnerHTML: {
        __html: "window._stid='YOUR_TRACKING_ID';window._stendpoint='https://statpx.com';"
      }
    }),
    React.createElement('script', {
      key: 'statpx-track',
      src: 'https://statpx.com/track.js',
      async: true
    })
  ])
}

GH

Ghost Easy

Code injection — no theme editing required

1

Open Ghost Admin

Log in to your Ghost Admin panel and go to Settings → Code injection.

2

Paste into "Site Footer"

In the Site Footer text area, paste the snippet below. Replace YOUR_TRACKING_ID with your actual ID.

3

Save changes

Click "Save". The tracking code will now appear on every page of your Ghost site.

HTML — Ghost Code Injection → Site Footer
<script>window._stid='YOUR_TRACKING_ID';window._stendpoint='https://statpx.com';</script>
<script src="https://statpx.com/track.js" async></script>

SS

Squarespace Easy

Code injection — Business plan or higher required

⚠️ Plan requirement: Code injection is available on Squarespace Business, Commerce, and higher plans.

1

Open Code Injection

In Squarespace, go to Settings → Advanced → Code Injection.

2

Paste into "Footer"

Find the Footer field and paste the snippet. Replace YOUR_TRACKING_ID.

3

Save

Click "Save". The snippet is now on every page of your site.

HTML — Squarespace Settings → Advanced → Code Injection → Footer
<script>window._stid='YOUR_TRACKING_ID';window._stendpoint='https://statpx.com';</script>
<script src="https://statpx.com/track.js" async></script>

WF

Webflow Easy

Project Settings → Custom Code

1

Open Project Settings

In the Webflow Designer, click the project name at the top → Project Settings.

2

Go to Custom Code tab

Click on the Custom Code tab.

3

Paste into "Footer Code"

Paste the snippet into the Footer Code field. Replace YOUR_TRACKING_ID.

4

Publish your site

Click "Save Changes" then re-publish your Webflow site.

HTML — Webflow Project Settings → Custom Code → Footer Code
<script>window._stid='YOUR_TRACKING_ID';window._stendpoint='https://statpx.com';</script>
<script src="https://statpx.com/track.js" async></script>

WX

Wix Medium

Requires Wix Studio or Velo by Wix

Method A — Tracking Tools (simplest)

1

Open Marketing Integrations

In Wix Dashboard → Marketing & SEO → Marketing Integrations → Custom Tracking Tools.

2

Connect a custom tool

Click "+ Connect" → choose "Custom" → select "Embed a code snippet".

3

Paste the snippet

Set placement to "Body - end" and paste both script tags. Replace YOUR_TRACKING_ID.

HTML — Wix Custom Tracking Tool (Body - end)
<script>window._stid='YOUR_TRACKING_ID';window._stendpoint='https://statpx.com';</script>
<script src="https://statpx.com/track.js" async></script>

Method B — Velo (Dev Mode)

JavaScript — Velo Site Code (masterPage.js)
$w.onReady(function() {
  if (typeof window !== 'undefined') {
    window._stid = 'YOUR_TRACKING_ID';
    window._stendpoint = 'https://statpx.com';
    const s = document.createElement('script');
    s.src = 'https://statpx.com/track.js';
    s.async = true;
    document.body.appendChild(s);
  }
});

FR

Framer Easy

Site Settings → Custom Code

1

Open Site Settings

In Framer, go to the right panel → Site Settings (gear icon).

2

Go to General → Custom Code

Find the End of <body> tag field.

3

Paste and publish

Paste the snippet, replace YOUR_TRACKING_ID, then re-publish your site.

HTML — Framer Site Settings → Custom Code → End of <body>
<script>window._stid='YOUR_TRACKING_ID';window._stendpoint='https://statpx.com';</script>
<script src="https://statpx.com/track.js" async></script>

HG

Hugo Easy

Partial template — one file, works for all themes

statpx.html

Hugo partial template — place in layouts/partials/

⬇ Download Partial

1

Create the partial file

Save the downloaded file as layouts/partials/statpx.html in your Hugo project root. Replace YOUR_TRACKING_ID.

2

Include in your base template

Open layouts/_default/baseof.html (or the equivalent in your theme). Add the partial call before </body>.

3

Build and deploy

Run hugo to rebuild. The snippet will appear on every generated page.

HTML — layouts/_default/baseof.html (before </body>)
{{ partial "statpx.html" . }}
</body>
</html>

HTML — layouts/partials/statpx.html
<script>window._stid='YOUR_TRACKING_ID';window._stendpoint='https://statpx.com';</script>
<script src="https://statpx.com/track.js" async></script>

JK

Jekyll Easy

Liquid include — works with any Jekyll theme

statpx.html

Jekyll include file — place in _includes/

⬇ Download Include

1

Create the include

Save the downloaded file as _includes/statpx.html. Replace YOUR_TRACKING_ID.

2

Add to your default layout

Open _layouts/default.html and add the include before </body>.

3