Install Tracking Script

The Statalog tracker is a single line of HTML. Once it is on your page, tracking starts immediately — no further configuration is needed for basic pageview tracking.

The snippet

<script async src="https://cdn.statalog.com/st.js" data-site="ST-XXXXXXXXXXXXXXX"></script>

Replace ST-XXXXXXXXXXXXXXX with your actual site ID, which you can find in Site settings → Installation.

The async attribute means the script loads in parallel with the rest of your page — it will never block rendering or slow your site down. The script itself weighs approximately 2 KB.

Where to place it

Put the snippet inside the <head> element of every page you want to track. Placing it in <head> (rather than at the bottom of <body>) ensures that fast page interactions — such as a user immediately clicking a button — are not missed.

<head>
  <meta charset="UTF-8">
  <title>My Website</title>
  <!-- other tags -->
  <script async src="https://cdn.statalog.com/st.js" data-site="ST-XXXXXXXXXXXXXXX"></script>
</head>

Framework installation guides

Plain HTML

Add the snippet to your HTML template's <head>. If every page shares a single HTML file, one addition covers your entire site.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Site</title>
  <script async src="https://cdn.statalog.com/st.js" data-site="ST-XXXXXXXXXXXXXXX"></script>
</head>
<body>
  <!-- page content -->
</body>
</html>

WordPress

Option A — Edit header.php directly

In your WordPress theme directory, open header.php and paste the snippet inside the <head> tag, before </head>:

<head>
  <?php wp_head(); ?>
  <script async src="https://cdn.statalog.com/st.js" data-site="ST-XXXXXXXXXXXXXXX"></script>
</head>

Option B — Use a plugin

If you prefer not to edit theme files, install a header/footer script plugin (such as Insert Headers and Footers or WPCode). Paste the snippet into the Header section. This method survives theme updates.

Next.js / React

App Router (Next.js 13+)

In your root layout file (app/layout.tsx or app/layout.js), import the Script component and add it inside the <head>:

import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://cdn.statalog.com/st.js"
          data-site="ST-XXXXXXXXXXXXXXX"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Pages Router (Next.js 12 and earlier)

In pages/_document.js (or _document.tsx):

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <script async src="https://cdn.statalog.com/st.js" data-site="ST-XXXXXXXXXXXXXXX" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Laravel Blade

Open your main layout file — typically resources/views/layouts/app.blade.php — and add the snippet inside the <head>:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@yield('title', config('app.name'))</title>

    <script async src="https://cdn.statalog.com/st.js" data-site="ST-XXXXXXXXXXXXXXX"></script>

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

All child views that extend this layout will be tracked automatically.

Webflow

  1. In the Webflow Designer, open Project settings.
  2. Go to the Custom code tab.
  3. Paste the snippet into the Head code field.
  4. Click Save changes, then publish your site.

The snippet will appear on every page of your Webflow project.

Shopify

  1. In your Shopify admin, go to Online Store → Themes.
  2. Click Actions → Edit code next to your active theme.
  3. Open layout/theme.liquid.
  4. Paste the snippet inside the <head> tag:
<head>
  {{ content_for_header }}
  <script async src="https://cdn.statalog.com/st.js" data-site="ST-XXXXXXXXXXXXXXX"></script>
</head>
  1. Click Save.

Verifying installation

Dashboard confirmation

After installing the snippet, visit your website in a browser. Within a few seconds, your Statalog dashboard should show a green dot (live visitor indicator) and the visit should appear in the Today report. If you have just added the site, you may need to wait a moment for the first data point to appear.

Browser network tab

Open your browser's developer tools (F12), go to the Network tab, and filter by the keyword statalog or st.js. Reload the page. You should see two requests:

  1. A request to https://cdn.statalog.com/st.js — the script itself
  2. A request to the Statalog collection endpoint — the pageview being recorded

If both appear with a 200 status, installation is working correctly.

Single-page application support

Statalog automatically handles single-page applications (SPAs) built with React, Vue, Angular, Svelte, or any other framework that uses the History API for navigation. The tracker listens for history.pushState and popstate events and records a new pageview each time the route changes — no extra configuration required.

This means a visitor navigating from /home to /pricing within a React app will generate two distinct pageview records, just as if they had loaded two separate HTML pages.

Excluding your own visits

To prevent your own browsing from appearing in reports, append ?statalog_ignore=true to any URL on your site. Statalog will set a flag in localStorage and stop recording pageviews from that browser going forward. This persists until the flag is cleared.

Alternatively, traffic from localhost and private IP ranges is filtered automatically and will not appear in your dashboard.