Documentation

Everything you need to integrate Lightweight Analytics into your website.

Quick Start

Get up and running in less than 2 minutes.

1. Create an Account

2. Create a Project

Click "New Project" in your dashboard and enter your website's name and domain. You'll receive a unique API key for your project.

3. Add the Tracking Script

Copy your tracking script from the project settings and paste it into your website's <head> tag.

Installation

Basic Installation

Add this script to your website's <head> tag:

<script defer src="https://lightweight-analytics.vercel.app/api/script" 
  data-api-key="YOUR_API_KEY">
</script>

Tip: The defer attribute ensures the script doesn't block page rendering.

Page Views

Page views are tracked automatically when you add the script. No additional configuration needed.

What's Tracked

Page URL and path
Referrer (where visitors came from)
Device type (desktop, mobile, tablet)
Browser information
Session ID (for unique visitor counting)

Custom Event Tracking

Track any interaction on your website with the global window.la object.

Track a Custom Event

// Basic syntax
window.la.track('event_type', 'event_name');

// Examples
window.la.track('click', 'signup_button');
window.la.track('submit', 'contact_form');
window.la.track('download', 'pricing_pdf');

Button Click Tracking

document.querySelector('#my-button').addEventListener('click', () => {
  window.la.track('click', 'my_button');
});

Form Submission Tracking

document.querySelector('form').addEventListener('submit', (e) => {
  window.la.track('submit', 'newsletter_form');
});

REST API

Send events directly to our API from any server or client.

Track Event Endpoint

POST/api/track

curl -X POST https://lightweight-analytics.vercel.app/api/track \
  -H "Content-Type: application/json" \
  -d '{
    "apiKey": "YOUR_API_KEY",
    "type": "pageview",
    "page": "/pricing"
  }'

Framework Guides

Next.js / React

// In your _app.js or layout.js
import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      <Script 
        src="https://lightweight-analytics.vercel.app/api/script"
        data-api-key="YOUR_API_KEY"
        strategy="afterInteractive"
      />
      {children}
    </>
  );
}

Vue / Nuxt

// In nuxt.config.js
export default {
  head: {
    script: [
      {
        src: 'https://lightweight-analytics.vercel.app/api/script',
        'data-api-key': 'YOUR_API_KEY',
        defer: true
      }
    ]
  }
}

HTML / Static Sites

<!-- Add to your <head> tag -->
<script defer 
  src="https://lightweight-analytics.vercel.app/api/script" 
  data-api-key="YOUR_API_KEY">
</script>

API Reference

POST /api/track - Request Body

Field	Type	Required	Description
apiKey	string	Yes	Your project's API key
type	string	Yes	Event type (pageview, click, custom)
page	string	Yes	Page URL where event occurred
name	string	No	Event name for custom events
referrer	string	No	Referring URL

Ready to get started?

Create your free account and start tracking in minutes.

Need Help?