StatCounter Integrations

Connect StatCounter with third-party tools — CRM, marketing, CMS, and data warehouse integration guides.

Overview

StatCounter integrates with virtually any website platform through its JavaScript tracking code. While it doesn't offer extensive third-party integrations like modern analytics platforms, it provides platform-specific plugins and straightforward installation methods for popular CMS systems.

Integration Types

Platform Integrations:

WordPress (official plugin)
Shopify (code injection)
Wix (custom code)
Squarespace (code injection)
Blogger (native support)
Tumblr (theme customization)

Tag Manager Integration:

Google Tag Manager
Adobe Tag Manager
Tealium

Development Frameworks:

Data Export:

API access (limited)
CSV export
PDF reports
Email reports

Content Management Systems

WordPress

Method 1: Official Plugin (Recommended)

Install Plugin:
- Go to Plugins > Add New
- Search for "StatCounter - Free Web Tracker"
- Click "Install Now" and "Activate"
Configure Plugin:
- Go to Settings > StatCounter
- Enter your Project ID
- Enter your Security Code
- Select invisible or visible counter
- Save settings
Verification:
- View your site source
- Search for "statcounter"
- Confirm code is present

Method 2: Manual Installation

Add to your theme's footer.php:

<!-- Before closing </body> tag -->
<script type="text/javascript">
var sc_project=<?php echo get_option('statcounter_project'); ?>;
var sc_invisible=1;
var sc_security="<?php echo get_option('statcounter_security'); ?>";
</script>
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js" async></script>
<?php wp_footer(); ?>
</body>

Method 3: Functions.php Hook

// Add to functions.php
function add_statcounter_tracking() {
  ?>
  <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_tracking');

Shopify

Installation Steps:

Access Theme Code:
- Shopify Admin > Online Store > Themes
- Click Actions > Edit code
Locate theme.liquid:
- In the Layout folder, open theme.liquid
Add Tracking Code:
- Find the closing </body> tag
- Paste StatCounter code before it

  <!-- StatCounter Code -->
  <script type="text/javascript">
  var sc_project={{ settings.statcounter_project }};
  var sc_invisible=1;
  var sc_security="{{ settings.statcounter_security }}";
  </script>
  <script type="text/javascript"
  src="https://www.statcounter.com/counter/counter.js" async></script>
  <!-- End StatCounter Code -->
</body>
</html>

Save and Verify

Optional: Theme Settings

Create theme settings for easy configuration:

// In settings_schema.json
{
  "name": "Analytics",
  "settings": [
    {
      "type": "text",
      "id": "statcounter_project",
      "label": "StatCounter Project ID"
    },
    {
      "type": "text",
      "id": "statcounter_security",
      "label": "StatCounter Security Code"
    }
  ]
}

Wix

Installation Process:

Open Site Settings:
- Wix Editor > Settings
- Advanced Settings > Custom Code
Add Custom Code:
- Click "+ Add Custom Code"
- Name: "StatCounter Tracking"
- Paste StatCounter code
Configure Placement:
- Code Type: Analytics
- Add to: All pages
- Load code: Body - end
Apply and Publish

<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>

Squarespace

Setup Steps:

Access Code Injection:
- Settings > Advanced > Code Injection
Add Footer Code:
- Scroll to "Footer" section
- Paste StatCounter 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>

Save and Verify

Blogger

Native Integration:

Access Layout:
- Blogger Dashboard > Layout
Add Gadget:
- Click "Add a Gadget"
- Select "HTML/JavaScript"
Paste Code:
- Title: (leave blank for invisible)
- Content: StatCounter code
Save and Position

<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>

Tumblr

Theme Customization:

Edit Theme HTML:
- Customize > Edit HTML
Add Before </body>:

  <!-- 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>
</body>

Save and Update Preview

Tag Managers

Google Tag Manager

Setup Process:

Create New Tag:
- GTM Workspace > New Tag
- Tag Type: Custom HTML
Add 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>

Configure Trigger:
- Trigger Type: Page View
- Fire on: All Pages
Advanced Settings:
- Tag Firing Priority: Default
- Tag Sequencing: Not required
Test and Publish

Variables (Optional):

Create GTM variables for easy management:

// Variable: StatCounter Project ID
{{StatCounter Project ID}}

// Variable: StatCounter Security
{{StatCounter Security Code}}

// Use in tag:
var sc_project={{StatCounter Project ID}};
var sc_security="{{StatCounter Security Code}}";

Adobe Tag Manager

Similar process to GTM:

Create Custom Code rule
Paste StatCounter code
Set Page Load trigger
Publish library

Tealium

Add JavaScript code tag
Configure for all pages
Publish configuration

JavaScript Frameworks

React

Method 1: Component Integration

// components/StatCounter.js
import { useEffect } from 'react';

export default function StatCounter() {
  useEffect(() => {
    // Load StatCounter
    const script1 = document.createElement('script');
    script1.innerHTML = `
      var sc_project=12345678;
      var sc_invisible=1;
      var sc_security="abcd1234";
    `;
    document.body.appendChild(script1);

    const script2 = document.createElement('script');
    script2.src = 'https://www.statcounter.com/counter/counter.js';
    script2.async = true;
    document.body.appendChild(script2);

    return () => {
      document.body.removeChild(script1);
      document.body.removeChild(script2);
    };
  }, []);

  return null;
}

// Use in App.js
import StatCounter from './components/StatCounter';

function App() {
  return (
    <>
      <StatCounter />
      {/* Your app content */}
    </>
  );
}

Method 2: React Helmet

import { Helmet } from 'react-helmet';

function App() {
  return (
    <>
      <Helmet>
        <script>
          {`
            var sc_project=12345678;
            var sc_invisible=1;
            var sc_security="abcd1234";
          `}
        </script>
        <script
          src="https://www.statcounter.com/counter/counter.js"
          async
        />
      </Helmet>
      {/* Your app */}
    </>
  );
}

Next.js

Method 1: _document.js

// pages/_document.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 2: next/script

// pages/_app.js
import Script from 'next/script';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Script id="statcounter-config">
        {`
          var sc_project=12345678;
          var sc_invisible=1;
          var sc_security="abcd1234";
        `}
      </Script>
      <Script
        src="https://www.statcounter.com/counter/counter.js"
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  );
}

Vue.js

In main.js or App.vue:

// main.js
import { createApp } from 'vue';
import App from './App.vue';

// Load StatCounter
const script1 = document.createElement('script');
script1.innerHTML = `
  var sc_project=12345678;
  var sc_invisible=1;
  var sc_security="abcd1234";
`;
document.head.appendChild(script1);

const script2 = document.createElement('script');
script2.src = 'https://www.statcounter.com/counter/counter.js';
script2.async = true;
document.head.appendChild(script2);

createApp(App).mount('#app');

Angular

In index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
</head>
<body>
  <app-root></app-root>

  <!-- StatCounter -->
  <script>
    var sc_project=12345678;
    var sc_invisible=1;
    var sc_security="abcd1234";
  </script>
  <script src="https://www.statcounter.com/counter/counter.js" async></script>
</body>
</html>

Gatsby

In gatsby-ssr.js:

// gatsby-ssr.js
export const setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="statcounter-config"
      dangerouslySetInnerHTML={{
        __html: `
          var sc_project=12345678;
          var sc_invisible=1;
          var sc_security="abcd1234";
        `,
      }}
    />,
    <script
      key="statcounter-script"
      src="https://www.statcounter.com/counter/counter.js"
      async
    />,
  ]);
};

API Integration

API Access

StatCounter offers limited API access for data retrieval:

Available API Endpoints:

Summary stats
Visitor log
Popular pages
Keywords
Referrers

API Limitations:

Read-only access
Rate limits apply
Premium feature on some plans
No write/configuration API

API Authentication

Request API credentials from StatCounter support. Authentication uses:

Username
API key
Project ID

Example API Call

# Get summary stats
curl "https://api.statcounter.com/stats/?u=USERNAME&k=API_KEY&p=PROJECT_ID&f=json&s=summary"

// JavaScript API call
fetch('https://api.statcounter.com/stats/?u=USERNAME&k=API_KEY&p=PROJECT_ID&f=json&s=summary')
  .then(response => response.json())
  .then(data => console.log(data));

Data Export

Automated Exports:

Schedule CSV exports
Email reports (daily, weekly, monthly)
PDF report generation

Manual Exports:

Dashboard > Reports > Export
Select date range
Choose format (CSV, PDF)
Download

Third-Party Integrations

Email Marketing

StatCounter doesn't directly integrate with email platforms, but you can:

Export visitor data
Analyze traffic from email campaigns
Use UTM parameters in email links

https://example.com/offer?utm_source=newsletter&utm_medium=email&utm_campaign=spring_sale

CRM Systems

No native CRM integrations. Workflow:

Export StatCounter data
Import to CRM manually
Use visitor tracking for lead scoring

Zapier

StatCounter is not available on Zapier. Alternative:

Use API to fetch data
Custom webhook integration
Manual data sync

Validation

Verify Integration

Check Code Presence:

// Browser console
if (typeof _statcounter !== 'undefined') {
  console.log('StatCounter loaded via integration');
} else {
  console.error('StatCounter not found');
}

View Page Source:

Right-click > View Page Source
Search for "statcounter"
Verify project ID matches

Network Tab:

DevTools > Network
Reload page
Look for requests to statcounter.com
Verify 200 status

Integration Issues

Issue	Cause	Solution
Code not appearing	Plugin/integration failed	Check plugin settings, reinstall
Duplicate tracking	Multiple integrations	Remove duplicate code/plugins
Wrong project ID	Configuration error	Verify settings in integration
Not loading on all pages	Incorrect implementation	Check integration applies site-wide

Best Practices

Platform Selection

Use official plugins when available (WordPress, Shopify)
Code injection for platforms without plugins
Tag managers for complex setups
Manual integration for custom platforms

Implementation

Test in staging before production
Verify tracking across all page types
Document integration method
Keep credentials secure
Regular verification after updates

Maintenance

Check after platform updates
Verify after theme changes
Monitor for conflicts with other scripts
Keep backup of settings

Troubleshooting

Common Integration Problems

Plugin Conflicts (WordPress):

// Disable other analytics plugins
// Check for JavaScript errors
// Update to latest plugin version

Theme Override:

Some themes may remove footer scripts
Check theme documentation
Add code to child theme

Caching Issues:

Clear cache after installation
Verify code in browser source (not cached)
Test in incognito mode

Tag Manager Issues:

Verify trigger fires on all pages
Check tag firing order
Test in GTM preview mode

Support Resources

Nach oben