Quickstart

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:

npm
yarn
pnpm

npm install analytiq

yarn add analytiq

pnpm add analytiq

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).

src/analytics.jsx

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 }

Then, open your root App.jsx or main.jsx and wrap your app in the AnalyticsProvider you just created. Make sure it goes inside your Auth provider!

src/App.jsx

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.

components/analytics.tsx

'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 }

Then wrap your app in app/layout.tsx:

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.

src/main.js

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.

LandingPage.jsx

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>;
}

That’s it! If the 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.

Getting Started

Framework Guides

Guides

Help

Step 1 — Create your account & project

Step 2 — Get your API Key

Step 3 — Install the SDK

Step 4 — The One-File Setup

Step 5 — Track Events!

What’s next?

Track Custom Events

All Framework Guides

API Reference

​Step 1 — Create your account & project

​Step 2 — Get your API Key

​Step 3 — Install the SDK

​Step 4 — The One-File Setup

​Step 5 — Track Events!

​What’s next?

Track Custom Events

All Framework Guides

API Reference

Step 1 — Create your account & project

Step 2 — Get your API Key

Step 3 — Install the SDK

Step 4 — The One-File Setup

Step 5 — Track Events!

What’s next?