`analytics` workspace in tldraw codebase.

#tldraw #opensource

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,
}