https://github.com/SaschaLucius/svelte-umami
Simple Umami Analytics integration into Svelte and SvelteKit
https://github.com/SaschaLucius/svelte-umami
analytics analytics-tracking svelte svelte-component svelte-components sveltekit umami umami-analytics web-analytics
Last synced: 14 days ago
JSON representation
Simple Umami Analytics integration into Svelte and SvelteKit
- Host: GitHub
- URL: https://github.com/SaschaLucius/svelte-umami
- Owner: SaschaLucius
- License: mit
- Created: 2024-04-13T22:23:20.000Z (about 1 year ago)
- Default Branch: dev
- Last Pushed: 2025-02-07T13:59:40.000Z (5 months ago)
- Last Synced: 2025-06-07T13:53:07.752Z (18 days ago)
- Topics: analytics, analytics-tracking, svelte, svelte-component, svelte-components, sveltekit, umami, umami-analytics, web-analytics
- Language: Svelte
- Homepage: https://www.npmjs.com/package/@lukulent/svelte-umami
- Size: 920 KB
- Stars: 23
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: code_of_conduct.md
Awesome Lists containing this project
README
# Svelte Umami Analytics (Sumami)
[](https://madewithsvelte.com/p/svelte-umami/shield-link)
Add Umami Analytics easily to your Svelte or SvelteKit app and track analytics and custom events.
All by this type-safe Svelte component.
_Important_ - this requires a [Umami Analytics](https://umami.is/) account.
Components:
- UmamiAnalytics: Umami initialization
- UmamiAnalyticsEnv: Umami initialization with environment variables (SvelteKit needed)
- UmamiTrackClicks: Track clicks in an area
Functions:
- trackPageView: Manual page view tracking
- trackEvent: Event tracking
- handleEvent: Svelte event handler for event tracking
Stores:
- isEnabled: Store for reading and writing if the tracking is enabled
- status: Store for keeping track of the Script status
## Install the package
```bash
npm i --save-dev @lukulent/svelte-umami
```
## Usage
[Example usage](https://saschalucius.github.io/svelte-umami/)
https://umami.is/docs/collect-data
### Add tracking to your website
- include somewhere, where it will be run once e.g. +layout.svelte
```svelte
import { UmamiAnalytics } from '@lukulent/svelte-umami';
```
### Configure Tracking
https://umami.is/docs/tracker-configuration
```svelte
import { UmamiAnalytics } from '@lukulent/svelte-umami';
```
### Add tracking to your website with Environment variables
Note: SvelteKit needed
- .env
```bash
PUBLIC_UMAMI_SRC=https://eu.umami.is/script.js
PUBLIC_UMAMI_WEBSITE_ID=123456
```
- +layout.svelte
```svelte
import { UmamiAnalyticsEnv } from '@lukulent/svelte-umami';
```
### Track Page views
https://umami.is/docs/tracker-functions
Per default all page views will be tracked als long as, UmamiAnalytics is initialized.
You can disable this behavior by adding 'data-auto-track': false to the configuration property.
#### Track Page views manually
```svelte
import { trackPageView } from '@lukulent/svelte-umami';
import { onMount } from 'svelte';
onMount(() => {
trackPageView();
});
```
or use custom properties as defined here https://umami.is/docs/tracker-functions
```svelte
trackPageView({ url: 'test', referrer: 'google' })}>
```
### Track events
https://umami.is/docs/tracker-functions
Per default all events will be tracked als long as, UmamiAnalytics is initialized and the element has the data-umami-event property.
You can disable this behavior by adding 'data-auto-track': false to the configuration property.
```svelte
import { UmamiAnalytics } from '@lukulent/svelte-umami';
Click me
```
#### Track events manually
```svelte
import { UmamiAnalytics, trackEvent } from '@lukulent/svelte-umami';
trackEvent('button pressed', { key: 'value' })}> Track Event
```
### Helpers
#### Event Handler
there is a pre-defined event handler in this library
```svelte
import { UmamiAnalytics, handleEvent } from '@lukulent/svelte-umami';
Clicker
Volvo
Saab
```
#### ClickTracker
If you want to track clicks for a complete section of your website or just multiple elements together, you can use UmamiTrackClicks.
```svelte
import { UmamiAnalytics, UmamiTrackClicks } from '@lukulent/svelte-umami';
Click Tracker Track
please add UmamiTrackClicks around your elements and add data-umami-event where needed
Click me
```
# How to contribute
## How to contribute
Contributions are welcome! Here's how you can contribute to the project:
1. Fork the repository on GitHub.
2. Clone the forked repository to your local machine.
3. Create a new branch for your changes.
4. Make your desired changes to the codebase.
5. Test your changes to ensure they work as expected.
6. Commit your changes and push them to your forked repository.
7. Submit a pull request to the original repository.
Please make sure to follow the project's coding conventions and guidelines when making your changes. Also, consider writing tests for your code if applicable.
Thank you for contributing to the project!
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
## Testing Your Package
To test a package, you can use npm link, which links a package globally, and lets you use it anywhere.
```bash
npm link
```
You can run the following command to see your linked packages:
```bash
npm ls --link --global
```
## Building
To build your library:
```bash
npm run package
```
To create a production version of your showcase app:
```bash
npm run build
```
You can preview the production build with `npm run preview`.
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
## Publishing
Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
To publish your library to [npm](https://www.npmjs.com):
```bash
npm publish --access public
```