Provide a separate tracker package for deep integration

[dmke]

I'm working on a Rails app (with Vue frontend, no SPA), and would like to integrate the tracker directly into our frontend application.

Using a separate script tag feels wrong (not only for the additional HTTP request, but also because it's just another hint for ad blockers to latch on)...

I would like to do something like this:

// entrypoints/main.ts

import { init, identify } from "@umami/tracker"
init({
  websiteId: import.meta.env.UMAMI_WEBSITE_ID,
  hostUrl:   import.meta.env.UMAMI_HOST,
  endpoint:  import.meta.env.UMAMI_COLLECT_API_ENDPOINT,
})

// in DOMContentLoaded handler:
identify({ user_id: getCurrentUserId() })

<!-- SomeComponent.vue -->
<script setup language="ts">
import { track } from "@umami/tracker"
</script>

<template>
  <button @click="track({ name: 'custom event' })">Click me</button>
</template>

Here, the init function takes all config options and some env vars (injected into my frontend build process) as constructor arguments, instead of reading them from currentScript (which does not work with JS modules, IIRC).

This is conceptually similar to the @umami/node functionality (but for the browser), and very much different to the @umami/api-client (which does not provide access to the event endpoint, AFAICT).

Maybe the imaginary @umami/tracker code could also be re-used in src/tracker/?

I'd be willing to prototype this, when there's interest in this.

---

Edit: A prototype can be found in #4111