TrackFox logoTrackFoxDocs
Dashboard
Docs/INSTALLATION GUIDES/Static HTML

Static HTML Installation

Installing TrackFox on your static HTML website is the simplest setup possible. Just add one script tag to your HTML and you're ready to track visitors.

Quick Install with CLI

Even for static sites, you can use the TrackFox CLI:

npx trackfox add

The CLI will guide you through the setup and show you where to add the tracking script. Learn more →

Manual Installation

Step 1: Get Your Tracking Script

  1. Log in to your TrackFox dashboard
  2. Click on the website dropdown in the top navigation
  3. Select "Site Settings" from the dropdown menu
  4. In the General tab, copy your unique tracking script

Your tracking script will look like this:

<script
  defer
  src="https://trackfox.app/script.js"
  data-website-id="your-website-id-here"
  data-domain="yourdomain.com"
></script>

Step 2: Add Script to Your HTML Files

Add the tracking script inside the <head> tag of every HTML page you want to track:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website</title>

    <!-- TrackFox Analytics -->
    <script
      defer
      src="https://trackfox.app/script.js"
      data-website-id="your-website-id-here"
      data-domain="yourdomain.com"
    ></script>

    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>Your content here...</p>
  </body>
</html>

Using a Template System

If you're using a template system or SSI (Server Side Includes), add the script to your header template:

<!-- header.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website</title>

    <script
      defer
      src="https://trackfox.app/script.js"
      data-website-id="your-website-id-here"
      data-domain="yourdomain.com"
    ></script>
  </head>
  <body></body>
</html>

Then include it in your pages:

<!--#include virtual="/header.html" -->
<h1>Welcome to My Website</h1>
<!--#include virtual="/footer.html" -->

Step 3: Verify Installation

  1. Save your changes and upload your files to your web server
  2. Visit your website in a browser
  3. Return to your TrackFox dashboard
  4. Use the "Verify Installation" button in Site Settings
  5. Confirm that page views are being tracked in your dashboard

Custom Event Tracking

Once the base script is installed, you can track custom events with simple JavaScript:

<script>
  // Track a form submission
  function trackSignup() {
    window.trackfox("signup", {
      email: document.getElementById("email").value,
    });
  }

  // Track a button click
  function trackDownload(fileName) {
    window.trackfox("download", {
      file: fileName,
    });
  }

  // Track a purchase
  function trackPurchase(amount, email) {
    window.trackfox("payment", {
      email: email,
      amnt: amount, // Amount in cents
    });
  }
</script>

<!-- Use in your HTML -->
<form onsubmit="trackSignup(); return true;">
  <input type="email" id="email" placeholder="Enter your email" />
  <button type="submit">Sign Up</button>
</form>

<button onclick="trackDownload('whitepaper.pdf')">Download Whitepaper</button>

Event Listeners (Modern Approach)

For a more modern approach, use event listeners:

<form id="signup-form">
  <input type="email" id="email" placeholder="Enter your email" />
  <button type="submit">Sign Up</button>
</form>

<button id="download-btn">Download Whitepaper</button>

<script>
  // Track form submission
  document
    .getElementById("signup-form")
    .addEventListener("submit", function (e) {
      e.preventDefault();
      const email = document.getElementById("email").value;

      window.trackfox("signup", { email: email });

      // Submit form or show success message
    });

  // Track button click
  document
    .getElementById("download-btn")
    .addEventListener("click", function () {
      window.trackfox("download", {
        file: "whitepaper.pdf",
      });
    });
</script>

Multiple Pages

For sites with multiple pages, you have a few options:

Option 1: Copy-Paste

Copy the tracking script to every HTML file. Simple but can be tedious.

Option 2: JavaScript Include

Create a common JavaScript file:

// common.js
(function () {
  const script = document.createElement("script");
  script.defer = true;
  script.src = "https://trackfox.app/script.js";
  script.setAttribute("data-website-id", "your-website-id-here");
  script.setAttribute("data-domain", "yourdomain.com");
  document.head.appendChild(script);
})();

Then include it in all pages:

<head>
  <script src="/common.js"></script>
</head>

Option 3: Server-Side Includes

If your web server supports SSI:

<!--#include virtual="/includes/trackfox.html" -->

Testing

Test your installation by:

  1. Opening your website in a browser
  2. Opening DevTools (F12) and checking the Network tab for requests to trackfox.app
  3. Verifying data appears in your TrackFox dashboard
  4. Checking the Console tab for any errors

Troubleshooting

Common issues and solutions:

  • Script not loading: Check your website ID and domain configuration
  • No data appearing: Verify the script is in the <head> tag and loading properly
  • CORS errors: The script is served with proper CORS headers, this shouldn't happen
  • Multiple tracking scripts: Make sure you only have one TrackFox script per page

Important Notes

Important: Make sure to replace your-website-id-here and yourdomain.com with your actual website ID and domain from the TrackFox dashboard.

Best Practice: Place the script in the <head> section and use the defer attribute to ensure it doesn't block page rendering.

Advanced: Single Page Behavior

If your static site uses JavaScript for navigation (like a simple SPA), you can manually trigger page views:

// After changing content/URL
function navigateTo(page) {
  // Your navigation logic here

  // Manually track the page view
  window.trackfox("pageview", {
    url: window.location.pathname,
  });
}

Next Steps

Now that you have TrackFox installed on your static HTML website:

Need help? Contact us for assistance.

Suggest features? We'd love your feedback