Getting Started
Get TraceLog running on your website in 5 minutes. No complex configuration needed.
Request Access
Join the waitlist to request access. We are rolling out invites every week.
Set Up Custom Subdomain (Optional)
Configure a custom subdomain to avoid ad blockers and ensure first-party tracking. This step is optional but highly recommended for production.
Why use a custom subdomain?
- Bypass ad blockers (they often block analytics.tracelog.io)
- Keep tracking as first-party requests (better for privacy compliance)
- Improve tracking reliability by 20-30%
Create a CNAME record in your DNS settings:
| Host | Type | Value |
|---|---|---|
YOUR_PROJECT_ID | CNAME | mdw.tracelog.io |
Replace YOUR_PROJECT_ID with your actual Project ID from the dashboard.
Example: If your Project ID is analytics-prod and your domain is example.com, create analytics-prod.example.com → mdw.tracelog.io
DNS Propagation Time
DNS changes can take 5-60 minutes to propagate. You can proceed with the next steps while waiting.
Install TraceLog
Choose your preferred installation method:
Option A: NPM (Recommended)
npm install @tracelog/libOption B: CDN (HTML)
<script src="https://cdn.jsdelivr.net/npm/@tracelog/lib@latest/dist/browser/tracelog.js"></script>Add this script tag to your HTML <head> or before closing </body>
Initialize TraceLog
Add this code to your application entry point:
import { tracelog } from '@tracelog/lib';
// Initialize TraceLog
await tracelog.init({
integrations: {
tracelog: {
projectId: 'your-project-id' // Get this from your dashboard
}
}
});
// That's it! Events are now tracked automatically.Where to find your Project ID:
Go to your TraceLog project → Settings → Project ID
Verify It's Working
Check that events are flowing:
- Load your website in a browser
- Open your TraceLog dashboard
- Check the Analytics page for real-time visitor count
- You should see your session appearing within seconds
🎉 You're all set!
TraceLog is now automatically tracking page views, sessions, clicks, errors, and Web Vitals.
Advanced Usage
Track Custom Events
Track business-specific events like purchases, signups, or feature usage:
// 🚀 E-commerce tracking examples
tracelog.event('purchase', {
value: 49.99,
currency: 'EUR',
items: ['leather-boots-v2']
});
// Track steps in your checkout funnel
tracelog.event('checkout_step', {
step: 2,
method: 'stripe'
});Advanced Configuration
Customize what TraceLog tracks and add global metadata:
await tracelog.init({
integrations: {
tracelog: {
projectId: 'your-project-id'
}
},
// Optional: Session configuration
sessionTimeout: 900000, // 15 minutes (default)
// Optional: Add global metadata (attached to all events)
globalMetadata: {
app_version: '1.0.0',
environment: 'production'
}
});Framework Integration
TraceLog works with all major JavaScript frameworks:
React
Initialize in your root component or useEffect hook
Next.js
Initialize in _app.tsx or app/layout.tsx
Vue/Angular
Initialize in main.ts or app component