Quick Start

After installing the package, initialize TraceLog in your app entry point. That's all you need — page views, sessions, clicks, and performance metrics start flowing automatically.

Basic Setup

import { tracelog } from '@tracelog/lib';

await tracelog.init({
  integrations: {
    tracelog: { projectId: 'your-project-id' }
  }
});

Open your TraceLog dashboard and go to Analytics. Your session should appear within a few seconds.

Initialization Order

For apps that use event listeners, transformers, or consent flows, the order of setup matters. Events like session_start and page_view fire immediately when init() is called, so anything you want to capture from the start must be configured first.

import { tracelog } from '@tracelog/lib';

// 1. Get user consent first (your responsibility)
const hasConsent = await getUserConsent();
if (!hasConsent) return;

// 2. Register event listeners BEFORE init (optional)
tracelog.on('event', (event) => {
  console.log(event.type, event);
});

// 3. Set transformers BEFORE init (optional, custom backends only)
tracelog.setTransformer('beforeSend', (event) => {
  return { ...event };
});

// 4. Initialize — tracking starts here
const { sessionId } = await tracelog.init({
  integrations: {
    tracelog: { projectId: 'your-project-id' }
  }
});

// 5. Identify the user after init (optional)
tracelog.identify('user_123', { plan: 'pro' });

// 6. Track custom events
tracelog.event('onboarding_completed');

What Gets Tracked Automatically

Once init() is called, TraceLog captures the following without any additional code:

Event	What it captures
`page_view`	Every navigation, including SPA route changes
`session_start`	New session creation with device, OS, browser, referrer
`click`	User interactions with elements (not form field values)
`scroll`	Scroll depth, velocity, and engagement per page
`web_vitals`	LCP, INP, CLS, FCP, TTFB, Long Tasks
`error`	JavaScript errors and unhandled promise rejections

See Automatic Tracking for a full breakdown of what each event captures.

Framework Examples

React / Next.js

// app/layout.tsx (App Router) or _app.tsx (Pages Router)
import { tracelog } from '@tracelog/lib';
import { useEffect } from 'react';

export default function RootLayout({ children }) {
  useEffect(() => {
    tracelog.init({
      integrations: {
        tracelog: { projectId: process.env.NEXT_PUBLIC_TRACELOG_PROJECT_ID }
      }
    });
  }, []);

  return <html><body>{children}</body></html>;
}

Angular

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { tracelog } from '@tracelog/lib';

export const appConfig: ApplicationConfig = {
  providers: [
    // ... your providers
  ]
};

// Initialize in main.ts after bootstrapApplication
tracelog.init({
  integrations: {
    tracelog: { projectId: environment.tracelogProjectId }
  }
});

Vue / Nuxt

// plugins/tracelog.client.ts
import { tracelog } from '@tracelog/lib';

export default defineNuxtPlugin(() => {
  tracelog.init({
    integrations: {
      tracelog: { projectId: useRuntimeConfig().public.tracelogProjectId }
    }
  });
});

Verify Your Setup

Deploy or run your app locally
Open your TraceLog dashboard → Analytics
Your session should appear within a few seconds

If you don't see events, enable QA Mode to see real-time logs in your browser console:

?tlog_mode=qa

Or check the Troubleshooting guide for common issues.

Next Steps

Custom Events — Track business-specific actions like sign-ups, purchases, and feature usage
Identify — Associate events with known users
Shopify Integration — Track Shopify purchases via webhooks

Basic Setup​

Initialization Order​

What Gets Tracked Automatically​

Framework Examples​

React / Next.js​

Angular​

Vue / Nuxt​

Verify Your Setup​

Next Steps​