feat(reactotron-app): Add basic analytics to Reactotron app with `react-ga4` #1406

markrickert · 2024-01-18T00:13:40Z

This adds google analytics to the reactotron app for basic feature and usage metrics. It's implemented using react-ga4 but the codebase can easily be switched to another service is we want.

The first time the user opens the app after upgrading to this version, they'll be presented with this screen:

Clicking the red "NO" button changes their user setting to opt-out of anonymous analytics. A user that opens the app and clicks "NO" should have zero analytics calls send to google-analytics.

Clicking the green "YES" button saves the user setting and starts allowing tracking calls to be sent to google analytics.

We are tracking the following things:

Screen views (with a hook that just listens to the path of react-router)
Interface button click events
Keyboard shortcut usage
Custom command usage statistics including the title of the custom command that was run.

Users can opt in or out of this feature by going to Reactotron -> Settings (which opens the settings json file in their default editor.

Editing this file to have the analyticsOptOut be true or false and then restarting the app will turn this setting on and off.

Things that we need to do before this can move out of draft status:

Create a new google analytics property for Reactotron in our master InfiniteRed account and change the GA4_KEY variable.
Look for other things that could benefit from usage tracking
Brainstorm a way to track plugin usage (redux, mst, mmkv, etc)
Validate verbiage for the Opt-in/out screen.

Jpoliachik

Code looks good, nice work! 👍

I think its worth a UX discussion on the impact of showing that alert on startup.
I suppose some other dev tools do something similar - like this setting in Android Studio: (I don't remember if you get prompted this on first startup or not)

IMO the alert could also use a UI pass if Justin has some bandwidth

Jpoliachik · 2024-01-23T17:35:53Z

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

+// We use this instead of the default alert because we want to style it to match our app.
+// We inherit the styles from react-confirm-alert and override them as needed.
+// Unfortunately, we can't use styled-components here because react-confirm-alert doesn't support it.
+// This also means we have to hard-code the colors here instead of using our theme, which is not ideal.


just curious - how much is react-confirm-alert doing for us here?
wondering if its worth the dependency if its difficult to style. could be nice to have full control of the UI, but might not be worth the effort.

Yeah, when i put it in the app, i was thinking it would be useful as-is, but the more i played with it, the more customizations I wound up doing. I'll probably rip this out before i change this pr to no longer be a draft.

jonmajorc

This looks good! just left a suggestion 💯

jonmajorc · 2024-01-24T14:16:54Z

apps/reactotron-app/src/renderer/pages/reactNative/Overlay.tsx

+ sendAnalyticsEvent({
+ category: "overlay",
+ action: "OverlayDropImage",
+ label: "Success",
+ })


I noticed that each sendAnalyticsEvent has string values for category, action, and label. It may be worth using an enum for these constants. Then it's type-safe and easier to see what is available per key! Thoughts?

Thanks for the suggestion @jonmajorc! Yeah, i need to clean up the types for sending events so we know exactly what we're going to send to the analytics server.

morganick

Just a couple of comments. Appears to work as expected.

Low GAFO: I find myself parsing this statement incorrectly half the time:

[analytics] user has changed opt-out status false

The status could be unknown | opted-in | opted-out. Then the statement could be "user has changed status to opted-in"

morganick · 2024-01-24T15:49:34Z

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

+
+// This is the Google Analytics 4 key for Reactotron
+// TODO: Change this to the correct key for production.
+const GA4_KEY = "G-WZE3E5XCQ7"


Should this be an environment var?

I don't think google analytics keys are considered private or sensitive information

It was less about privacy and more about being able to use CI to build it for the production key and have a dev key locally.

morganick · 2024-01-24T15:52:04Z

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

+ const status = configStore.get("analyticsOptOut") as IOptOutStatus
+
+ if (status === "unknown") {
+ console.log(`[analytics] user has not opted in or out`)


Do we want to keep this logging in?

I think it's safe to leave in. It'll only ever console log once at the beginning of the app boot. It's useful for development to leave it in.

morganick · 2024-01-24T15:53:33Z

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

+ // We also disable analytics if the user has opted out.
+ useEffect(() => {
+ const initialize = () => {
+ const testMode = process.env.NODE_ENV === "test" // we don't want to send analytics events during tests


What about development? We probably don't care about our usage patterns while developing Reactotron.

Is there another environment besides prod where we would want it enabled?

Well, i did want it to log during development so i could see that it was working 😄

Good call to turn it off in DEV mode before we merge.

morganick · 2024-01-24T15:58:43Z

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

+ information will be collected.
+ </p>
+ <p>
+ You can change this setting at any time and by opting in, you can contribute to making


How do I opt back in or opt out again?

This verbiage isn't final yet, but basically you go to the Electron Menu and "Settings" - it opens a json file in your default editor and you change the json for analyticsOptOut to true. Safe the file and reboot reactotron. VIOLLA! no more logging.

morganick · 2024-01-24T16:00:55Z

apps/reactotron-app/src/renderer/images/index.ts

@@ -1,3 +1,4 @@
 export const reactotronLogo: string = require("./Reactotron-128.png").default
+export const reactotronAnalytics: string = require("./Reactotron-analytics.png").default


Let's throw this over to Justin and see what he'd like graphic wise.

morganick · 2024-01-24T16:02:22Z

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

+ useEffect(() => {
+ const timer = setTimeout(() => {
+ initializeAnalytics()
+ }, 250)


What are we waiting for here?

While developing, I found that there was the possibility of this component rendering a couple times. This delay with the clearTimeout is meant to only initialize the analytics once the electron renderer process has completely opened the app and react has stopped reacting. Not sure if there's a better way to handle this other than some memoizing

markrickert · 2024-01-24T16:22:02Z

I also found this discussion from a VERY long time ago #723 where @jamonholmgren had already mocked up a screen and verbiage.

…abled.

morganick · 2024-04-12T15:19:18Z

@markrickert I rebased this on top of master. One thing I noticed when I was working with it was that setting the analyticsOptOut: "unknown" causes the application to break. It appears that's the default value and what should trigger the dialog to appear. Instead I get errors in console and a blank screen. I tested this both before and after rebasing master into this branch.

markrickert changed the title ~~Add basic analytics to Reactotron app with react-ga4~~ feat(reactotron-app): Add basic analytics to Reactotron app with react-ga4 Jan 18, 2024

markrickert force-pushed the mrickert/feat/analytics branch from 385def4 to 7528858 Compare January 18, 2024 00:21

Jpoliachik reviewed Jan 23, 2024

View reviewed changes

markrickert mentioned this pull request Jan 24, 2024

Analytics #723

Open

jonmajorc reviewed Jan 24, 2024

View reviewed changes

morganick reviewed Jan 24, 2024

View reviewed changes

markrickert force-pushed the mrickert/feat/analytics branch from 63aa741 to b7106f1 Compare January 24, 2024 20:33

markrickert added 10 commits April 12, 2024 10:52

Add react-ga4 for analytics tracking.

8d6e249

Add automatic page tracking.

327879e

Add a lot of analytics events for the app.

0ca34ea

Implement a custom alert that asks the user if they want analytics en…

1a5002f

…abled.

Allow the opt out status be a string or number.

03eda42

Add analytics event to docs link

8bb9dc5

Fix the types on the electron-store configStore.

587a5ff

Adds better types for analytics categories and actions

cefdb24

Remove react-confirm-alert and use our own UI

6fa3ad6

Send an opt-out event when the user opt-sout. Then no more logs.

1ce3ae7

morganick force-pushed the mrickert/feat/analytics branch from b7106f1 to 1ce3ae7 Compare April 12, 2024 15:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(reactotron-app): Add basic analytics to Reactotron app with `react-ga4` #1406

feat(reactotron-app): Add basic analytics to Reactotron app with `react-ga4` #1406

markrickert commented Jan 18, 2024 •

edited

Jpoliachik left a comment

Jpoliachik Jan 23, 2024

markrickert Jan 24, 2024

jonmajorc left a comment

jonmajorc Jan 24, 2024

markrickert Jan 24, 2024

morganick left a comment

morganick Jan 24, 2024

markrickert Jan 24, 2024

morganick Apr 12, 2024

morganick Jan 24, 2024

markrickert Jan 24, 2024

morganick Jan 24, 2024

markrickert Jan 24, 2024

morganick Jan 24, 2024

markrickert Jan 24, 2024

morganick Jan 24, 2024

morganick Jan 24, 2024

markrickert Jan 24, 2024

markrickert commented Jan 24, 2024

morganick commented Apr 12, 2024

		@@ -1,3 +1,4 @@
		export const reactotronLogo: string = require("./Reactotron-128.png").default
		export const reactotronAnalytics: string = require("./Reactotron-analytics.png").default

feat(reactotron-app): Add basic analytics to Reactotron app with react-ga4 #1406

Are you sure you want to change the base?

feat(reactotron-app): Add basic analytics to Reactotron app with react-ga4 #1406

Conversation

markrickert commented Jan 18, 2024 • edited

Jpoliachik left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jonmajorc left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

morganick left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

markrickert commented Jan 24, 2024

morganick commented Apr 12, 2024

feat(reactotron-app): Add basic analytics to Reactotron app with `react-ga4` #1406

feat(reactotron-app): Add basic analytics to Reactotron app with `react-ga4` #1406

markrickert commented Jan 18, 2024 •

edited