Privacy-Focused-Web-Analytics-Dashboard

Tracking Script Installation Guide

Quick Start - Install PrivacyMetrics in 2 Minutes

Step 1: Get Your Tracking Code

Register an account: Visit your PrivacyMetrics dashboard
Create a website: Go to Settings → Websites → Add Website
Copy your tracking code: You’ll get a unique code like pm-abc123-1234567890

Step 2: Add the Script to Your Website

Add this single line of code to your website’s <head> section, just before the closing </head> tag:

<script src="https://your-domain.com/pm-tracker.js" data-tracking-code="pm-abc123-1234567890"></script>

Replace:

https://your-domain.com with your PrivacyMetrics server URL
pm-abc123-1234567890 with your actual tracking code

Step 3: Done! 🎉

That’s it! Your website is now tracked. Visit your dashboard to see real-time analytics.

Installation Examples

Static HTML Website

Add to your index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Website</title>
    
    <!-- PrivacyMetrics Tracking -->
    <script src="https://your-domain.com/pm-tracker.js" data-tracking-code="pm-abc123-1234567890"></script>
</head>
<body>
    <h1>Welcome to my website</h1>
</body>
</html>

WordPress

Go to Appearance → Theme Editor
Select header.php
Add the script before </head>

Or use a plugin like Insert Headers and Footers.

React / Next.js

React (Create React App, Vite)

Add to public/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- ... other head elements ... -->
    
    <!-- PrivacyMetrics -->
    <script src="https://your-domain.com/pm-tracker.js" data-tracking-code="pm-abc123-1234567890"></script>
</head>
<body>
    <div id="root"></div>
</body>
</html>

Next.js

Add to pages/_document.js (or _document.tsx):

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

export default function Document() {
  return (
    <Html>
      <Head>
        {/* PrivacyMetrics Tracking */}
        <script 
          src="https://your-domain.com/pm-tracker.js" 
          data-tracking-code="pm-abc123-1234567890"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Vue.js

Add to public/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- ... other head elements ... -->
    
    <!-- PrivacyMetrics -->
    <script src="https://your-domain.com/pm-tracker.js" data-tracking-code="pm-abc123-1234567890"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>

Angular

Add to src/index.html:

<!doctype html>
<html lang="en">
<head>
  <!-- ... other head elements ... -->
  
  <!-- PrivacyMetrics -->
  <script src="https://your-domain.com/pm-tracker.js" data-tracking-code="pm-abc123-1234567890"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Gatsby

Add to gatsby-ssr.js:

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script
      key="privacy-metrics"
      src="https://your-domain.com/pm-tracker.js"
      data-tracking-code="pm-abc123-1234567890"
    />,
  ]);
};

Advanced Configuration

Custom API Endpoint

If your tracking API is on a different domain:

<script 
  src="https://your-cdn.com/pm-tracker.js" 
  data-tracking-code="pm-abc123-1234567890"
  data-api-endpoint="https://api.your-domain.com/api/v1/track"
></script>

Debug Mode

Enable debug mode to see tracking events in the browser console:

<script 
  src="https://your-domain.com/pm-tracker.js" 
  data-tracking-code="pm-abc123-1234567890"
  data-debug="true"
></script>

This will log:

Tracking initialization
Session and visitor IDs
Every event sent to the server

Note: Don’t use debug mode in production!

Manual Event Tracking

Track Custom Events

Track button clicks, form submissions, or any custom action:

// Track a button click
document.getElementById('signup-btn').addEventListener('click', function() {
  window.PrivacyMetrics.trackEvent('signup_button_clicked', {
    location: 'homepage_hero',
    buttonText: 'Get Started'
  });
});

// Track form submission
document.getElementById('contact-form').addEventListener('submit', function() {
  window.PrivacyMetrics.trackEvent('contact_form_submitted', {
    formType: 'contact'
  });
});

// Track file download
document.getElementById('download-btn').addEventListener('click', function() {
  window.PrivacyMetrics.trackEvent('file_downloaded', {
    fileName: 'whitepaper.pdf',
    fileSize: '2.5MB'
  });
});

Track Page Views (SPA)

For Single Page Applications (React, Vue, Angular), manually track route changes:

// React Router
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

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

  useEffect(() => {
    if (window.PrivacyMetrics) {
      window.PrivacyMetrics.trackPageView();
    }
  }, [location]);

  return <div>...</div>;
}

Privacy Controls

User Opt-Out

Allow users to opt-out of tracking:

<button onclick="window.PrivacyMetrics.optOut()">
  Opt-out of Analytics
</button>

<button onclick="window.PrivacyMetrics.optIn()">
  Opt-in to Analytics
</button>

Check opt-out status:

if (window.PrivacyMetrics.isOptedOut()) {
  console.log('User has opted out of tracking');
}

What We Track (Privacy-First)

✅ We DO track:

Page views and navigation
Device type (mobile/desktop/tablet)
Browser and OS
Screen resolution
Referrer source
Time on page
Custom events you define

❌ We DON’T track:

Personal information (names, emails, etc.)
Cookies (we use sessionStorage/localStorage only)
IP addresses (hashed for privacy)
Cross-site activity
Fingerprinting beyond basic device info

Verification

Check if Tracking is Working

Open your website
Open browser DevTools (F12)
Go to Console tab
Add ?data-debug=true to your script tag temporarily
Reload the page
Look for: [PrivacyMetrics] Tracking event: pageview

Check Dashboard

Visit your PrivacyMetrics dashboard
Select your website
You should see your visit within 5-10 seconds

Content Security Policy (CSP)

If your site uses CSP headers, add:

script-src 'self' https://your-domain.com;
connect-src 'self' https://your-domain.com/api/v1/track;

Self-Hosting the Script

For maximum privacy and control, host the tracking script on your own domain:

Download pm-tracker.js from your PrivacyMetrics server
Upload to your website (e.g., /js/pm-tracker.js)
Update the script tag:

<script src="/js/pm-tracker.js" data-tracking-code="pm-abc123-1234567890"></script>

Benefits:

No third-party requests
Faster loading (same domain)
Better privacy
Works with strict CSP policies

Troubleshooting

Script Not Loading

Check:

Is the script URL correct?
Is your PrivacyMetrics server running?
Check browser console for errors

No Data in Dashboard

Check:

Is your tracking code correct?
Is the website active in settings?
Is tracking blocked by ad blocker? (Unlikely with privacy-focused tracking)
Check Network tab in DevTools for failed requests

Ad Blockers

PrivacyMetrics is privacy-focused and shouldn’t be blocked, but some aggressive blockers might block it. If needed:

Host the script on your own domain
Rename pm-tracker.js to something generic like analytics.js
Use a custom API endpoint path

Multiple Websites

Track multiple websites with different tracking codes:

Website 1:

<script src="https://your-domain.com/pm-tracker.js" data-tracking-code="pm-site1-123"></script>

Website 2:

<script src="https://your-domain.com/pm-tracker.js" data-tracking-code="pm-site2-456"></script>

Need Help?

Documentation: your-domain.com/docs
GitHub Issues: github.com/your-org/privacy-metrics/issues
Community: [Discord/Slack link]
Email: support@your-domain.com

API Reference

`window.PrivacyMetrics`

The global API object available after the script loads.

Methods

trackPageView()

Manually track a page view
Useful for Single Page Applications

trackEvent(eventName, properties)

Track a custom event
eventName (string): Name of the event
properties (object): Custom properties

track(eventType, eventData)

Low-level tracking method
eventType (string): Event type
eventData (object): Event data

optOut()

Disable tracking for this user

optIn()

Enable tracking for this user

isOptedOut()

Returns true if user has opted out

getSessionId()

Returns current session ID

getVisitorId()

Returns current visitor ID

Last Updated: February 3, 2026