Add automatic page tracking.

Author: markrickert

apps/reactotron-app/src/renderer/App.tsx

@@ -15,8 +15,9 @@ import Overlay from "./pages/reactNative/Overlay"
 import Storybook from "./pages/reactNative/Storybook"
 import CustomCommands from "./pages/customCommands"
 import Help from "./pages/help"
+import { usePageTracking } from "./util/analyticsHelpers"
 
-const AppContainer = styled.div`
+const AppContainerComponent = styled.div`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -27,6 +28,10 @@ const AppContainer = styled.div`
   flex-direction: column;
   background-color: ${(props) => props.theme.background};
 `
+const AppContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  usePageTracking()
+  return <AppContainerComponent>{children}</AppContainerComponent>
+}
 
 const TopSection = styled.div`
   overflow: hidden;

apps/reactotron-app/src/renderer/KeybindHandler.tsx

@@ -95,34 +95,34 @@ function KeybindHandler({ children }) {
   const { openDispatchModal, openSubscriptionModal, clearCommands } = useContext(ReactotronContext)
   const { openSearch, toggleSearch } = useContext(TimelineContext)
   const { createSnapshot } = useContext(StateContext)
-  const { sendKeyboardShortcut } = useAnalytics()
+  const { sendKeyboardShortcutAnalyticsEvent } = useAnalytics()
 
   const handlers = {
     // Tab Navigation
     OpenHomeTab: () => {
       window.location.hash = "/"
 
-      sendKeyboardShortcut("OpenHomeTab")
+      sendKeyboardShortcutAnalyticsEvent("OpenHomeTab")
     },
     OpenTimelineTab: () => {
       window.location.hash = "/timeline"
-      sendKeyboardShortcut("OpenTimelineTab")
+      sendKeyboardShortcutAnalyticsEvent("OpenTimelineTab")
     },
     OpenStateTab: () => {
       window.location.hash = "/state/subscriptions"
-      sendKeyboardShortcut("OpenStateTab")
+      sendKeyboardShortcutAnalyticsEvent("OpenStateTab")
     },
     OpenReactNativeTab: () => {
       window.location.hash = "/native/overlay"
-      sendKeyboardShortcut("OpenReactNativeTab")
+      sendKeyboardShortcutAnalyticsEvent("OpenReactNativeTab")
     },
     OpenCustomCommandsTab: () => {
       window.location.hash = "/customCommands"
-      sendKeyboardShortcut("OpenCustomCommandsTab")
+      sendKeyboardShortcutAnalyticsEvent("OpenCustomCommandsTab")
     },
     OpenHelpTab: () => {
       window.location.hash = "/help"
-      sendKeyboardShortcut("OpenHelpTab")
+      sendKeyboardShortcutAnalyticsEvent("OpenHelpTab")
     },
 
     // Modals
@@ -142,7 +142,7 @@ function KeybindHandler({ children }) {
     // Miscellaneous
     ToggleSidebar: () => {
       toggleSideBar()
-      sendKeyboardShortcut("ToggleSidebar")
+      sendKeyboardShortcutAnalyticsEvent("ToggleSidebar")
     },
     ToggleSearch: () => {
       // If we're on the timeline page, toggle the search, otherwise switch to the timeline tab and open search
@@ -155,7 +155,7 @@ function KeybindHandler({ children }) {
     },
     ClearTimeline: () => {
       clearCommands()
-      sendKeyboardShortcut("ClearTimeline")
+      sendKeyboardShortcutAnalyticsEvent("ClearTimeline")
     },
   }
 

apps/reactotron-app/src/renderer/pages/customCommands/index.tsx

@@ -5,6 +5,7 @@ import styled from "styled-components"
 import { MdSearch } from "react-icons/md"
 import { FaMagic } from "react-icons/fa"
 import { produce } from "immer"
+import { useAnalytics } from "../../util/analyticsHelpers"
 
 const Container = styled.div`
   display: flex;
@@ -113,6 +114,7 @@ function CustomCommandItem({
   customCommand: CustomCommand
   sendCustomCommand: (command: any, args: any) => void
 }) {
+  const { sendCustomCommandAnalyticsEvent } = useAnalytics()
   const [state, dispatch] = useReducer(customCommandItemReducer, customCommand.args, (args) => {
     if (!args) return {}
 
@@ -157,6 +159,7 @@ function CustomCommandItem({
       <SendButton
         onClick={() => {
           sendCustomCommand(customCommand.command, state)
+          sendCustomCommandAnalyticsEvent(customCommand.command, customCommand.title || "")
         }}
       >
         Send Command

apps/reactotron-app/src/renderer/util/analyticsHelpers.ts

@@ -0,0 +1,96 @@
+import { useCallback, useEffect, useState } from "react"
+import ReactGA from "react-ga4"
+import packageJson from "../../../package.json"
+import { useLocation } from "react-router-dom"
+
+const GA4_KEY = "G-WZE3E5XCQ7"
+
+type UaEventOptions = {
+  action: string
+  category: string
+  label?: string
+  value?: number
+  nonInteraction?: boolean
+  transport?: "beacon" | "xhr" | "image"
+}
+const isDevelopment = process.env.NODE_ENV !== "production"
+
+export const useAnalytics = () => {
+  const [initialized, setInitialized] = useState(false)
+  // const [optedOut, setOptedOut] = useState(false) // Setting this to true will disable analytics
+  const [optedOut, setOptedOut] = useState(isDevelopment)
+
+  useEffect(() => {
+    const initialize = () => {
+      const testMode = process.env.NODE_ENV === "test" // we don't want to send analytics events during tests
+      ReactGA.initialize(GA4_KEY, {testMode: testMode || optedOut})
+      ReactGA.set({
+        app_version: packageJson.version,
+        app_platform: process.platform,
+        app_arch: process.arch,
+      })
+    }
+    
+    if (!initialized) {
+      initialize()
+      setInitialized(true)
+    }
+  }, [initialized, optedOut])
+
+  const sendAnalyticsEvent = useCallback(
+    (event: UaEventOptions) => {
+      console.log("Sending analytics event", event)
+      ReactGA.event(event)
+    },
+    []
+  )
+
+  const sendPageViewAnalyticsEvent = useCallback(
+    (page: string, title: string) => {
+      console.log("Sending page view analytics event", {page, title})
+      ReactGA.send({ hitType: "pageview", page, title })
+    },
+    []
+  )
+
+  const sendKeyboardShortcutAnalyticsEvent = useCallback(
+    (label: string) => {
+      sendAnalyticsEvent({
+        category: "navigation",
+        action: "keyboard_shortcut",
+        nonInteraction: false,
+        label,
+      })  
+    },  
+    [sendAnalyticsEvent]
+  )  
+
+  const sendCustomCommandAnalyticsEvent = useCallback(
+    (command: string, title: string) => {
+      sendAnalyticsEvent({
+        category: "custom_command",
+        action: command,
+        nonInteraction: false,
+        label: title,
+      })
+    },
+    [sendAnalyticsEvent]
+  )
+
+  return {
+    sendAnalyticsEvent,
+    sendPageViewAnalyticsEvent,
+    sendKeyboardShortcutAnalyticsEvent,
+    sendCustomCommandAnalyticsEvent,
+  }
+}
+
+// This hook is used to track page views within the app automatically using react-router-dom
+export const usePageTracking = () => {
+  const location = useLocation()
+  const { sendPageViewAnalyticsEvent } = useAnalytics()
+
+  useEffect(() => {
+    sendPageViewAnalyticsEvent(location.pathname, location.key)
+  }, [location, sendPageViewAnalyticsEvent])
+}