Docs / SDK & Integration / Basic SDK Setup

SDK Integration Guide

Last updated: January 2026 • 8 min read

The SiteData SDK is a lightweight JavaScript library (~3KB minified) that automatically tracks page views, sessions, and user behavior on your website.

Installation

Add the following code snippet to every page of your website, just before the closing </head> tag:

<!-- SiteData Analytics -->
<script src="https://app.sitedata.net/sdk/sm.js"></script>
<script>siteMetrics.init('YOUR_TRACKING_ID');</script>
Important: Replace YOUR_TRACKING_ID with your actual tracking ID from your SiteData dashboard.

Finding Your Tracking ID

Your tracking ID is available in your SiteData dashboard:

  1. Log in to app.sitedata.net
  2. Navigate to Settings → Websites
  3. Click on your website to view its details
  4. Copy the Tracking ID shown

Your tracking ID looks something like: Vy5tAQmbxkU6FxdQdxX1UQ

Basic Setup

The basic installation automatically tracks:

  • Page Views - Every page load is recorded
  • Sessions - Visitor sessions with 30-minute timeout
  • Unique Visitors - Using anonymous visitor IDs
  • Referrers - Where your traffic comes from
  • Device & Browser - What devices visitors use
  • Geography - Country, region, and city data
  • Scroll Depth - How far users scroll
  • Time on Page - How long users stay

Example: Complete HTML Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Website</title>

    <!-- SiteData Analytics -->
    <script src="https://app.sitedata.net/sdk/sm.js"></script>
    <script>siteMetrics.init('YOUR_TRACKING_ID');</script>
</head>
<body>
    <!-- Your page content -->
</body>
</html>

Single Page Applications (SPA)

For React, Vue, Angular, or other SPAs where pages don't fully reload, you need to manually track page views on route changes.

React Router Example

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

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

    useEffect(() => {
        // Track page view on route change
        if (window.siteMetrics) {
            window.siteMetrics.trackPageview();
        }
    }, [location]);

    return (/* your app */);
}

Vue Router Example

router.afterEach((to, from) => {
    // Track page view on route change
    if (window.siteMetrics) {
        window.siteMetrics.trackPageview();
    }
});

Configuration Options

You can customize the SDK behavior by passing options to the init() method:

siteMetrics.init('YOUR_TRACKING_ID', {
    trackClicks: true,     // Track button/link clicks
    trackScroll: true,     // Track scroll depth (default: true)
    trackForms: false,     // Track form submissions
    debug: false           // Log events to console
});
Option Type Default Description
trackClicks boolean false Automatically track clicks on buttons and links
trackScroll boolean true Track scroll depth percentage
trackForms boolean false Automatically track form submissions
debug boolean false Log all events to browser console

Verify Installation

After installing the tracking code, verify it's working:

1

Enable Debug Mode

Add debug: true to see events in your browser console.

2

Visit Your Website

Open your website in a browser and navigate to a few pages.

3

Check Your Dashboard

Log into SiteData and check the real-time view for your activity.

Success! If you see your page views appearing in the dashboard, the installation is complete.