Add basic event actions to analytics (#2375)

Co-authored-by: dwelle <luzar.david@gmail.com>

src/components/Actions.tsx

@@ -16,6 +16,7 @@ import { capitalizeString, isTransparent, setCursorForShape } from "../utils";
 import Stack from "./Stack";
 import useIsMobile from "../is-mobile";
 import { getNonDeletedElements } from "../element";
+import { trackEvent, EVENT_SHAPE } from "../analytics";
 
 export const SelectedShapeActions = ({
   appState,
@@ -173,6 +174,7 @@ export const ShapesSwitcher = ({
           aria-keyshortcuts={shortcut}
           data-testid={value}
           onChange={() => {
+            trackEvent(EVENT_SHAPE, value, "toolbar");
             setAppState({
               elementType: value,
               multiElement: null,

src/components/App.tsx

@@ -181,6 +181,7 @@ import {
   isSavedToFirebase,
 } from "../data/firebase";
 import { getNewZoom } from "../scene/zoom";
+import { EVENT_SHAPE, trackEvent } from "../analytics";
 
 /**
  * @param func handler taking at most single parameter (event).
@@ -1270,12 +1271,15 @@ class App extends React.Component<ExcalidrawProps, AppState> {
   };
 
   toggleLock = () => {
-    this.setState((prevState) => ({
-      elementLocked: !prevState.elementLocked,
-      elementType: prevState.elementLocked
-        ? "selection"
-        : prevState.elementType,
-    }));
+    this.setState((prevState) => {
+      trackEvent(EVENT_SHAPE, "lock", !prevState.elementLocked ? "on" : "off");
+      return {
+        elementLocked: !prevState.elementLocked,
+        elementType: prevState.elementLocked
+          ? "selection"
+          : prevState.elementType,
+      };
+    });
   };
 
   toggleZenMode = () => {
@@ -1655,6 +1659,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     ) {
       const shape = findShapeByKey(event.key);
       if (shape) {
+        trackEvent(EVENT_SHAPE, shape, "shortcut");
         this.selectShapeTool(shape);
       } else if (event.key === KEYS.Q) {
         this.toggleLock();

src/components/BackgroundPickerAndDarkModeToggle.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { ActionManager } from "../actions/manager";
+import { EVENT_CHANGE, trackEvent } from "../analytics";
 import { AppState } from "../types";
 import { DarkModeToggle } from "./DarkModeToggle";
 
@@ -18,6 +19,8 @@ export const BackgroundPickerAndDarkModeToggle = ({
       <DarkModeToggle
         value={appState.appearance}
         onChange={(appearance) => {
+          // TODO: track the theme on the first load too
+          trackEvent(EVENT_CHANGE, "theme", appearance);
           setAppState({ appearance });
         }}
       />

src/components/GitHubCorner.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import oc from "open-color";
+import { EVENT_EXIT, trackEvent } from "../analytics";
 
 // https://github.com/tholman/github-corners
 export const GitHubCorner = React.memo(
@@ -16,6 +17,9 @@ export const GitHubCorner = React.memo(
         target="_blank"
         rel="noopener noreferrer"
         aria-label="GitHub repository"
+        onClick={() => {
+          trackEvent(EVENT_EXIT, "github");
+        }}
       >
         <path
           d="M0 0l115 115h15l12 27 108 108V0z"

src/components/LayerUI.tsx

@@ -45,6 +45,7 @@ import { muteFSAbortError } from "../utils";
 import { BackgroundPickerAndDarkModeToggle } from "./BackgroundPickerAndDarkModeToggle";
 import clsx from "clsx";
 import { Library } from "../data/library";
+import { EVENT_EXIT, trackEvent } from "../analytics";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -310,6 +311,9 @@ const LayerUI = ({
       href="https://blog.excalidraw.com/end-to-end-encryption/"
       target="_blank"
       rel="noopener noreferrer"
+      onClick={() => {
+        trackEvent(EVENT_EXIT, "e2ee shield");
+      }}
     >
       <span className="tooltip-text" dir="auto">
         {t("encrypted.tooltip")}

src/components/ShortcutsDialog.tsx

@@ -4,6 +4,7 @@ import { isDarwin } from "../keys";
 import { Dialog } from "./Dialog";
 import { getShortcutKey } from "../utils";
 import "./ShortcutsDialog.scss";
+import { EVENT_EXIT, trackEvent } from "../analytics";
 
 const Columns = (props: { children: React.ReactNode }) => (
   <div
@@ -91,6 +92,9 @@ const Footer = () => (
       href="https://blog.excalidraw.com"
       target="_blank"
       rel="noopener noreferrer"
+      onClick={() => {
+        trackEvent(EVENT_EXIT, "blog");
+      }}
     >
       {t("shortcutsDialog.blog")}
     </a>
@@ -98,6 +102,9 @@ const Footer = () => (
       href="https://howto.excalidraw.com"
       target="_blank"
       rel="noopener noreferrer"
+      onClick={() => {
+        trackEvent(EVENT_EXIT, "guides");
+      }}
     >
       {t("shortcutsDialog.howto")}
     </a>
@@ -105,6 +112,9 @@ const Footer = () => (
       href="https://github.com/excalidraw/excalidraw/issues"
       target="_blank"
       rel="noopener noreferrer"
+      onClick={() => {
+        trackEvent(EVENT_EXIT, "issues");
+      }}
     >
       {t("shortcutsDialog.github")}
     </a>