@lukulent/svelte-umami
Version:
[](https://madewithsvelte.com/p/svelte-umami/shield-link)
209 lines (208 loc) • 6.67 kB
TypeScript
/**
* Configuration for the Umami Tracker
* @property data-host-url - By default, Umami will send data to wherever the script is located. You can override this to send data to another location.
* @property data-tag - The custom tag you want tu use for page view tracking
* @property data-auto-track - By default, Umami tracks all page views and events for you automatically. You can disable this behavior and track events yourself using the tracker functions.
* @property data-exclude-search - Exclude query parameters from tracking
* @property data-domains - If you want the tracker to only run on specific domains, you can add them to your tracker script. This is a comma delimited list of domain names. Helps if you are working in a staging/development environment.
* @property data-cache - If you get a lot of page views from the same user, for example in a forum website, you can cache some data to improve the performance of the tracking script. Note: This will use session storage so you may need to inform your users.
*/
export interface UmamiTrackerConfiguration {
'data-host-url'?: string;
'data-tag'?: string;
'data-auto-track'?: boolean;
'data-exclude-search'?: boolean;
'data-domains'?: string;
'data-cache'?: boolean;
}
/**
* https://github.com/umami-software/umami/blob/master/src/tracker/index.d.ts
*/
export type TrackedProperties = {
/**
* Hostname of server
*
* @description extracted from `window.location.hostname`
* @example 'analytics.umami.is'
*/
hostname: string;
/**
* Browser language
*
* @description extracted from `window.navigator.language`
* @example 'en-US', 'fr-FR'
*/
language: string;
/**
* Page referrer
*
* @description extracted from `window.navigator.language`
* @example 'https://analytics.umami.is/docs/getting-started'
*/
referrer: string;
/**
* Screen dimensions
*
* @description extracted from `window.screen.width` and `window.screen.height`
* @example '1920x1080', '2560x1440'
*/
screen: string;
/**
* Page title
*
* @description extracted from `document.querySelector('head > title')`
* @example 'umami'
*/
title: string;
/**
* Page url
*
* @description built from `${window.location.pathname}${window.location.search}`
* @example 'docs/getting-started'
*/
url: string;
/**
* Website ID (required)
*
* @example 'b59e9c65-ae32-47f1-8400-119fcf4861c4'
*/
website: string;
};
export type WithRequired<T, K extends keyof T> = T & {
[P in K]-?: T[P];
};
/**
*
* Event Data can work with any JSON data. There are a few rules in place to maintain performance.
* - Numbers have a max precision of 4.
* - Strings have a max length of 500.
* - Arrays are converted to a String, with the same max length of 500.
* - Objects have a max of 50 properties. Arrays are considered 1 property.
*/
export interface EventData {
[key: string]: number | string | EventData | number[] | string[] | EventData[];
}
export type EventProperties = {
/**
* NOTE: event names will be truncated past 50 characters
*/
name: string;
data?: EventData;
} & WithRequired<TrackedProperties, 'website'>;
export type PageViewProperties = WithRequired<TrackedProperties, 'website'>;
export type CustomEventFunction = (props: PageViewProperties) => EventProperties | PageViewProperties;
export type UmamiTracker = {
track: {
/**
* Track a page view
*
* @example ```
* umami.track();
* ```
*/
(): Promise<string>;
/**
* Track an event with a given name
*
* NOTE: event names will be truncated past 50 characters
*
* @example ```
* umami.track('signup-button');
* ```
*/
(eventName: string): Promise<string>;
/**
* Tracks an event with dynamic data.
*
* NOTE: event names will be truncated past 50 characters
*
* When tracking events, the default properties are included in the payload. This is equivalent to running:
*
* ```js
* umami.track(props => ({
* ...props,
* name: 'signup-button',
* data: {
* name: 'newsletter',
* id: 123
* }
* }));
* ```
*
* @example ```
* umami.track('signup-button', { name: 'newsletter', id: 123 });
* ```
*/
(eventName: string, obj: EventData): Promise<string>;
/**
* Tracks a page view with custom properties
*
* @example ```
* umami.track({ website: 'e676c9b4-11e4-4ef1-a4d7-87001773e9f2', url: '/home', title: 'Home page' });
* ```
*/
(properties: PageViewProperties): Promise<string>;
/**
* Tracks an event with fully customizable dynamic data
* If you don't specify any `name` and/or `data`, it will be treated as a page view
*
* @example ```
* umami.track((props) => ({ ...props, url: path }));
* ```
*/
(eventFunction: CustomEventFunction): Promise<string>;
};
};
export type OptionalTrackedProperties = {
/**
* Hostname of server
*
* @description extracted from `window.location.hostname`
* @example 'analytics.umami.is'
*/
hostname?: string;
/**
* Browser language
*
* @description extracted from `window.navigator.language`
* @example 'en-US', 'fr-FR'
*/
language?: string;
/**
* Page referrer
*
* @description extracted from `window.navigator.language`
* @example 'https://analytics.umami.is/docs/getting-started'
*/
referrer?: string;
/**
* Screen dimensions
*
* @description extracted from `window.screen.width` and `window.screen.height`
* @example '1920x1080', '2560x1440'
*/
screen?: string;
/**
* Page title
*
* @description extracted from `document.querySelector('head > title')`
* @example 'umami'
*/
title?: string;
/**
* Page url
*
* @description built from `${window.location.pathname}${window.location.search}`
* @example 'docs/getting-started'
*/
url?: string;
/**
* Website ID (required)
*
* @example 'b59e9c65-ae32-47f1-8400-119fcf4861c4'
*/
website?: string;
};
export interface WindowWithUmami extends Window {
umami: UmamiTracker | undefined;
}