Add events to connections

apps/www/pages/r/[id].tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import type { GetServerSideProps } from 'next'
 import dynamic from 'next/dynamic'
+import * as gtag from 'utils/gtag'
 
 const IFrameWarning = dynamic(() => import('components/IFrameWarning'), {
   ssr: false,
@@ -16,9 +17,21 @@ interface RoomProps {
 
 export default function Room({ id }: RoomProps) {
   if (typeof window !== 'undefined' && window.self !== window.top) {
+    gtag.event({
+      action: 'connect_to_room_in_iframe',
+      category: 'v1',
+      label: id,
+      value: 0,
+    })
     return <IFrameWarning url={`https://tldraw.com/r/${id}`} />
   }
 
+  gtag.event({
+    action: process.env.NODE_ENV === 'production' ? 'connect_to_room' : 'connect_to_room_dev',
+    category: 'v1',
+    label: id,
+    value: 0,
+  })
   return <MultiplayerEditor roomId={id} />
 }
 

apps/www/pages/v/[id].tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import type { GetServerSideProps } from 'next'
 import dynamic from 'next/dynamic'
+import * as gtag from 'utils/gtag'
 import { Utils } from '@tldraw/core'
 
 const IFrameWarning = dynamic(() => import('components/IFrameWarning'), {
@@ -17,9 +18,26 @@ interface RoomProps {
 
 export default function Room({ id }: RoomProps) {
   if (typeof window !== 'undefined' && window.self !== window.top) {
+    gtag.event({
+      action: 'connect_to_readonly_room_in_iframe',
+      category: 'v1',
+      label: id,
+      value: 0,
+    })
+
     return <IFrameWarning url={`https://tldraw.com/v/${id}`} />
   }
 
+  gtag.event({
+    action:
+      process.env.NODE_ENV === 'production'
+        ? 'connect_to_readonly_room'
+        : 'connect_to_readonly_room_dev',
+    category: 'v1',
+    label: id,
+    value: 0,
+  })
+
   return <ReadOnlyMultiplayerEditor roomId={id} />
 }