Install Clicky Tracking Code

Installation Methods

Clicky can be installed via direct code placement, CMS plugins, or tag managers. Choose the method that best fits your technical setup.

Direct JavaScript Installation

Standard Installation

Add this code to every page of your website, just before the closing </body> tag:

<script>
  var clicky_site_ids = clicky_site_ids || [];
  clicky_site_ids.push(YOUR_SITE_ID);
</script>
<script async src="//static.getclicky.com/js"></script>

With Tracking Image Fallback

For visitors with JavaScript disabled:

<script>
  var clicky_site_ids = clicky_site_ids || [];
  clicky_site_ids.push(YOUR_SITE_ID);
</script>
<script async src="//static.getclicky.com/js"></script>
<noscript>
  <img alt="Clicky" width="1" height="1" src="//in.getclicky.com/YOUR_SITE_IDns.gif" />
</noscript>

Asynchronous Best Practice

The async attribute ensures Clicky doesn't block page rendering:

<!-- Recommended: async loading -->
<script async src="//static.getclicky.com/js"></script>

<!-- Alternative: defer loading -->
<script defer src="//static.getclicky.com/js"></script>

CMS-Specific Installation

WordPress

Using the Official Plugin:

1. Go to Plugins → Add New
2. Search for "Clicky Analytics"
3. Install and activate the plugin
4. Navigate to Settings → Clicky
5. Enter your Site ID and Site Key
6. Save settings

Manual Installation:

Edit your theme's footer.php and add the tracking code before </body>:

<script>
  var clicky_site_ids = clicky_site_ids || [];
  clicky_site_ids.push(<?php echo YOUR_SITE_ID; ?>);
</script>
<script async src="//static.getclicky.com/js"></script>
<?php wp_footer(); ?>
</body>

Shopify

1. Go to Online Store → Themes
2. Click Actions → Edit code
3. Open theme.liquid
4. Add tracking code before </body>:

<script>
  var clicky_site_ids = clicky_site_ids || [];
  clicky_site_ids.push(YOUR_SITE_ID);
</script>
<script async src="//static.getclicky.com/js"></script>
</body>

Squarespace

1. Go to Settings → Advanced → Code Injection
2. Paste the tracking code in the Footer section
3. Save changes

Wix

1. Go to your site dashboard
2. Click Settings → Tracking & Analytics
3. Click + New Tool → Custom
4. Paste the tracking code
5. Set placement to "Body - end"
6. Apply to all pages

Webflow

1. Open Project Settings
2. Go to the Custom Code tab
3. Paste tracking code in Footer Code
4. Publish your site

Tag Manager Installation

Google Tag Manager

1. Log into Google Tag Manager
2. Click Tags → New
3. Name the tag "Clicky Analytics"
4. Choose Custom HTML as tag type
5. Paste the tracking code:

<script>
  var clicky_site_ids = clicky_site_ids || [];
  clicky_site_ids.push(YOUR_SITE_ID);
</script>
<script async src="//static.getclicky.com/js"></script>

6. Set trigger to All Pages
7. Save and publish

Other Tag Managers

Clicky works with any tag manager that supports custom JavaScript:

• Tealium: Add as Custom Container tag
• Adobe Launch: Create a custom Core extension rule
• Segment: Use destination functions

Single-Page Applications

React

// In your App.js or layout component
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();

  useEffect(() => {
    // Load Clicky once
    if (!window.clicky_site_ids) {
      window.clicky_site_ids = [YOUR_SITE_ID];
      const script = document.createElement('script');
      script.src = '//static.getclicky.com/js';
      script.async = true;
      document.body.appendChild(script);
    }
  }, []);

  // Track route changes
  useEffect(() => {
    if (window.clicky) {
      window.clicky.log(location.pathname, document.title);
    }
  }, [location]);

  return <YourApp />;
}

Vue.js

// In router/index.js or main.js
router.afterEach((to, from) => {
  if (window.clicky) {
    window.clicky.log(to.path, to.meta.title || document.title);
  }
});

// Initial load in App.vue
mounted() {
  window.clicky_site_ids = [YOUR_SITE_ID];
  const script = document.createElement('script');
  script.src = '//static.getclicky.com/js';
  script.async = true;
  document.body.appendChild(script);
}

Next.js

// pages/_app.js
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import Script from 'next/script';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url) => {
      if (window.clicky) {
        window.clicky.log(url, document.title);
      }
    };

    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);

  return (
    <>
      <Script id="clicky-config" strategy="beforeInteractive">
        {`var clicky_site_ids = clicky_site_ids || []; clicky_site_ids.push(YOUR_SITE_ID);`}
      </Script>
      <Script src="//static.getclicky.com/js" strategy="afterInteractive" />
      <Component {...pageProps} />
    </>
  );
}

Verification

Confirm Installation

1. Visit your website in a new browser/incognito window
2. Open Clicky dashboard → Real-time
3. Your visit should appear within seconds

Check Page Source

1. Right-click on your page → View Page Source
2. Search for "clicky" or your Site ID
3. Verify the script tags are present

Browser Developer Tools

1. Open Developer Tools (F12)
2. Go to Network tab
3. Filter by "clicky"
4. Refresh the page
5. You should see requests to static.getclicky.com and in.getclicky.com

Common Installation Issues

Script Not Loading

• Check for typos in the Site ID
• Verify the script isn't blocked by CSP headers
• Ensure no JavaScript errors prevent execution

Duplicate Tracking

• Remove any duplicate tracking code instances
• Check both theme files and plugins/extensions
• Verify tag manager isn't firing twice

Wrong Site ID

Each website needs its own Site ID. Using the wrong ID sends data to the wrong property.