implement analytics for label help button & dialogs

Author: mrdadah

src/components/LabelHelpView/api-key-entry.js

@@ -7,6 +7,7 @@ import { styled } from "@material-ui/core/styles"
 import { useAppConfig } from "../AppConfig"
 import SaveIcon from "@material-ui/icons/Save"
 import CircularProgress from "@material-ui/core/CircularProgress"
+import usePosthog from "../../utils/use-posthog"
 
 const Title = styled("div")({
   fontSize: 18,
@@ -26,11 +27,13 @@ export default () => {
   const [verifying, setVerifying] = useState(false)
   const [textFieldValue, setTextFieldValue] = useState("")
   const [error, setError] = useState("")
+  const posthog = usePosthog()
+
   return (
     <Box paddingTop={8} textAlign="center">
       <Title>
         To use Label Help, enter your API key. You can{" "}
-        <a href="https://labelhelp.universaldatatool.com">
+        <a href="https://labelhelp.universaldatatool.com" onClick={() => posthog.capture('get_api_key_link_clicked')}>
           get an API key here
         </a>
         .
@@ -74,6 +77,7 @@ export default () => {
 
             setVerifying(false)
             setInConfig("labelhelp.apikey", textFieldValue)
+            posthog.capture('save_api_key_button_clicked')
           }}
         >
           {verifying ? (

src/components/LabelHelpView/label-help-dialog-content.js

@@ -18,6 +18,7 @@ import * as colors from "@material-ui/core/colors"
 import { useActiveDataset } from "../FileContext"
 import CircularProgress from "@material-ui/core/CircularProgress"
 import { setIn } from "seamless-immutable"
+import usePosthog from "../../utils/use-posthog"
 
 const Container = styled("div")({
   fontVariantNumeric: "tabular-nums",
@@ -57,6 +58,8 @@ export default () => {
   const [labelHelpInfo, setLabelHelpInfo] = useState(dataset.labelHelp || {})
   const collabUrl = labelHelpInfo.url || (dataset.labelHelp || {}).url
 
+  const posthog = usePosthog()
+
   useEffect(() => {
     if (myCredits === null || myCredits === undefined) {
       loadMyCredits(dataset)
@@ -173,7 +176,10 @@ export default () => {
             <Box>Credits: {usdFormatter.format(myCredits)}</Box>
             <Box flexGrow={1} />
             <Button
-              onClick={() => setInConfig("labelhelp.apikey", null)}
+              onClick={() => {
+                setInConfig("labelhelp.apikey", null)
+                posthog.capture('API_key_button_clicked')
+              }}
               variant="outlined"
             >
               API Key
@@ -183,6 +189,9 @@ export default () => {
               style={{ marginLeft: 12 }}
               variant="outlined"
               href="https://labelhelp.universaldatatool.com#addcredits"
+              onClick={() => {
+                posthog.capture('add_credits_button_clicked')
+              }}
             >
               Add Credits
             </Button>
@@ -216,6 +225,8 @@ export default () => {
                     url: response.custom_id,
                   })
                 )
+
+                posthog.capture('start_label_help_button_clicked')
               }}
               style={{ marginLeft: 12 }}
               variant="outlined"

src/components/LabelView/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useEffect, useState } from "react"
 import LabelErrorBoundary from "../LabelErrorBoundary"
 import UniversalDataViewer from "../UniversalDataViewer"
 import Stats from "../Stats"
@@ -46,6 +46,19 @@ export default ({
         .map((s) => s.annotation !== undefined && s.annotation !== null)
         .filter(Boolean).length / dataset.samples.length
   }
+
+  useEffect(() => {
+    if (labelHelpEnabled) {
+      posthog.capture('label_help_showed')
+    }
+  }, [labelHelpEnabled])
+
+  useEffect(() => {
+    if (currentTab === 'labelhelp') {
+      posthog.capture('label_help_clicked')
+    }
+  }, [currentTab])
+
   return singleSampleDataset ? (
     <LabelErrorBoundary>
       <UniversalDataViewer