Directus Umami Analytics Extension

A small reusable Directus bundle for self-hosted Umami:

• umami-analytics endpoint: server-side proxy to Umami, so your Umami credentials are never exposed in the browser.
• umami-analytics-panel panel: native Directus Insights panel showing visitors, pageviews, visits, bounce rate, top pages, referrers, and events.

This is intended for your setup:

Nuxt websites -> analytics.koendhoore.be Umami -> Directus Insights panel

1. Required Directus environment variables

Add these to the Directus instance that should show analytics.

Recommended first version, one website per Directus instance:

UMAMI_URL=https://analytics.koendhoore.be
UMAMI_WEBSITE_ID=7a68c662-b142-45a8-81e1-a8be0c6ddf84
UMAMI_USERNAME=directus-analytics
UMAMI_PASSWORD=your-umami-password

Alternative, if you later find/create an Umami API token:

UMAMI_URL=https://analytics.koendhoore.be
UMAMI_WEBSITE_ID=7a68c662-b142-45a8-81e1-a8be0c6ddf84
UMAMI_TOKEN=your-token

Do not put these values in the frontend/Nuxt app except the public tracking script and website id.

2. Create a read-only Umami user

In Umami, create a dedicated user if available, for example:

directus-analytics

Give it access only to the website(s) needed for that client/project.

For your personal Directus, it can use your own Umami user at first, but a dedicated user is safer.

3. Install in Directus

From this folder:

npm install
npm run build

Then copy the built extension package into Directus extensions. The exact path depends on your deployment, but commonly:

/directus/extensions/directus-extension-umami-analytics

Restart Directus.

4. Test the endpoint

Open this while logged into Directus:

https://your-directus-domain.com/umami-analytics/health

Expected:

{"ok":true,"service":"umami-analytics"}

Then test:

https://your-directus-domain.com/umami-analytics/summary?days=30

Expected: JSON with stats, pages, referrers, and events.

5. Add the Directus panel

In Directus:

Insights -> Create/Open Dashboard -> Add Panel -> Umami Analytics

Panel settings:

• Leave Umami Website ID empty if this Directus instance has UMAMI_WEBSITE_ID in env.
• Or paste a specific website ID for this panel.
• Choose 7, 30, or 90 days.

6. Multi-client recommendation

For separate client Directus instances, install the same extension everywhere.

Client A Directus:

UMAMI_URL=https://analytics.koendhoore.be
UMAMI_WEBSITE_ID=client-a-website-id
UMAMI_USERNAME=directus-analytics-client-a
UMAMI_PASSWORD=...

Client B Directus:

UMAMI_URL=https://analytics.koendhoore.be
UMAMI_WEBSITE_ID=client-b-website-id
UMAMI_USERNAME=directus-analytics-client-b
UMAMI_PASSWORD=...

Clients do not need direct Umami login. They only see their Directus dashboard.

Notes

This first version uses Umami's private API paths:

• /api/auth/login
• /api/websites/:id/stats
• /api/websites/:id/metrics

If Umami changes these endpoints in a future release, only the Directus endpoint file needs updating.