@clicsdev/tracker
v0.1.3
Published
Clics browser analytics tracker — pageviews via script tag, custom events via track()
Maintainers
maximin26Readme
@clicsdev/tracker
Privacy-friendly analytics for websites, made by Clics.
A lightweight, cookie-free alternative to Google Analytics. Track pageviews and custom events without cookies, persistent identifiers, or cross-site tracking — built for teams that want clear insights and GDPR-friendly measurement.
Install
npm install @clicsdev/trackerThe script tag is required for pageviews and initializes the tracker. The npm package adds a typed track() helper for custom events.
Quick start
1. Add the script
Place this in your HTML layout (or load it with your framework’s script component):
<script
defer
data-project-id="YOUR_PROJECT_ID"
src="https://clics.dev/tracker.js"
></script>Replace YOUR_PROJECT_ID with the project ID from your Clics dashboard.
Local development — add the data-allow-localhost flag:
<script
defer
data-project-id="YOUR_PROJECT_ID"
data-allow-localhost
src="https://clics.dev/tracker.js"
></script>2. Track custom events (optional)
After the script is on the page:
import { track } from "@clicsdev/tracker"
track("signup", { plan: "pro" })What gets tracked
| Type | How | Event name |
| --- | --- | --- |
| Pageviews | Automatic (initial load + SPA navigation) | pageview |
| Custom events | track() in your code | Any name you choose |
Each event includes the page URL, referrer, UTM parameters, and your project ID. Custom event properties are merged into the event payload.
API
track(name, props?)
Send a custom event from the browser.
track("signup")
track("purchase", { plan: "pro", billing: "annual" })| Argument | Type | Description |
| --- | --- | --- |
| name | string | Event name (e.g. signup, purchase) |
| props | Record<string, unknown> | Optional properties attached to the event |
track() only works in the browser and requires the tracker script to be loaded first.
Framework examples
Next.js (App Router)
import Script from "next/script"
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script
defer
src="https://clics.dev/tracker.js"
data-project-id="YOUR_PROJECT_ID"
/>
</body>
</html>
)
}import { track } from "@clicsdev/tracker"
export function SignupButton() {
return (
<button type="button" onClick={() => track("signup", { plan: "pro" })}>
Sign up
</button>
)
}React / Vite
<!-- index.html -->
<script
defer
data-project-id="YOUR_PROJECT_ID"
src="https://clics.dev/tracker.js"
></script>import { track } from "@clicsdev/tracker"
track("cta_click", { location: "hero" })Script attributes
| Attribute | Required | Description |
| --- | --- | --- |
| data-project-id | Yes | Your Clics project ID |
| data-allow-localhost | No | Allow tracking on localhost and 127.0.0.1 |
| src | Yes | https://clics.dev/tracker.js |