Analytics improvements (tldraw#7041)

GTM Integration:
- New GTMAnalyticsService loads GTM script/iframe, tracks events via
dataLayer
- Consent banner tracking: `display_consent_banner` and
`select_consent_banner` events
- Public consent API: `getConsentState()` and `onConsentUpdate()` on
`window.tlanalytics`
- Structured event tracking: `trackCopyCode()` and
`trackFormSubmission()` methods
  - Wired up code copy tracking in docs site
  - Config: `TL_GTM_CONTAINER_ID` env var support

Dotcom Analytics:
- Added cross-domain tracking linker for tldraw.dev
- Push watermark click tracking to GTM
- Added watermark event to editor emit types

Things to do:
- [ ] Set NEXT_PUBLIC_GTM_CONTAINER_ID in Vercel
- [ ] Remove NEXT_PUBLIC_GA4_MEASUREMENT_ID variable in Vercel
- [ ] Make similar changes on the Framer side of things. Code change
below.

Add  this to head:
```typescript
<script>
    window.TL_GTM_CONTAINER_ID = 'GTM-PJDV58LL';
  </script>
  <script
      id="tldraw-analytics"
      type="text/javascript"
      async
      defer
      src="https://analytics.tldraw.com/tl-analytics.js"
  ></script>
  <script>
    // Send form submission events to GTM
    document.addEventListener("framer:formsubmit", async (event) => {
      if (window.tlanalytics?.trackFormSubmission) {
        const formData = event.detail.data || {};

        // Build payload with only fields that have values
        const payload = {
          enquiry_type: event.detail.trackingId || 'form_submission',
        };

        if (formData.email) {
          payload.user_email = formData.email;
          payload.user_email_sha256 = await sha256(formData.email.toLowerCase());
        }
        if (formData.first_name) {
          payload.user_first_name = formData.first_name;
        }
        if (formData.last_name) {
          payload.user_last_name = formData.last_name;
        }
        if (formData.linkedin_company_page) {
          payload.company_linkedin = formData.linkedin_company_page;
        }
        if (formData.hs_employee_range) {
          payload.company_size = formData.hs_employee_range;
        }
        if (formData.website) {
          payload.company_website = formData.website;
        }
        if (formData.country) {
          payload.user_country = formData.country;
        }

        // Only call if we have required fields
        if (payload.user_email) {
          window.tlanalytics.trackFormSubmission(payload);
        }
      }
    });

    // Track code copy events
    document.addEventListener('copy', (copyEvent) => {
      const isWithinCodeBlock = copyEvent.target?.closest('pre, code');
      if (isWithinCodeBlock) {
        const copiedText = window.getSelection()?.toString() || '';

        // Only track if we have actual text
        if (copiedText && window.tlanalytics?.trackCopyCode) {
          window.tlanalytics.trackCopyCode({
            page_category: 'framer',
            text_snippet: copiedText,
          });
        }
      }
    });

    // Simple SHA-256 hash function for email
    async function sha256(message) {
      const msgBuffer = new TextEncoder().encode(message);
      const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
      const hashArray = Array.from(new Uint8Array(hashBuffer));
      return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
    }
  </script>
``` 

Add this to body:
```typescript
  <noscript>
    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PJDV58LL"
      height="0" width="0" style="display:none;visibility:hidden"></iframe>
  </noscript>
```


### API changes
- Add click `click-watermark` emit type, so that you can listen to it
via the editor events.

### Change type

- [x] `improvement`





<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Integrates GTM with consent handling and new tracking APIs, wires
code-copy/form events, adds watermark click tracking end-to-end, and
updates allowed origins and docs embed.
> 
> - **Analytics Core**:
> - **GTM Integration**: New `GTMAnalyticsService` loads GTM, manages
consent via `dataLayer`, and tracks `page_view`/custom events.
> - **Consent**: Adds `getConsentState()`/`onConsentUpdate()` and tracks
consent banner display/selection with opt-in type.
> - **Structured Events**: Adds `trackCopyCode()` and
`trackFormSubmission()` and forwards to services.
> - **Service Wiring**: Includes `gtmService` alongside existing
services.
> - **Docs Site (`apps/docs`)**:
> - Sets `window.TL_GTM_CONTAINER_ID`; loads analytics from local in
dev; adds GTM `<noscript>` iframe.
>   - Wires code-copy to `tlanalytics.trackCopyCode`.
> - **Dotcom Analytics**:
>   - GA4 linker for cross-domain tracking with `tldraw.dev`.
>   - Tracks `click-watermark` in GA4.
> - **Editor SDK**:
> - Adds `click-watermark` event to `TLEventMap`/UI events; watermark
now emits it; `Tldraw` forwards to UI event system.
> - **Worker**:
>   - Allows CORS for `http://localhost:3001`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
853c2d3. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: MitjaBezensek

apps/analytics-worker/src/worker.ts

@@ -13,6 +13,7 @@
 function isAllowedOrigin(origin: string | null): string | undefined {
 	if (!origin) return undefined
 	if (origin === 'http://localhost:3000') return origin
+	if (origin === 'http://localhost:3001') return origin
 	if (origin === 'http://localhost:5420') return origin
 	if (origin === 'https://meet.google.com') return origin
 	if (origin === 'https://tldraw.dev') return origin

apps/analytics/src/analytics-services/analytics-service.ts

@@ -18,4 +18,33 @@ export class AnalyticsService {
 	trackEvent(name: string, data?: { [key: string]: any }): void {}
 	// Track a pageview.
 	trackPageview(): void {}
+	// Track when consent banner is displayed (called before consent is granted).
+	trackConsentBannerDisplayed?(data: { consent_opt_in_type: 'manual' | 'auto' }): void
+	// Track when user selects consent preferences (called before consent is granted).
+	trackConsentBannerSelected?(data: {
+		consent_analytics: 'granted' | 'denied'
+		consent_marketing: 'granted' | 'denied'
+		consent_opt_in_type: 'manual' | 'auto'
+	}): void
+	// Track when user copies a code snippet.
+	trackCopyCode?(data: {
+		page_category: string
+		text_snippet: string
+		user_email?: string
+		user_email_sha256?: string
+		user_first_name?: string
+		user_last_name?: string
+		user_phone_number?: string
+	}): void
+	// Track when user submits a form.
+	trackFormSubmission?(data: {
+		enquiry_type: string
+		company_size?: string
+		company_website?: string
+		user_email: string
+		user_email_sha256: string
+		user_first_name: string
+		user_last_name: string
+		user_phone_number?: string
+	}): void
 }

apps/analytics/src/analytics-services/gtm.ts

@@ -0,0 +1,210 @@
+import { GTM_SCRIPT_ID } from '../constants'
+import { AnalyticsService } from './analytics-service'
+
+// Extend Window with dataLayer (other Window properties declared in types.ts)
+declare global {
+	interface Window {
+		dataLayer?: any[]
+	}
+}
+
+// Helper to safely push to dataLayer (internal use only)
+function dataLayerPush(data: any) {
+	if (typeof window !== 'undefined' && window.dataLayer) {
+		window.dataLayer.push(data)
+	}
+}
+
+class GTMAnalyticsService extends AnalyticsService {
+	private gtmContainerId: string | undefined
+
+	override initialize() {
+		if (typeof window === 'undefined') return
+
+		this.gtmContainerId = window.TL_GTM_CONTAINER_ID ?? undefined
+
+		if (!this.gtmContainerId) return
+
+		// Set default consent state
+		window.dataLayer = window.dataLayer || []
+		dataLayerPush({
+			'gtm.start': new Date().getTime(),
+			event: 'gtm.js',
+		})
+
+		dataLayerPush({
+			event: 'consent_default',
+			consent: {
+				ad_storage: 'denied',
+				ad_user_data: 'denied',
+				ad_personalization: 'denied',
+				analytics_storage: 'denied',
+				wait_for_update: 500,
+			},
+		})
+
+		// Load the GTM script
+		const script = document.createElement('script')
+		script.async = true
+		script.id = GTM_SCRIPT_ID
+		script.src = `https://www.googletagmanager.com/gtm.js?id=${this.gtmContainerId}`
+		document.head.appendChild(script)
+	}
+
+	override dispose() {
+		const script = document.getElementById(GTM_SCRIPT_ID)
+		if (script) script.remove()
+	}
+
+	override enable() {
+		if (this.isEnabled) return
+		dataLayerPush({
+			event: 'consent_update',
+			consent: {
+				ad_user_data: 'granted',
+				ad_personalization: 'granted',
+				ad_storage: 'granted',
+				analytics_storage: 'granted',
+			},
+		})
+		this.isEnabled = true
+	}
+
+	override disable() {
+		if (!this.isEnabled) return
+		dataLayerPush({
+			event: 'consent_update',
+			consent: {
+				ad_user_data: 'denied',
+				ad_personalization: 'denied',
+				ad_storage: 'denied',
+				analytics_storage: 'denied',
+			},
+		})
+		this.isEnabled = false
+	}
+
+	override identify(userId: string, properties?: { [key: string]: any }) {
+		if (!this.isEnabled) return
+		dataLayerPush({
+			event: 'user_identify',
+			user_id: userId,
+			user_properties: properties,
+		})
+	}
+
+	override trackEvent(name: string, data?: { [key: string]: any }) {
+		if (!this.isEnabled) return
+		dataLayerPush({
+			event: name,
+			...data,
+		})
+	}
+
+	override trackPageview() {
+		if (!this.isEnabled) return
+		dataLayerPush({
+			event: 'page_view',
+		})
+	}
+
+	override trackConsentBannerDisplayed(data: { consent_opt_in_type: 'manual' | 'auto' }) {
+		dataLayerPush({
+			event: 'display_consent_banner',
+			id: crypto.randomUUID(),
+			data,
+		})
+	}
+
+	override trackConsentBannerSelected(data: {
+		consent_analytics: 'granted' | 'denied'
+		consent_marketing: 'granted' | 'denied'
+		consent_opt_in_type: 'manual' | 'auto'
+	}) {
+		dataLayerPush({
+			event: 'select_consent_banner',
+			id: crypto.randomUUID(),
+			data,
+		})
+	}
+
+	override trackCopyCode(data: {
+		page_category: string
+		text_snippet: string
+		user_email?: string
+		user_email_sha256?: string
+		user_first_name?: string
+		user_last_name?: string
+		user_phone_number?: string
+	}) {
+		if (!this.isEnabled) return
+		const payload: any = {
+			event: 'click_copy_code',
+			id: crypto.randomUUID(),
+			page: {
+				category: data.page_category.toLowerCase(),
+			},
+			data: {
+				text_snippet: data.text_snippet.substring(0, 100),
+			},
+			_clear: true,
+		}
+
+		// Only include user object if we have user data
+		if (
+			data.user_email ||
+			data.user_email_sha256 ||
+			data.user_first_name ||
+			data.user_last_name ||
+			data.user_phone_number
+		) {
+			payload.user = {}
+			if (data.user_email) payload.user.email = data.user_email.toLowerCase()
+			if (data.user_email_sha256) payload.user.email_sha256 = data.user_email_sha256.toLowerCase()
+			if (data.user_first_name) payload.user.first_name = data.user_first_name.toLowerCase()
+			if (data.user_last_name) payload.user.last_name = data.user_last_name.toLowerCase()
+			if (data.user_phone_number) payload.user.phone_number = data.user_phone_number
+		}
+
+		dataLayerPush(payload)
+	}
+
+	override trackFormSubmission(data: {
+		enquiry_type: string
+		company_size?: string
+		company_website?: string
+		user_email: string
+		user_email_sha256: string
+		user_first_name: string
+		user_last_name: string
+		user_phone_number?: string
+	}) {
+		if (!this.isEnabled) return
+		const payload: any = {
+			event: 'generate_lead',
+			id: crypto.randomUUID(),
+			page: {
+				category: 'enquiry',
+			},
+			data: {
+				enquiry_type: data.enquiry_type.toLowerCase(),
+			},
+			user: {
+				email: data.user_email.toLowerCase(),
+				email_sha256: data.user_email_sha256.toLowerCase(),
+				first_name: data.user_first_name.toLowerCase(),
+				last_name: data.user_last_name.toLowerCase(),
+			},
+			_clear: true,
+		}
+
+		// Add optional company data
+		if (data.company_size) payload.data.company_size = data.company_size.toLowerCase()
+		if (data.company_website) payload.data.company_website = data.company_website.toLowerCase()
+		if (data.user_phone_number) payload.user.phone_number = data.user_phone_number
+
+		dataLayerPush(payload)
+	}
+}
+
+export const gtmService = new GTMAnalyticsService()

apps/analytics/src/constants.ts

@@ -18,3 +18,6 @@ export const REO_SCRIPT_URL = `https://static.reo.dev/${REO_CLIENT_ID}/reo.js`
 export const POSTHOG_TOKEN = 'phc_i8oKgMzgV38sn3GfjswW9mevQ3gFlo7bJXekZFeDN6'
 export const POSTHOG_API_HOST = 'https://analytics.tldraw.com/i'
 export const POSTHOG_UI_HOST = 'https://eu.i.posthog.com'
+
+// Google Tag Manager configuration.
+export const GTM_SCRIPT_ID = 'gtm-script-loader'