WXT Analytics

Add analytics, like google analytics, to your WXT extension.

Supported Analytics Providers

Google Analytics (Measurement Protocol)
Umami

Installation

Install the NPM package:

pnpm i @wxt-dev/analytics

Then add the module to your wxt.config.ts file:

export default defineConfig({
  modules: ['@wxt-dev/analytics'],
});

Create an app.config.ts file and fill out the required config:

// <srcDir>/app.config.ts
export default defineAppConfig({
  analytics: {
    debug: true,
    providers: [
      // ...
    ],
  },
});

Then use the analytics import to report events:

import { analytics } from '@wxt-dev/analytics';

await analytics.track('some-event');
await analytics.page();
await analytics.identify('some-user-id');

Providers

Google Analytics (Measurement Protocol)

Follow Google's documentation to obtain your credentials:

import { googleAnalytics4 } from '@wxt-dev/analytics/providers/google-analytics-4';

export default defineAppConfig({
  analytics: {
    providers: [
      googleAnalytics4({
        apiSecret: '...',
        measurementId: '...',
      }),
    ],
  },
});

Why use the Measurement Protocol instead of GTag?

Umami

import { umami } from '@wxt-dev/analytics/providers/umami';

export default defineAppConfig({
  analytics: {
    providers: [
      umami({
        baseUrl: 'https://your-domain.com',
        websiteId: '...',
        hostname: '...',
      }),
    ],
  },
});