Install StatCounter

Install the StatCounter tracking tag or SDK — step-by-step embed instructions, verification, and troubleshooting.

Overview

StatCounter uses a JavaScript-based tracking code that must be installed on every page you want to track. The code is lightweight, loads asynchronously, and has minimal impact on page performance.

What You'll Need

Your StatCounter project ID
Your security code
Access to edit your website's HTML
The tracking code snippet from your StatCounter dashboard

Getting Your Tracking Code

Step 1: Access Your Project

Log in to StatCounter
Navigate to your project dashboard
Click on "Config" or "Settings"
Select "Install Code"

Step 2: Copy Your Code

StatCounter will display your unique tracking code:

<!-- StatCounter Code -->
<script type="text/javascript">
var sc_project=12345678;
var sc_invisible=1;
var sc_security="abcd1234";
</script>
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js" async></script>
<noscript><div class="statcounter"><a title="Web Analytics"
href="https://statcounter.com/" target="_blank"><img class="statcounter"
src="https://c.statcounter.com/12345678/0/abcd1234/1/" alt="Web Analytics"
referrerPolicy="no-referrer-when-downgrade"></a></div></noscript>
<!-- End of StatCounter Code -->

Code Components

sc_project: Your unique project identifier
sc_invisible: Set to 1 for invisible tracking, 0 for visible counter
sc_security: Security code to protect your stats
async: Ensures non-blocking script loading
noscript: Fallback tracking for users with JavaScript disabled

Installation Methods

Method 1: Direct HTML Installation

For static HTML sites, add the code before the closing </body> tag:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your page content -->

  <!-- StatCounter Code -->
  <script type="text/javascript">
  var sc_project=12345678;
  var sc_invisible=1;
  var sc_security="abcd1234";
  </script>
  <script type="text/javascript"
  src="https://www.statcounter.com/counter/counter.js" async></script>
  <noscript><div class="statcounter"><a title="Web Analytics"
  href="https://statcounter.com/" target="_blank"><img class="statcounter"
  src="https://c.statcounter.com/12345678/0/abcd1234/1/" alt="Web Analytics"
  referrerPolicy="no-referrer-when-downgrade"></a></div></noscript>
  <!-- End of StatCounter Code -->
</body>
</html>

Method 2: WordPress Installation

Using a Plugin (Recommended):

Install the "StatCounter - Free Web Tracker" plugin
Activate the plugin
Go to Settings > StatCounter
Enter your Project ID and Security Code
Save changes

Manual Installation:

Go to Appearance > Theme Editor
Open footer.php or functions.php
Add code before </body> in footer.php, or use wp_footer hook:

function add_statcounter() {
  ?>
  <script type="text/javascript">
  var sc_project=12345678;
  var sc_invisible=1;
  var sc_security="abcd1234";
  </script>
  <script type="text/javascript"
  src="https://www.statcounter.com/counter/counter.js" async></script>
  <?php
}
add_action('wp_footer', 'add_statcounter');

Method 3: Google Tag Manager

In GTM, create a new Custom HTML tag
Paste the StatCounter code
Set trigger to "All Pages"
Publish your container

<script type="text/javascript">
var sc_project=12345678;
var sc_invisible=1;
var sc_security="abcd1234";
</script>
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js" async></script>

Method 4: React/Next.js

For React applications, add to your layout component or use a script tag in _document.js:

// pages/_document.js (Next.js)
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        <script
          dangerouslySetInnerHTML={{
            __html: `
              var sc_project=12345678;
              var sc_invisible=1;
              var sc_security="abcd1234";
            `,
          }}
        />
        <script
          src="https://www.statcounter.com/counter/counter.js"
          async
        />
      </body>
    </Html>
  )
}

Method 5: Shopify

From your Shopify admin, go to Online Store > Themes
Click Actions > Edit code
Open theme.liquid file
Paste the code before </body>
Save the file

Method 6: Wix

In Wix Editor, click Settings
Go to Custom Code under Advanced Settings
Click "Add Custom Code"
Paste StatCounter code
Set to load on "All Pages"
Place code in "Body - end"

Configuration Options

Invisible Counter

For professional sites without visible counter badge:

var sc_invisible=1;

Visible Counter

To display a visitor counter on your site:

var sc_invisible=0;

The counter will appear where the code is placed.

Custom Counter Design

In your StatCounter dashboard:

Go to Config > Counter Design
Choose from preset designs or create custom
Select counter type (total visits, unique visitors, online now)
Customize colors and style

Validation

Verify Installation

1. Check Page Source:

Visit your website
Right-click and select "View Page Source"
Search (Ctrl+F) for "statcounter" or your project ID
Confirm the code is present

2. Browser Developer Tools:

Open Developer Tools (F12)
Go to Network tab
Reload the page
Look for requests to statcounter.com/counter/counter.js
Status should be 200 (success)

3. StatCounter Verification Tool:

In your project dashboard, click "Verify Installation"
StatCounter will check if code is detected on your URL
Green checkmark confirms successful installation

4. Check Dashboard:

Visit your website
Wait 5-10 minutes
Check StatCounter dashboard for your visit in "Recent Visitor Activity"

Common Installation Issues

Issue	Cause	Solution
Code not loading	Incorrect placement	Move code to just before `</body>`
404 error on script	Typo in script URL	Copy fresh code from dashboard
No data after 24 hours	Wrong project ID	Verify project ID matches dashboard
Counter visible when should be invisible	sc_invisible=0	Change to sc_invisible=1
Multiple counters appearing	Code duplicated	Remove duplicate code instances
HTTPS warnings	Site is HTTPS, StatCounter using HTTP	Use HTTPS in script URL

Best Practices

Code Placement

Recommended: Before closing </body> tag
Why: Ensures page content loads first, improving user experience
Alternative: In <head> with async attribute (acceptable but not ideal)

Performance Optimization

<!-- Use async attribute for non-blocking load -->
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js" async></script>

The async attribute ensures StatCounter loads without blocking page rendering.

Security

Never share your security code publicly
Use environment variables in code repositories
Regenerate security code if compromised (in project settings)

Maintenance

Document where code is installed (theme file, plugin, etc.)
Test after theme/platform updates
Keep backup of your project ID and security code
Set up alerts for tracking interruptions

Testing Your Installation

Step-by-Step Test

Clear Browser Cache: Ensures fresh code load
Disable Ad Blockers: May block analytics scripts
Visit Your Site: Navigate to several pages
Check Console: Verify no JavaScript errors
View Dashboard: Confirm visits appear within 10 minutes

Multi-Browser Test

Test installation across browsers:

Chrome
Firefox
Safari
Edge

Mobile Testing

Verify tracking works on mobile devices:

iOS Safari
Android Chrome
Mobile browsers

Troubleshooting

Code Not Executing

Check for JavaScript errors:

// Open browser console (F12)
// Look for errors related to StatCounter

Verify script loading:

Check Network tab in DevTools
Confirm counter.js returns 200 status

Data Not Appearing

Wait up to 24 hours for first data
Confirm you're viewing correct project
Check timezone settings
Verify you haven't blocked your own IP

Duplicate Tracking

If seeing double pageviews:

Search for duplicate code instances
Check plugins that might auto-insert code
Verify code isn't in both header and footer

Advanced Configuration

Content Security Policy (CSP)

If using CSP headers, whitelist StatCounter:

Content-Security-Policy: script-src 'self' https://www.statcounter.com;
img-src 'self' https://c.statcounter.com;

StatCounter uses cookies for tracking. Ensure your cookie consent banner includes analytics cookies and blocks StatCounter until consent is given.

Support

For installation assistance: