Analytics

SelfKit use Umami to manage analytics.

Umami is an open-source, privacy-focused web analytics tool and a great alternative to Google Analytics.

Why Umami ?

Unlike other solutions, it does not require a cookie banner, as Umami neither collects nor stores personal data. It is fully compliant with GDPR and PECR regulations.

Designed to be easy to set up, Umami is also more lightweight than other options, such as Plausible, making it an excellent choice for self-hosting.

Prerequisites

  • An Umami instance (We recommand to follow our Coolify tutorial to self-host Umami).
  • An Umami account, on your self-hoste Umami instance the default one is:
    • Username: admin
    • Password: umami
  • Have your Website added in Umami ( documentation )

How to track event ?

  1. Get your tracker script ( documentation )
  2. Place the script in your app.html or in the root +layout.svelte :
    app.html
    +
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <link rel="icon" href="%sveltekit.assets%/selftkit.svg" />
            <meta name="viewport" content="width=device-width" />
            <script async src="http://localhost:5173/script.js" data-website-id="YOUR_WEBSITE_ID"></script> 
            %sveltekit.head%
        </head>
        <body data-sveltekit-preload-data="hover">
            <div style="display: contents">%sveltekit.body%</div>
        </body>
    </html>
    svelte
    Or
    +layout.svelte
    +
    +
    +
    <!-- ... -->
    <svelte:head> 
    <script async src="http://localhost:5173/script.js" data-website-id="YOUR_WEBSITE_ID"></script> 
    </svelte:head> 
    <!-- ... -->
    svelte
NOTE

In production the src should point to an https domain. If you use coolify, assign Umami to a custom domain or sub domain before adding the script.

  1. Add data property to track every events you want, data-umami-event is required. But you can also pass other data with the data-umami-event-[name] property
    +
    +
    +
    +
    <button
        id="Create project"
        data-umami-event="Add project"  
        data-umami-event-projectname="Project 1" 
        data-umami-event-date="01/11/2024" 
        data-umami-event-otherproperty="Something" 
    >
        Create
    </button>
    svelte

More informations about event tracking in the Official Umami Docs

Event already tracked

By default SelfKit already track those events :

  1. Login button

    Triggered when an user login (With email/password, provider or passkey)

    PropertyValue
    TypeStandard Google Passkey
  2. Signup button

    Triggered when a new user Sign up (with email/password or provider)

    PropertyValue
    Emailuser.email
    TypeStandard Google
  3. Purchase bubtton

    Triggered when an user click on the Purchase button of a product (that does not mean that user buy the product).

    PropertyValue
    Productproduct.name
    Periodvariant.billingPeriod
    Currencyvariant.currency

Links

Umami Docs