Installation

TraceLog is available as an npm package and via CDN. Choose the method that fits your stack.

NPM (Recommended)

npm install @tracelog/lib

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

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

Works with any framework — React, Vue, Angular, Svelte, Next.js, Nuxt, SvelteKit.

SSR / SSG

@tracelog/lib is safe to import in server-side environments. All browser APIs are guarded internally — the library no-ops in Node.js and only activates in the browser.

CDN — Script Tag (HTML Sites / Shopify)

Add the script before </head> and call tracelog.init() after the script loads:

<script src="https://cdn.jsdelivr.net/npm/@tracelog/lib@latest/dist/browser/tracelog.js"></script>
<script>
  tracelog.init({
    integrations: {
      tracelog: { projectId: 'your-project-id' }
    }
  });
</script>

This injects a global tracelog object on window. Suitable for Shopify themes, WordPress, or any HTML page where a bundler is not available.

Production usage

For production, pin to a specific version instead of @latest to avoid unexpected breaking changes (e.g., @tracelog/lib@2.7.1).

CDN — ES Module (Modern Browsers)

<script type="module">
  import { tracelog } from 'https://cdn.jsdelivr.net/npm/@tracelog/lib@latest/dist/browser/tracelog.esm.js';

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

Where to Find Your Project ID

Your Project ID is in the TraceLog dashboard under Settings → Project ID. It looks like proj_live_xxxxxxxx.

Browser Support

Browser	Minimum Version
Chrome	60+
Firefox	55+
Safari	12+
Edge	79+

Next Steps

• Quick Start — Initialize TraceLog and verify events are flowing
• Custom Events — Track business-specific actions