Analytics

SveltePak includes support for analytics.

Providers

• Google Analytics
• Plausible
• Vercel

In the modules/analytics/index.ts file, export the provider file of the provider you want to use:

export * from "./provider/google";
// export * from './provider/plausible';
// export * from './provider/vercel';

Adding a new provider

To add a new provider, create a new file in the modules/analytics/provider directory and export the following functions:

export const trackPageView = () => {
  // ...
};

export const trackEvent = () => {
  // ...
};

Analytics Script

To include the analytics script in your app, use the AnalyticsScript component in the main layout.svelte file.

Pageviews are tracked automatically, unless you want to opt-out of the automatic tracking. In that case you can use the enableAutoPageviews prop to disable it.

import { AnalyticsScript } from '$modules/analytics';

<AnalyticsScript enableAutoPageviews={false} />

You’d then need to manually track page views and events using the custom tracking methods.

Custom Tracking

Pageviews

if you want to track page views manually, use the trackPageView function from the analytics module:

import { trackPageView } from "$modules/analytics";

trackPageView();

Custom Events

To track custom events, use the track method from the analytics provider:

import { trackEvent } from "$modules/analytics";

trackEvent("eventName", {
  /* ... */
});