`analytics` workspace in tldraw codebase.

In this article, we review analytics workspace in tldraw codebase. We will look at:

1. What is analytics workspace?

2. 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.

References:

1. https://github.com/tldraw/tldraw/blob/main/apps/analytics/CONTEXT.md

2. https://github.com/tldraw/tldraw/tree/main/apps/analytics