Welcome to Analytiq! Get set up in just a few minutes with our simple one-file setup.
Analytiq is built on one core principle: Real Data Only. We don’t track automatic garbage or noisy intent metrics. We track exactly what you explicitly tell us to.
By creating a single analytics.jsx file, Analytiq will:
- Safely initialize your tracking across any React/Next.js environment
- Tie perfectly into your own custom Authentication system
- Save events when users go offline and retry later
- Deduplicate accidentally repeated events
Step 1 — Create your account & project
- Go to analytiq-two.vercel.app/register and create your account.
- Click New Project, give it a name, and click Create.
Step 2 — Get your API Key
- Click on your project to open it
- Go to Settings in the left sidebar
- Scroll to Public API Key and click Reveal
- Copy your key (it looks like
pk_live_xxxxxxxxxxxxxxxxxx)
API Key Security:
Your Analytiq API Key (pk_live_...) is designed to be public. It is perfectly safe to expose it in your frontend code, environment variables, or bundled JavaScript.
Step 3 — Install the SDK
Open your terminal inside your project’s frontend folder and run:
Step 4 — The One-File Setup
You only need to set up Analytiq once in your entire app by creating a central tracking file.
Create a file called analytics.jsx (or .tsx) anywhere in your project. We highly recommend placing it next to your other providers or in your src/ folder.
This file acts as a bridge between Your Auth System and Our SDK.
React (Vite/CRA)
Next.js (App Router)
Vue / Vanilla JS
Create src/analytics.jsx. Customize the useAuth() import to point to whatever authentication system you use (Firebase, Supabase, Custom JWT, etc).import { Analytiq, identify, reset, track } from 'analytiq/react'
import { useEffect } from 'react'
// IMPORT YOUR APP'S AUTHENTICATION HOOK HERE
import { useAuth } from './context/AuthContext'
export function AnalyticsProvider({ children }) {
// Get the logged-in user from your system
const { user } = useAuth()
useEffect(() => {
if (user) {
identify(user) // Tell the SDK who logged in
} else {
reset() // Tell the SDK they logged out
}
}, [user])
return (
<>
{/* Initialize the SDK once globally */}
<Analytiq apiKey={import.meta.env.VITE_ANALYTIQ_KEY} />
{children}
</>
)
}
// Export track so you can import it easily in other files
export { track }
App.jsx or main.jsx and wrap your app in the AnalyticsProvider you just created. Make sure it goes inside your Auth provider!import { AnalyticsProvider } from './analytics.jsx'
import { AuthProvider } from './context/AuthContext.jsx'
function App() {
return (
<AuthProvider>
<AnalyticsProvider>
<Router>
...
</Router>
</AnalyticsProvider>
</AuthProvider>
)
}
Create components/analytics.tsx. Ensure you put 'use client' at the top.'use client'
import { Analytiq, identify, reset, track } from 'analytiq/react'
import { useEffect } from 'react'
// IMPORT YOUR APP'S AUTHENTICATION HOOK HERE
import { useAuth } from '@/context/AuthContext'
export function AnalyticsProvider({ children }: { children: React.ReactNode }) {
const { user } = useAuth()
useEffect(() => {
if (user) {
identify(user)
} else {
reset()
}
}, [user])
return (
<>
<Analytiq apiKey={process.env.NEXT_PUBLIC_ANALYTIQ_KEY!} />
{children}
</>
)
}
export { track }
app/layout.tsx:import { AnalyticsProvider } from '@/components/analytics'
import { AuthProvider } from '@/context/AuthContext'
export default function RootLayout({ children }) {
return (
<html>
<body>
<AuthProvider>
<AnalyticsProvider>
{children}
</AnalyticsProvider>
</AuthProvider>
</body>
</html>
)
}
Instead of a React component, you simply call init() at the very start of your application (like in main.js). You will need to manually call identify(user) after your login API succeeds.import { init } from 'analytiq'
// Initialize before mounting the app
init(import.meta.env.VITE_ANALYTIQ_KEY)
// ... mount your app
Step 5 — Track Events!
Analytiq relies entirely on manual tracking. We don’t automatically guess what a user did; you explicitly tell the SDK when something important happens.
Just import track from the analytics.jsx file you created in Step 4, and drop it anywhere you need it.
import { useEffect } from 'react';
import { track } from '../analytics.jsx';
export function LandingPage() {
// Track Page Views explicitly
useEffect(() => {
track('Home_page_view')
}, [])
const handleCheckout = () => {
// Track specific button clicks
track('checkout_started', {
plan: 'pro',
value: 49
});
// ... proceed to payment ...
};
return <button onClick={handleCheckout}>Upgrade Now</button>;
}
AnalyticsProvider is active and your API key is correct, the event will instantly appear on your dashboard.
What’s next?
Track Custom Events
Learn more about adding properties to your track() calls.
All Framework Guides
Detailed, step-by-step setup guides for every framework.
API Reference
Full documentation for the useAnalytiq hook and core functions.
