`analytics` workspace in tldraw codebase.
In this article, we review analytics workspace in tldraw codebase. We will look at:
-
What is analytics workspace?
-
Different analytics tldraw supports.
I study patterns used in an open source project found on Github Trending. For this week, I reviewed Codebuff codebase and wrote this article.
Press enter or click to view image in full size
What is analytics workspace?
The @tldraw/analytics app provides a privacy-compliant analytics tracking system for tldraw applications. It creates a standalone JavaScript library that can be embedded into websites to handle cookie consent, user tracking, and privacy settings.
Purpose
This app builds a UMD (Universal Module Definition) library that provides:
-
Cookie consent banner with opt-in/opt-out functionality
-
Privacy settings dialog
-
Integration with multiple analytics providers (PostHog, Google Analytics 4, HubSpot, Reo)
-
GDPR-compliant tracking with user consent management
In tldraw/apps/analytics/CONTEXT.md, you will find more info about architecture, supported analytics providers.
Below is an usage example provided:
<script src="path/to/tl-analytics.js"></script>
<script>
// Optional: Set GA4 measurement ID
window.TL_GA4_MEASUREMENT_ID = 'G-XXXXXXXXXX'
// Track page view
window.tlanalytics.page()
// Identify user
window.tlanalytics.identify('user-id', { name: 'User Name' })
// Track custom event
window.tlanalytics.track('button_click', { button_name: 'signup' })
// Open privacy settings
window.tlanalytics.openPrivacySettings()
</script>
Different analytics tldraw supports.
You will find the following description in Analytics providers section in tldraw analytics context.
PostHog
Primary analytics provider
Hosted at https://analytics.tldraw.com/i
Memory-only persistence when consent is denied
Full localStorage+cookie persistence when opted in
Google Analytics 4
Configured via window.TL_GA4_MEASUREMENT_ID
Supports Google Ads integration via window.TL_GOOGLE_ADS_ID
Consent-aware configuration
Anonymized IP when consent is denied
HubSpot
Loaded conditionally with consent
EU-hosted (js-eu1.hs-scripts.com)
Account ID: 145620695
Reo Analytics
User session recording and analytics
Client ID: 47839e47a5ed202
Conditional loading based on consent
Also, if you take a closer look at tldraw/apps/analytics/src/index.ts, at L45, you will find the below window object set:
// Expose the global function to open privacy settings
window.tlanalytics = {
openPrivacySettings: () => {
privacyRoot.render(React.createElement(PrivacySettings))
},
page,
identify,
track,
gtag,
}
About me:
Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.
Email: ramu.narasinga@gmail.com
Want to learn from open-source? Solve challenges inspired by open-source projects.