Skip to content

feat(frontend): set up Umami for events data collection#651

Open
DarianM wants to merge 22 commits intomainfrom
analytics
Open

feat(frontend): set up Umami for events data collection#651
DarianM wants to merge 22 commits intomainfrom
analytics

Conversation

@DarianM
Copy link
Copy Markdown
Member

@DarianM DarianM commented Apr 2, 2026

Summary

Closes #624

  • Adds Umami as a self-hosted analytics solution via a script tag in root.tsx, injected only when UMAMI_HOST and UMAMI_WEBSITE_ID are set
    • Local dev - set vars -> script loads, data goes to the local docker
    • Prod - set both vars in the worker, data does to production Umami
    • Any env without the vars set - script tag isn't rendered at all, zero analytics (i.e. no data pollution in staging)
  • Adds a local dev Umami instance via localenv/umami/docker-compose.yml

Event tracked as setup

Event Route
wallet_connected /banner, /widget, /offerwall
click_card_tool link

Notes

  • Umami automatically tracks page views for every route after the script tag loads

@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 2, 2026

Deployment results

Worker Alias URL Outcome
API - b6102040 success
CDN - 8338d329 success
App - ece81eea success

Logs #24079038811

Copy link
Copy Markdown
Collaborator

@kjmitchelljr kjmitchelljr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, agree with the feedback Sid gave, but see those changes have already been added 👍🏿

Comment on lines +35 to +41
{UMAMI_HOST && UMAMI_WEBSITE_ID && (
<script
defer
src={`${UMAMI_HOST}/script.js`}
data-website-id={UMAMI_WEBSITE_ID}
/>
)}
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: with this script injection here, do you think we should do any checks to make sure the URLs aren't malformed?

const walletAddressInfo = await getWalletAddress(walletAddressUrl)
walletActions.setWalletAddressId(walletAddressInfo.id)
await connect()
trackEvent('wallet_connected')
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: could be a later add, but thinking keeping the events in a separate file with a const map of event names as more events get added

<script
defer
src={`${UMAMI_HOST}/script.js`}
data-website-id={UMAMI_WEBSITE_ID}
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we add data-domains attribute too, so in production, we only track when on right domain (and not on PR previews/staging)?

Copy link
Copy Markdown
Member Author

@DarianM DarianM Apr 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed. web mon sets data-domains
Any env without the vars set - script tag isn't rendered at all, zero analytics (i.e. no data pollution in staging).
I think we're safe in our case. set vars in local dev and prod only

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When we set up these vars in GitHub (CI), they'll end up setting for both staging/previews and production.

Copy link
Copy Markdown
Member Author

@DarianM DarianM Apr 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

right, then we need to specify data-domain to localhost for dev and webmonetization.org prod. likely through another variable

package.json Outdated
Comment on lines +20 to +21
"analytics:start": "pnpm --filter localenv-analytics start",
"analytics:stop": "pnpm --filter localenv-analytics stop"
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These can be replaced with pnpm -C localenv/analytics start command. If you believe that additional scripts like these are more ergonomic, feel free to keep them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Infrastructure Integration

3 participants