chore: Remove tracking (#2722)

* chore: Remove tracking

* process

* rename

* remove

* prod

* Update public/index.html

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

* Update public/index.html

* eol

* more

* stats

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

src/components/Actions.tsx

@@ -1,23 +1,22 @@
 import React from "react";
-import { AppState, Zoom } from "../types";
-import { ExcalidrawElement } from "../element/types";
 import { ActionManager } from "../actions/manager";
+import { getNonDeletedElements } from "../element";
+import { ExcalidrawElement } from "../element/types";
+import { t } from "../i18n";
+import useIsMobile from "../is-mobile";
 import {
-  hasBackground,
-  hasStroke,
   canChangeSharpness,
-  hasText,
   canHaveArrowheads,
   getTargetElements,
+  hasBackground,
+  hasStroke,
+  hasText,
 } from "../scene";
-import { t } from "../i18n";
 import { SHAPES } from "../shapes";
-import { ToolButton } from "./ToolButton";
+import { AppState, Zoom } from "../types";
 import { capitalizeString, isTransparent, setCursorForShape } from "../utils";
 import Stack from "./Stack";
-import useIsMobile from "../is-mobile";
-import { getNonDeletedElements } from "../element";
-import { trackEvent, EVENT_SHAPE, EVENT_DIALOG } from "../analytics";
+import { ToolButton } from "./ToolButton";
 
 export const SelectedShapeActions = ({
   appState,
@@ -181,7 +180,6 @@ export const ShapesSwitcher = ({
           aria-keyshortcuts={shortcut}
           data-testid={value}
           onChange={() => {
-            trackEvent(EVENT_SHAPE, value, "toolbar");
             setAppState({
               elementType: value,
               multiElement: null,
@@ -203,9 +201,6 @@ export const ShapesSwitcher = ({
       title={`${capitalizeString(t("toolBar.library"))} — 9`}
       aria-label={capitalizeString(t("toolBar.library"))}
       onClick={() => {
-        if (!isLibraryOpen) {
-          trackEvent(EVENT_DIALOG, "library");
-        }
         setAppState({ isLibraryOpen: !isLibraryOpen });
       }}
     />

src/components/App.tsx

@@ -8,12 +8,7 @@ import { createRedoAction, createUndoAction } from "../actions/actionHistory";
 import { ActionManager } from "../actions/manager";
 import { actions } from "../actions/register";
 import { ActionResult } from "../actions/types";
-import {
-  EVENT_DIALOG,
-  EVENT_LIBRARY,
-  EVENT_SHAPE,
-  trackEvent,
-} from "../analytics";
+import { trackEvent } from "../analytics";
 import { getDefaultAppState } from "../appState";
 import {
   copyToClipboard,
@@ -111,7 +106,7 @@ import {
   selectGroupsForSelectedElements,
 } from "../groups";
 import { createHistory, SceneHistory } from "../history";
-import { t, getLanguage, setLanguage, languages, defaultLang } from "../i18n";
+import { defaultLang, getLanguage, languages, setLanguage, t } from "../i18n";
 import {
   CODES,
   getResizeCenterPointKey,
@@ -504,7 +499,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         )
       ) {
         await Library.importLibrary(blob);
-        trackEvent(EVENT_LIBRARY, "import");
         this.setState({
           isLibraryOpen: true,
         });
@@ -1134,7 +1128,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
 
   toggleLock = () => {
     this.setState((prevState) => {
-      trackEvent(EVENT_SHAPE, "lock", !prevState.elementLocked ? "on" : "off");
       return {
         elementLocked: !prevState.elementLocked,
         elementType: prevState.elementLocked
@@ -1158,7 +1151,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
 
   toggleStats = () => {
     if (!this.state.showStats) {
-      trackEvent(EVENT_DIALOG, "stats");
+      trackEvent("dialog", "stats");
     }
     this.setState({
       showStats: !this.state.showStats,
@@ -1270,9 +1263,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     }
 
     if (event.code === CODES.NINE) {
-      if (!this.state.isLibraryOpen) {
-        trackEvent(EVENT_DIALOG, "library");
-      }
       this.setState({ isLibraryOpen: !this.state.isLibraryOpen });
     }
 
@@ -1357,7 +1347,6 @@ 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();
@@ -1741,7 +1730,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     resetCursor();
 
     if (!event[KEYS.CTRL_OR_CMD]) {
-      trackEvent(EVENT_SHAPE, "text", "double-click");
       this.startTextEditing({
         sceneX,
         sceneY,

src/components/BackgroundPickerAndDarkModeToggle.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { ActionManager } from "../actions/manager";
-import { EVENT_CHANGE, trackEvent } from "../analytics";
 import { AppState } from "../types";
 import { DarkModeToggle } from "./DarkModeToggle";
 
@@ -19,8 +18,6 @@ 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/CollabButton.tsx

@@ -6,7 +6,6 @@ import useIsMobile from "../is-mobile";
 import { users } from "./icons";
 
 import "./CollabButton.scss";
-import { EVENT_DIALOG, trackEvent } from "../analytics";
 
 const CollabButton = ({
   isCollaborating,
@@ -23,10 +22,7 @@ const CollabButton = ({
         className={clsx("CollabButton", {
           "is-collaborating": isCollaborating,
         })}
-        onClick={() => {
-          trackEvent(EVENT_DIALOG, "collaboration");
-          onClick();
-        }}
+        onClick={onClick}
         icon={users}
         type="button"
         title={t("buttons.roomDialog")}

src/components/ExportDialog.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { render, unmountComponentAtNode } from "react-dom";
 import { ActionsManagerInterface } from "../actions/types";
-import { EVENT_DIALOG, trackEvent } from "../analytics";
 import { probablySupportsClipboardBlob } from "../clipboard";
 import { canvasToBlob } from "../data/blob";
 import { NonDeletedExcalidrawElement } from "../element/types";
@@ -251,7 +250,6 @@ export const ExportDialog = ({
     <>
       <ToolButton
         onClick={() => {
-          trackEvent(EVENT_DIALOG, "export");
           setModalIsShown(true);
         }}
         icon={exportFile}

src/components/GitHubCorner.tsx

@@ -1,6 +1,5 @@
-import React from "react";
 import oc from "open-color";
-import { EVENT_EXIT, trackEvent } from "../analytics";
+import React from "react";
 
 // https://github.com/tholman/github-corners
 export const GitHubCorner = React.memo(
@@ -17,9 +16,6 @@ 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

@@ -1,56 +1,46 @@
+import clsx from "clsx";
 import React, {
+  RefObject,
+  useCallback,
+  useEffect,
   useRef,
   useState,
-  RefObject,
-  useEffect,
-  useCallback,
 } from "react";
-import { showSelectedShapeActions } from "../element";
-import { calculateScrollCenter, getSelectedElements } from "../scene";
-import { exportCanvas } from "../data";
-
-import { AppState, LibraryItems, LibraryItem } from "../types";
-import { NonDeletedExcalidrawElement } from "../element/types";
-
 import { ActionManager } from "../actions/manager";
-import { Island } from "./Island";
-import Stack from "./Stack";
-import { FixedSideContainer } from "./FixedSideContainer";
-import { UserList } from "./UserList";
-import { LockIcon } from "./LockIcon";
-import { ExportDialog, ExportCB } from "./ExportDialog";
+import { CLASSES } from "../constants";
+import { exportCanvas } from "../data";
+import { importLibraryFromJSON, saveLibraryAsJSON } from "../data/json";
+import { Library } from "../data/library";
+import { showSelectedShapeActions } from "../element";
+import { NonDeletedExcalidrawElement } from "../element/types";
 import { Language, t } from "../i18n";
-import { HintViewer } from "./HintViewer";
 import useIsMobile from "../is-mobile";
-
+import { calculateScrollCenter, getSelectedElements } from "../scene";
 import { ExportType } from "../scene/types";
-import { MobileMenu } from "./MobileMenu";
-import { ZoomActions, SelectedShapeActions, ShapesSwitcher } from "./Actions";
-import { Section } from "./Section";
+import { AppState, LibraryItem, LibraryItems } from "../types";
+import { muteFSAbortError } from "../utils";
+import { SelectedShapeActions, ShapesSwitcher, ZoomActions } from "./Actions";
+import { BackgroundPickerAndDarkModeToggle } from "./BackgroundPickerAndDarkModeToggle";
 import CollabButton from "./CollabButton";
 import { ErrorDialog } from "./ErrorDialog";
-import { ShortcutsDialog } from "./ShortcutsDialog";
-import { LoadingMessage } from "./LoadingMessage";
-import { CLASSES } from "../constants";
-import { shield, exportFile, load } from "./icons";
+import { ExportCB, ExportDialog } from "./ExportDialog";
+import { FixedSideContainer } from "./FixedSideContainer";
 import { GitHubCorner } from "./GitHubCorner";
-import { Tooltip } from "./Tooltip";
-
+import { HintViewer } from "./HintViewer";
+import { exportFile, load, shield } from "./icons";
+import { Island } from "./Island";
 import "./LayerUI.scss";
 import { LibraryUnit } from "./LibraryUnit";
-import { ToolButton } from "./ToolButton";
-import { saveLibraryAsJSON, importLibraryFromJSON } from "../data/json";
-import { muteFSAbortError } from "../utils";
-import { BackgroundPickerAndDarkModeToggle } from "./BackgroundPickerAndDarkModeToggle";
-import clsx from "clsx";
-import { Library } from "../data/library";
-import {
-  EVENT_ACTION,
-  EVENT_EXIT,
-  EVENT_LIBRARY,
-  trackEvent,
-} from "../analytics";
+import { LoadingMessage } from "./LoadingMessage";
+import { LockIcon } from "./LockIcon";
+import { MobileMenu } from "./MobileMenu";
 import { PasteChartDialog } from "./PasteChartDialog";
+import { Section } from "./Section";
+import { ShortcutsDialog } from "./ShortcutsDialog";
+import Stack from "./Stack";
+import { ToolButton } from "./ToolButton";
+import { Tooltip } from "./Tooltip";
+import { UserList } from "./UserList";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -159,13 +149,7 @@ const LibraryMenuItems = ({
         }}
       />
 
-      <a
-        href="https://libraries.excalidraw.com"
-        target="_excalidraw_libraries"
-        onClick={() => {
-          trackEvent(EVENT_EXIT, "libraries");
-        }}
-      >
+      <a href="https://libraries.excalidraw.com" target="_excalidraw_libraries">
         {t("labels.libraries")}
       </a>
     </div>,
@@ -267,7 +251,6 @@ const LibraryMenu = ({
     const items = await Library.loadLibrary();
     const nextItems = items.filter((_, index) => index !== indexToRemove);
     Library.saveLibrary(nextItems);
-    trackEvent(EVENT_LIBRARY, "remove");
     setLibraryItems(nextItems);
   }, []);
 
@@ -276,7 +259,6 @@ const LibraryMenu = ({
       const items = await Library.loadLibrary();
       const nextItems = [...items, elements];
       onAddToLibrary();
-      trackEvent(EVENT_LIBRARY, "add");
       Library.saveLibrary(nextItems);
       setLibraryItems(nextItems);
     },
@@ -328,9 +310,6 @@ const LayerUI = ({
       href="https://blog.excalidraw.com/end-to-end-encryption/"
       target="_blank"
       rel="noopener noreferrer"
-      onClick={() => {
-        trackEvent(EVENT_EXIT, "e2ee shield");
-      }}
     >
       <Tooltip label={t("encrypted.tooltip")} position="above" long={true}>
         {shield}
@@ -567,7 +546,6 @@ const LayerUI = ({
         <button
           className="scroll-back-to-content"
           onClick={() => {
-            trackEvent(EVENT_ACTION, "scroll to content");
             setAppState({
               ...calculateScrollCenter(elements, appState, canvas),
             });

src/components/MobileMenu.tsx

@@ -16,7 +16,6 @@ import { SCROLLBAR_WIDTH, SCROLLBAR_MARGIN } from "../scene/scrollbars";
 import { LockIcon } from "./LockIcon";
 import { UserList } from "./UserList";
 import { BackgroundPickerAndDarkModeToggle } from "./BackgroundPickerAndDarkModeToggle";
-import { EVENT_ACTION, trackEvent } from "../analytics";
 
 type MobileMenuProps = {
   appState: AppState;
@@ -149,7 +148,6 @@ export const MobileMenu = ({
             <button
               className="scroll-back-to-content"
               onClick={() => {
-                trackEvent(EVENT_ACTION, "scroll to content");
                 setAppState({
                   ...calculateScrollCenter(elements, appState, canvas),
                 });

src/components/ShortcutsDialog.tsx

@@ -4,7 +4,6 @@ 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
@@ -92,9 +91,6 @@ const Footer = () => (
       href="https://blog.excalidraw.com"
       target="_blank"
       rel="noopener noreferrer"
-      onClick={() => {
-        trackEvent(EVENT_EXIT, "blog");
-      }}
     >
       {t("shortcutsDialog.blog")}
     </a>
@@ -102,9 +98,6 @@ const Footer = () => (
       href="https://howto.excalidraw.com"
       target="_blank"
       rel="noopener noreferrer"
-      onClick={() => {
-        trackEvent(EVENT_EXIT, "guides");
-      }}
     >
       {t("shortcutsDialog.howto")}
     </a>
@@ -112,9 +105,6 @@ const Footer = () => (
       href="https://github.com/excalidraw/excalidraw/issues"
       target="_blank"
       rel="noopener noreferrer"
-      onClick={() => {
-        trackEvent(EVENT_EXIT, "issues");
-      }}
     >
       {t("shortcutsDialog.github")}
     </a>