gtag: add ads conversion tracking (tldraw#6460)

### Change type

- [ ] `bugfix`
- [ ] `improvement`
- [ ] `feature`
- [ ] `api`
- [x] `other`

Author: mimecuvalo

apps/analytics/src/analytics.tsx

@@ -76,6 +76,12 @@ export default function Analytics() {
 						anonymize_ip: true,
 					},
 				})
+
+				// Add Google Ads configuration if present
+				if (window.TL_GOOGLE_ADS_ID) {
+					ReactGA.gtag('config', window.TL_GOOGLE_ADS_ID)
+				}
+
 				ReactGA.send('pageview')
 			}
 
@@ -192,6 +198,12 @@ export function track(name: string, data?: { [key: string]: any }) {
 	ReactGA.event(name, data)
 }
 
+export function gtag(...args: any[]) {
+	if (storedHasConsent !== 'opted-in') return
+	// @ts-ignore - ReactGA.gtag accepts variable arguments
+	ReactGA.gtag(...args)
+}
+
 export function PrivacySettings() {
 	const hasConsent: CookieConsent =
 		Cookies.get('allowTracking') === 'true' ? 'opted-in' : 'opted-out'

apps/analytics/src/index.ts

@@ -1,6 +1,6 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import Analytics, { identify, page, PrivacySettings, track } from './analytics'
+import Analytics, { gtag, identify, page, PrivacySettings, track } from './analytics'
 import styles from './styles.css?inline'
 
 // Inject styles
@@ -25,8 +25,10 @@ declare global {
 			page(): void
 			identify(userId: string, properties?: { [key: string]: any }): void
 			track(name: string, data?: { [key: string]: any }): void
+			gtag(...args: any[]): void
 		}
 		TL_GA4_MEASUREMENT_ID: string | undefined
+		TL_GOOGLE_ADS_ID?: string
 		Reo: any
 		posthog: any
 	}
@@ -47,4 +49,5 @@ window.tlanalytics = {
 	page,
 	identify,
 	track,
+	gtag,
 }

apps/docs/app/analytics.tsx

@@ -6,6 +6,7 @@ import { useEffect } from 'react'
 export default function Analytics() {
 	useEffect(() => {
 		window.TL_GA4_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA4_MEASUREMENT_ID
+		window.TL_GOOGLE_ADS_ID = process.env.NEXT_PUBLIC_GOOGLE_ADS_ID
 	}, [])
 
 	useEffect(() => {
@@ -15,6 +16,15 @@ export default function Analytics() {
 				const copiedText = window.getSelection()?.toString() || ''
 				const isInstall = copiedText.trim() === 'npm install tldraw'
 				track('docs.copy.code-block', { isInstall })
+
+				// Track Google Ads conversion for code block copies
+				if (window.tlanalytics?.gtag) {
+					window.tlanalytics.gtag('event', 'conversion', {
+						send_to: 'AW-17268182782/qIuDCMnhl_EaEP6djqpA',
+						value: 1.0,
+						currency: 'USD',
+					})
+				}
 			}
 		}
 		document.addEventListener('copy', handleCopy)
@@ -42,8 +52,10 @@ declare global {
 		tlanalytics: {
 			openPrivacySettings(): void
 			track(name: string, data?: { [key: string]: any }): void
+			gtag(...args: any[]): void
 		}
 		TL_GA4_MEASUREMENT_ID: string | undefined
+		TL_GOOGLE_ADS_ID?: string
 		posthog: any
 	}
 }