{"id":28610082,"url":"https://github.com/SaschaLucius/svelte-umami","last_synced_at":"2025-06-11T22:33:04.318Z","repository":{"id":233186692,"uuid":"786256114","full_name":"SaschaLucius/svelte-umami","owner":"SaschaLucius","description":"Simple Umami Analytics integration into Svelte and SvelteKit","archived":false,"fork":false,"pushed_at":"2025-02-07T13:59:40.000Z","size":942,"stargazers_count":23,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2025-06-07T13:53:07.752Z","etag":null,"topics":["analytics","analytics-tracking","svelte","svelte-component","svelte-components","sveltekit","umami","umami-analytics","web-analytics"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@lukulent/svelte-umami","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SaschaLucius.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"code_of_conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-13T22:23:20.000Z","updated_at":"2025-06-06T00:15:52.000Z","dependencies_parsed_at":"2024-04-23T23:53:57.361Z","dependency_job_id":"dd4084c8-5860-4a79-af53-f5f275671646","html_url":"https://github.com/SaschaLucius/svelte-umami","commit_stats":null,"previous_names":["saschalucius/sveltekit-umami","saschalucius/svelte-umami"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/SaschaLucius/svelte-umami","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SaschaLucius%2Fsvelte-umami","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SaschaLucius%2Fsvelte-umami/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SaschaLucius%2Fsvelte-umami/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SaschaLucius%2Fsvelte-umami/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SaschaLucius","download_url":"https://codeload.github.com/SaschaLucius/svelte-umami/tar.gz/refs/heads/dev","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SaschaLucius%2Fsvelte-umami/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259354984,"owners_count":22844968,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["analytics","analytics-tracking","svelte","svelte-component","svelte-components","sveltekit","umami","umami-analytics","web-analytics"],"created_at":"2025-06-11T22:32:20.009Z","updated_at":"2025-06-11T22:33:04.311Z","avatar_url":"https://github.com/SaschaLucius.png","language":"Svelte","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Svelte Umami Analytics (Sumami)\n\n[![MadeWithSvelte.com shield](https://madewithsvelte.com/storage/repo-shields/5086-shield.svg)](https://madewithsvelte.com/p/svelte-umami/shield-link)\n\nAdd Umami Analytics easily to your Svelte or SvelteKit app and track analytics and custom events.\nAll by this type-safe Svelte component.\n\n_Important_ - this requires a [Umami Analytics](https://umami.is/) account.\n\nComponents:\n\n- UmamiAnalytics: Umami initialization\n- UmamiAnalyticsEnv: Umami initialization with environment variables (SvelteKit needed)\n- UmamiTrackClicks: Track clicks in an area\n\nFunctions:\n\n- trackPageView: Manual page view tracking\n- trackEvent: Event tracking\n- handleEvent: Svelte event handler for event tracking\n\nStores:\n\n- isEnabled: Store for reading and writing if the tracking is enabled\n- status: Store for keeping track of the Script status\n\n## Install the package\n\n```bash\nnpm i --save-dev @lukulent/svelte-umami\n```\n\n## Usage\n\n[Example usage](https://saschalucius.github.io/svelte-umami/)\n\nhttps://umami.is/docs/collect-data\n\n### Add tracking to your website\n\n- include somewhere, where it will be run once e.g. +layout.svelte\n\n```svelte\n\u003cscript\u003e\n\timport { UmamiAnalytics } from '@lukulent/svelte-umami';\n\u003c/script\u003e\n\n\u003cUmamiAnalytics websiteID=\"123456\" srcURL=\"https://eu.umami.is/script.js\" /\u003e\n```\n\n### Configure Tracking\n\nhttps://umami.is/docs/tracker-configuration\n\n```svelte\n\u003cscript\u003e\n\timport { UmamiAnalytics } from '@lukulent/svelte-umami';\n\u003c/script\u003e\n\n\u003cUmamiAnalytics\n\twebsiteID=\"123456\"\n\tsrcURL=\"https://eu.umami.is/script.js\"\n\tconfiguration={{\n\t\t'data-auto-track': true,\n\t\t'data-tag': 'example',\n\t\t'data-exclude-search': true,\n\t\t'data-host-url': 'https://eu.umami.is',\n\t\t'data-domains': 'saschalucius.github.io',\n\t\t'data-cache': true\n\t}}\n/\u003e\n```\n\n### Add tracking to your website with Environment variables\n\nNote: SvelteKit needed\n\n- .env\n\n```bash\nPUBLIC_UMAMI_SRC=https://eu.umami.is/script.js\nPUBLIC_UMAMI_WEBSITE_ID=123456\n```\n\n- +layout.svelte\n\n```svelte\n\u003cscript\u003e\n\timport { UmamiAnalyticsEnv } from '@lukulent/svelte-umami';\n\u003c/script\u003e\n\n\u003cUmamiAnalyticsEnv /\u003e\n```\n\n### Track Page views\n\nhttps://umami.is/docs/tracker-functions\n\nPer default all page views will be tracked als long as, UmamiAnalytics is initialized.\nYou can disable this behavior by adding 'data-auto-track': false to the configuration property.\n\n#### Track Page views manually\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { trackPageView } from '@lukulent/svelte-umami';\n\timport { onMount } from 'svelte';\n\tonMount(() =\u003e {\n\t\ttrackPageView();\n\t});\n\u003c/script\u003e\n```\n\nor use custom properties as defined here https://umami.is/docs/tracker-functions\n\n```svelte\n\u003cbutton on:click={(e) =\u003e trackPageView({ url: 'test', referrer: 'google' })}\u003e\n```\n\n### Track events\n\nhttps://umami.is/docs/tracker-functions\n\nPer default all events will be tracked als long as, UmamiAnalytics is initialized and the element has the data-umami-event property.\nYou can disable this behavior by adding 'data-auto-track': false to the configuration property.\n\n```svelte\n\u003cscript\u003e\n\timport { UmamiAnalytics } from '@lukulent/svelte-umami';\n\u003c/script\u003e\n\n\u003cUmamiAnalytics websiteID=\"123456\" srcURL=\"https://eu.umami.is/script.js\" /\u003e\n\n\u003cbutton data-umami-event=\"button pressed\"\u003e Click me \u003c/button\u003e\n```\n\n#### Track events manually\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { UmamiAnalytics, trackEvent } from '@lukulent/svelte-umami';\n\u003c/script\u003e\n\n\u003cUmamiAnalytics\n\twebsiteID=\"123456\"\n\tsrcURL=\"https://eu.umami.is/script.js\"\n\tconfiguration={{\n\t\t'data-auto-track': false\n\t}}\n/\u003e\n\n\u003cbutton on:click={(e) =\u003e trackEvent('button pressed', { key: 'value' })}\u003e Track Event \u003c/button\u003e\n```\n\n### Helpers\n\n#### Event Handler\n\nthere is a pre-defined event handler in this library\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport { UmamiAnalytics, handleEvent } from '@lukulent/svelte-umami';\n\u003c/script\u003e\n\n\u003cUmamiAnalytics\n\twebsiteID=\"123456\"\n\tsrcURL=\"https://eu.umami.is/script.js\"\n\tconfiguration={{\n\t\t'data-auto-track': false\n\t}}\n/\u003e\n\n\u003cbutton data-umami-event=\"clicker\" on:click={handleEvent}\u003e Clicker \u003c/button\u003e\n\n\u003cinput data-umami-event=\"name\" type=\"text\" on:change={handleEvent} /\u003e\n\n\u003cselect on:change={handleEvent} data-umami-event=\"cars\"\u003e\n\t\u003coption value=\"volvo\"\u003eVolvo\u003c/option\u003e\n\t\u003coption value=\"saab\"\u003eSaab\u003c/option\u003e\n\u003c/select\u003e\n```\n\n#### ClickTracker\n\nIf you want to track clicks for a complete section of your website or just multiple elements together, you can use UmamiTrackClicks.\n\n```svelte\n\u003cscript\u003e\n\timport { UmamiAnalytics, UmamiTrackClicks } from '@lukulent/svelte-umami';\n\u003c/script\u003e\n\n\u003cUmamiAnalytics\n\twebsiteID=\"123456\"\n\tsrcURL=\"https://eu.umami.is/script.js\"\n\tconfiguration={{\n\t\t'data-auto-track': false\n\t}}\n/\u003e\n\n\u003cUmamiTrackClicks name=\"element clicked\"\u003e\n\t\u003csection data-umami-event=\"section\"\u003e\n\t\t\u003ch1 data-umami-event=\"header\"\u003eClick Tracker Track\u003c/h1\u003e\n\n\t\t\u003ch2\u003eplease add UmamiTrackClicks around your elements and add data-umami-event where needed\u003c/h2\u003e\n\n\t\t\u003cbutton data-umami-event=\"button\"\u003e Click me \u003c/button\u003e\n\t\u003c/section\u003e\n\u003c/UmamiTrackClicks\u003e\n```\n\n# How to contribute\n\n## How to contribute\n\nContributions are welcome! Here's how you can contribute to the project:\n\n1. Fork the repository on GitHub.\n2. Clone the forked repository to your local machine.\n3. Create a new branch for your changes.\n4. Make your desired changes to the codebase.\n5. Test your changes to ensure they work as expected.\n6. Commit your changes and push them to your forked repository.\n7. Submit a pull request to the original repository.\n\nPlease make sure to follow the project's coding conventions and guidelines when making your changes. Also, consider writing tests for your code if applicable.\n\nThank you for contributing to the project!\n\n## Developing\n\nOnce you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:\n\n```bash\nnpm run dev\n\n# or start the server and open the app in a new browser tab\nnpm run dev -- --open\n```\n\nEverything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.\n\n## Testing Your Package\n\nTo test a package, you can use npm link, which links a package globally, and lets you use it anywhere.\n\n```bash\nnpm link\n```\n\nYou can run the following command to see your linked packages:\n\n```bash\nnpm ls --link --global\n```\n\n## Building\n\nTo build your library:\n\n```bash\nnpm run package\n```\n\nTo create a production version of your showcase app:\n\n```bash\nnpm run build\n```\n\nYou can preview the production build with `npm run preview`.\n\n\u003e To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.\n\n## Publishing\n\nGo 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/)).\n\nTo publish your library to [npm](https://www.npmjs.com):\n\n```bash\nnpm publish --access public\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSaschaLucius%2Fsvelte-umami","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSaschaLucius%2Fsvelte-umami","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSaschaLucius%2Fsvelte-umami/lists"}