Add basic event actions to analytics (#2375)

Co-authored-by: dwelle <luzar.david@gmail.com>
2020-12-02 23:57:51 +02:00 · 2020-12-02 23:57:51 +02:00 · abde1daba4
parent 014097a97e
commit abde1daba4
20 changed files with 183 additions and 61 deletions
--- a/.env.production
+++ b/.env.production
@ -0,0 +1 @@
+REACT_APP_INCLUDE_GTAG=true
--- a/analytics.md
+++ b/analytics.md
@ -0,0 +1,31 @@
+| Excalidraw         | Name   | Category                           | Label                   | Value     |
+| ------------------ | ------ | ---------------------------------- | ----------------------- | --------- |
+| Shape / Selection  | shape  | selection, rectangle, diamond, etc | `toolbar` or `shortcut` |
+| Lock selection     | shape  | lock                               | `on` or `off`           |
+| Load file          | action | load                               | `MIME type`             |
+| Import from URL    | action | import                             |
+| Save               | action | save                               |
+| Save as            | action | save as                            |
+| Clear canvas       | action | clear canvas                       |
+| Zoom in            | action | zoom                               | in                      | `zoom`    |
+| Zoom out           | action | zoom                               | out                     | `zoom`    |
+| Zoom fit           | action | zoom                               | fit                     | `zoom`    |
+| Zoom reset         | action | zoom                               | reset                   | `zoom`    |
+| Open shortcut menu | action | keyboard shortcuts                 |
+| Canvas color       | change | canvas color                       | `color`                 |
+| Background color   | change | background color                   | `color`                 |
+| Stroke color       | change | stroke color                       | `color`                 |
+| Stroke width       | change | stroke                             | width                   | `width`   |
+| Stroke sloppiness  | change | stroke                             | sloppiness              | `value`   |
+| Fill               | change | fill                               | `value`                 |
+| Edge               | change | edge                               | `value`                 |
+| Opacity            | change | opacity                            | value                   | `opacity` |
+| Project name       | change | title                              |
+| Theme              | change | theme                              | `light` or `dark`       |
+| Change language    | change | language                           | `language`              |
+| Language on load   | change | language on load                   | `language`              |
+| E2EE shield        | exit   | e2ee shield                        |
+| GitHub corner      | exit   | github                             |
+| Excalidraw blog    | exit   | blog                               |
+| Excalidraw guides  | exit   | guides                             |
+| File issues        | exit   | issues                             |
--- a/package-lock.json
+++ b/package-lock.json
@ -15933,9 +15933,9 @@
      }
    },
    "npm": {
-      "version": "6.14.8",
-      "resolved": "https://registry.npmjs.org/npm/-/npm-6.14.8.tgz",
-      "integrity": "sha512-HBZVBMYs5blsj94GTeQZel7s9odVuuSUHy1+AlZh7rPVux1os2ashvEGLy/STNK7vUjbrCg5Kq9/GXisJgdf6A==",
+      "version": "6.14.9",
+      "resolved": "https://registry.npmjs.org/npm/-/npm-6.14.9.tgz",
+      "integrity": "sha512-yHi1+i9LyAZF1gAmgyYtVk+HdABlLy94PMIDoK1TRKWvmFQAt5z3bodqVwKvzY0s6dLqQPVsRLiwhJfNtiHeCg==",
      "requires": {
        "JSONStream": "^1.3.5",
        "abbrev": "~1.1.1",
@ -16017,7 +16017,7 @@
        "npm-pick-manifest": "^3.0.2",
        "npm-profile": "^4.0.4",
        "npm-registry-fetch": "^4.0.7",
-        "npm-user-validate": "~1.0.0",
+        "npm-user-validate": "^1.0.1",
        "npmlog": "~4.1.2",
        "once": "~1.4.0",
        "opener": "^1.5.1",
@ -16088,16 +16088,6 @@
            "humanize-ms": "^1.2.1"
          }
        },
-        "ajv": {
-          "version": "5.5.2",
-          "bundled": true,
-          "requires": {
-            "co": "^4.6.0",
-            "fast-deep-equal": "^1.0.0",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.3.0"
-          }
-        },
        "ansi-align": {
          "version": "2.0.0",
          "bundled": true,
@ -16383,10 +16373,6 @@
            "mkdirp": "~0.5.0"
          }
        },
-        "co": {
-          "version": "4.6.0",
-          "bundled": true
-        },
        "code-point-at": {
          "version": "1.1.0",
          "bundled": true
@ -16775,10 +16761,6 @@
          "version": "1.3.0",
          "bundled": true
        },
-        "fast-deep-equal": {
-          "version": "1.1.0",
-          "bundled": true
-        },
        "fast-json-stable-stringify": {
          "version": "2.0.0",
          "bundled": true
@ -17063,11 +17045,31 @@
          "bundled": true
        },
        "har-validator": {
-          "version": "5.1.0",
+          "version": "5.1.5",
          "bundled": true,
          "requires": {
-            "ajv": "^5.3.0",
+            "ajv": "^6.12.3",
            "har-schema": "^2.0.0"
+          },
+          "dependencies": {
+            "ajv": {
+              "version": "6.12.6",
+              "bundled": true,
+              "requires": {
+                "fast-deep-equal": "^3.1.1",
+                "fast-json-stable-stringify": "^2.0.0",
+                "json-schema-traverse": "^0.4.1",
+                "uri-js": "^4.2.2"
+              }
+            },
+            "fast-deep-equal": {
+              "version": "3.1.3",
+              "bundled": true
+            },
+            "json-schema-traverse": {
+              "version": "0.4.1",
+              "bundled": true
+            }
          }
        },
        "has": {
@ -17310,10 +17312,6 @@
          "version": "0.2.3",
          "bundled": true
        },
-        "json-schema-traverse": {
-          "version": "0.3.1",
-          "bundled": true
-        },
        "json-stringify-safe": {
          "version": "5.0.1",
          "bundled": true
@ -17884,7 +17882,7 @@
          }
        },
        "npm-user-validate": {
-          "version": "1.0.0",
+          "version": "1.0.1",
          "bundled": true
        },
        "npmlog": {
@ -18759,6 +18757,19 @@
            "xdg-basedir": "^3.0.0"
          }
        },
+        "uri-js": {
+          "version": "4.4.0",
+          "bundled": true,
+          "requires": {
+            "punycode": "^2.1.0"
+          },
+          "dependencies": {
+            "punycode": {
+              "version": "2.1.1",
+              "bundled": true
+            }
+          }
+        },
        "url-parse-lax": {
          "version": "1.0.0",
          "bundled": true,
--- a/public/index.html
+++ b/public/index.html
@ -87,7 +87,7 @@
    <% if (process.env.REACT_APP_INCLUDE_GTAG === 'true') { %>
    <script
      async
-      src="https://www.googletagmanager.com/gtag/js?id=G-H3S0KQSBGX"
+      src="https://www.googletagmanager.com/gtag/js?id=UA-387204-13"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
@ -96,7 +96,6 @@
      }
      gtag("js", new Date());
      gtag("config", "UA-387204-13");
-      gtag("config", "G-H3S0KQSBGX");
    </script>
    <% } %>

--- a/src/actions/actionCanvas.tsx
+++ b/src/actions/actionCanvas.tsx
@ -14,10 +14,14 @@ import { AppState, NormalizedZoomValue } from "../types";
 import { getCommonBounds } from "../element";
 import { getNewZoom } from "../scene/zoom";
 import { centerScrollOn } from "../scene/scroll";
+import { EVENT_ACTION, EVENT_CHANGE, trackEvent } from "../analytics";

 export const actionChangeViewBackgroundColor = register({
  name: "changeViewBackgroundColor",
  perform: (_, appState, value) => {
+    if (value !== appState.viewBackgroundColor) {
+      trackEvent(EVENT_CHANGE, "canvas color", value);
+    }
    return {
      appState: { ...appState, viewBackgroundColor: value },
      commitToHistory: true,
@ -40,6 +44,7 @@ export const actionChangeViewBackgroundColor = register({
 export const actionClearCanvas = register({
  name: "clearCanvas",
  perform: (elements, appState: AppState) => {
+    trackEvent(EVENT_ACTION, "clear canvas");
    return {
      elements: elements.map((element) =>
        newElementWith(element, { isDeleted: true }),
@ -78,14 +83,16 @@ const ZOOM_STEP = 0.1;
 export const actionZoomIn = register({
  name: "zoomIn",
  perform: (_elements, appState) => {
+    const zoom = getNewZoom(
+      getNormalizedZoom(appState.zoom.value + ZOOM_STEP),
+      appState.zoom,
+      { x: appState.width / 2, y: appState.height / 2 },
+    );
+    trackEvent(EVENT_ACTION, "zoom", "in", zoom.value * 100);
    return {
      appState: {
        ...appState,
-        zoom: getNewZoom(
-          getNormalizedZoom(appState.zoom.value + ZOOM_STEP),
-          appState.zoom,
-          { x: appState.width / 2, y: appState.height / 2 },
-        ),
+        zoom,
      },
      commitToHistory: false,
    };
@ -109,14 +116,17 @@ export const actionZoomIn = register({
 export const actionZoomOut = register({
  name: "zoomOut",
  perform: (_elements, appState) => {
+    const zoom = getNewZoom(
+      getNormalizedZoom(appState.zoom.value - ZOOM_STEP),
+      appState.zoom,
+      { x: appState.width / 2, y: appState.height / 2 },
+    );
+
+    trackEvent(EVENT_ACTION, "zoom", "out", zoom.value * 100);
    return {
      appState: {
        ...appState,
-        zoom: getNewZoom(
-          getNormalizedZoom(appState.zoom.value - ZOOM_STEP),
-          appState.zoom,
-          { x: appState.width / 2, y: appState.height / 2 },
-        ),
+        zoom,
      },
      commitToHistory: false,
    };
@ -140,6 +150,7 @@ export const actionZoomOut = register({
 export const actionResetZoom = register({
  name: "resetZoom",
  perform: (_elements, appState) => {
+    trackEvent(EVENT_ACTION, "zoom", "reset", 100);
    return {
      appState: {
        ...appState,
@ -201,7 +212,7 @@ export const actionZoomToFit = register({
    const [x1, y1, x2, y2] = commonBounds;
    const centerX = (x1 + x2) / 2;
    const centerY = (y1 + y2) / 2;
-
+    trackEvent(EVENT_ACTION, "zoom", "fit", newZoom.value * 100);
    return {
      appState: {
        ...appState,
--- a/src/actions/actionExport.tsx
+++ b/src/actions/actionExport.tsx
@ -8,10 +8,12 @@ import useIsMobile from "../is-mobile";
 import { register } from "./register";
 import { KEYS } from "../keys";
 import { muteFSAbortError } from "../utils";
+import { EVENT_ACTION, EVENT_CHANGE, trackEvent } from "../analytics";

 export const actionChangeProjectName = register({
  name: "changeProjectName",
  perform: (_elements, appState, value) => {
+    trackEvent(EVENT_CHANGE, "title");
    return { appState: { ...appState, name: value }, commitToHistory: false };
  },
  PanelComponent: ({ appState, updateData }) => (
@ -88,6 +90,7 @@ export const actionSaveScene = register({
  perform: async (elements, appState, value) => {
    try {
      const { fileHandle } = await saveAsJSON(elements, appState);
+      trackEvent(EVENT_ACTION, "save");
      return { commitToHistory: false, appState: { ...appState, fileHandle } };
    } catch (error) {
      if (error?.name !== "AbortError") {
@ -118,6 +121,7 @@ export const actionSaveAsScene = register({
        ...appState,
        fileHandle: null,
      });
+      trackEvent(EVENT_ACTION, "save as");
      return { commitToHistory: false, appState: { ...appState, fileHandle } };
    } catch (error) {
      if (error?.name !== "AbortError") {
@ -149,16 +153,14 @@ export const actionLoadScene = register({
    elements,
    appState,
    { elements: loadedElements, appState: loadedAppState, error },
-  ) => {
-    return {
-      elements: loadedElements,
-      appState: {
-        ...loadedAppState,
-        errorMessage: error,
-      },
-      commitToHistory: true,
-    };
-  },
+  ) => ({
+    elements: loadedElements,
+    appState: {
+      ...loadedAppState,
+      errorMessage: error,
+    },
+    commitToHistory: true,
+  }),
  PanelComponent: ({ updateData, appState }) => (
    <ToolButton
      type="button"
--- a/src/actions/actionMenu.tsx
+++ b/src/actions/actionMenu.tsx
@ -7,6 +7,7 @@ import { register } from "./register";
 import { allowFullScreen, exitFullScreen, isFullScreen } from "../utils";
 import { CODES, KEYS } from "../keys";
 import { HelpIcon } from "../components/HelpIcon";
+import { EVENT_ACTION, trackEvent } from "../analytics";

 export const actionToggleCanvasMenu = register({
  name: "toggleCanvasMenu",
@ -71,6 +72,7 @@ export const actionFullScreen = register({
 export const actionShortcuts = register({
  name: "toggleShortcuts",
  perform: (_elements, appState) => {
+    trackEvent(EVENT_ACTION, "keyboard shortcuts");
    return {
      appState: {
        ...appState,
--- a/src/actions/actionProperties.tsx
+++ b/src/actions/actionProperties.tsx
@ -40,6 +40,7 @@ import {
  SloppinessArtistIcon,
  SloppinessCartoonistIcon,
 } from "../components/icons";
+import { EVENT_CHANGE, trackEvent } from "../analytics";

 const changeProperty = (
  elements: readonly ExcalidrawElement[],
@ -81,6 +82,9 @@ const getFormValue = function <T>(
 export const actionChangeStrokeColor = register({
  name: "changeStrokeColor",
  perform: (elements, appState, value) => {
+    if (value !== appState.currentItemStrokeColor) {
+      trackEvent(EVENT_CHANGE, "stroke color", value);
+    }
    return {
      elements: changeProperty(elements, appState, (el) =>
        newElementWith(el, {
@ -112,6 +116,10 @@ export const actionChangeStrokeColor = register({
 export const actionChangeBackgroundColor = register({
  name: "changeBackgroundColor",
  perform: (elements, appState, value) => {
+    if (value !== appState.currentItemBackgroundColor) {
+      trackEvent(EVENT_CHANGE, "background color", value);
+    }
+
    return {
      elements: changeProperty(elements, appState, (el) =>
        newElementWith(el, {
@ -143,6 +151,7 @@ export const actionChangeBackgroundColor = register({
 export const actionChangeFillStyle = register({
  name: "changeFillStyle",
  perform: (elements, appState, value) => {
+    trackEvent(EVENT_CHANGE, "fill", value);
    return {
      elements: changeProperty(elements, appState, (el) =>
        newElementWith(el, {
@ -192,6 +201,7 @@ export const actionChangeFillStyle = register({
 export const actionChangeStrokeWidth = register({
  name: "changeStrokeWidth",
  perform: (elements, appState, value) => {
+    trackEvent(EVENT_CHANGE, "stroke", "width", value);
    return {
      elements: changeProperty(elements, appState, (el) =>
        newElementWith(el, {
@ -254,6 +264,7 @@ export const actionChangeStrokeWidth = register({
 export const actionChangeSloppiness = register({
  name: "changeSloppiness",
  perform: (elements, appState, value) => {
+    trackEvent(EVENT_CHANGE, "stroke", "sloppiness", value);
    return {
      elements: changeProperty(elements, appState, (el) =>
        newElementWith(el, {
@ -349,6 +360,7 @@ export const actionChangeStrokeStyle = register({
 export const actionChangeOpacity = register({
  name: "changeOpacity",
  perform: (elements, appState, value) => {
+    trackEvent(EVENT_CHANGE, "opacity", "value", value);
    return {
      elements: changeProperty(elements, appState, (el) =>
        newElementWith(el, {
@ -545,6 +557,7 @@ export const actionChangeSharpness = register({
    const shouldUpdateForLinearElements = targetElements.length
      ? targetElements.every(isLinearElement)
      : isLinearElementType(appState.elementType);
+    trackEvent(EVENT_CHANGE, "edge", value);
    return {
      elements: changeProperty(elements, appState, (el) =>
        newElementWith(el, {
--- a/src/analytics.ts
+++ b/src/analytics.ts
@ -0,0 +1,16 @@
+export const EVENT_ACTION = "action";
+export const EVENT_EXIT = "exit";
+export const EVENT_CHANGE = "change";
+export const EVENT_SHAPE = "shape";
+
+export const trackEvent = window.gtag
+  ? (name: string, category: string, label?: string, value?: number) => {
+      window.gtag("event", name, {
+        event_category: category,
+        event_label: label,
+        value,
+      });
+    }
+  : (name: string, category: string, label?: string, value?: number) => {
+      console.info("Track Event", name, category, label, value);
+    };
--- a/src/components/Actions.tsx
+++ b/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,
--- a/src/components/App.tsx
+++ b/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();
--- a/src/components/BackgroundPickerAndDarkModeToggle.tsx
+++ b/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 });
        }}
      />
--- a/src/components/GitHubCorner.tsx
+++ b/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"
--- a/src/components/LayerUI.tsx
+++ b/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")}
--- a/src/components/ShortcutsDialog.tsx
+++ b/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>
--- a/src/data/blob.ts
+++ b/src/data/blob.ts
@ -7,6 +7,7 @@ import { calculateScrollCenter } from "../scene";
 import { MIME_TYPES } from "../constants";
 import { CanvasError } from "../errors";
 import { clearElementsForExport } from "../element";
+import { EVENT_ACTION, trackEvent } from "../analytics";

 export const parseFileContents = async (blob: Blob | File) => {
  let contents: string;
@ -89,7 +90,7 @@ export const loadFromBlob = async (
    if (data.type !== "excalidraw") {
      throw new Error(t("alerts.couldNotLoadInvalidFile"));
    }
-    return restore(
+    const result = restore(
      {
        elements: clearElementsForExport(data.elements || []),
        appState: {
@ -109,6 +110,9 @@ export const loadFromBlob = async (
      },
      localAppState,
    );
+
+    trackEvent(EVENT_ACTION, "load", getMimeType(blob));
+    return result;
  } catch (error) {
    console.error(error.message);
    throw new Error(t("alerts.couldNotLoadInvalidFile"));
--- a/src/data/index.ts
+++ b/src/data/index.ts
@ -20,6 +20,7 @@ import { ExportType } from "../scene/types";
 import { restore } from "./restore";
 import { ImportedDataState } from "./types";
 import { canvasToBlob } from "./blob";
+import { EVENT_ACTION, trackEvent } from "../analytics";

 export { loadFromBlob } from "./blob";
 export { saveAsJSON, loadFromJSON } from "./json";
@ -263,6 +264,7 @@ const importFromBackend = async (
      data = await response.json();
    }

+    trackEvent(EVENT_ACTION, "import");
    return {
      elements: data.elements || null,
      appState: data.appState || null,
--- a/src/data/json.ts
+++ b/src/data/json.ts
@ -42,7 +42,6 @@ export const saveAsJSON = async (
    },
    appState.fileHandle,
  );
-
  return { fileHandle };
 };

--- a/src/global.d.ts
+++ b/src/global.d.ts
@ -12,6 +12,7 @@ interface Document {
 interface Window {
  ClipboardItem: any;
  __EXCALIDRAW_SHA__: string | undefined;
+  gtag: Function;
 }

 // https://github.com/facebook/create-react-app/blob/ddcb7d5/packages/react-scripts/lib/react-app.d.ts
--- a/src/i18n.ts
+++ b/src/i18n.ts
@ -1,4 +1,5 @@
 import LanguageDetector from "i18next-browser-languagedetector";
+import { EVENT_CHANGE, trackEvent } from "./analytics";

 import fallbackLanguageData from "./locales/en.json";
 import percentages from "./locales/percentages.json";
@ -67,8 +68,8 @@ export const setLanguage = async (newLng: string | undefined) => {
  currentLanguageData = await import(
    /* webpackChunkName: "i18n-[request]" */ `./locales/${currentLanguage.lng}.json`
  );
-
  languageDetector.cacheUserLanguage(currentLanguage.lng);
+  trackEvent(EVENT_CHANGE, "language", currentLanguage.lng);
 };

 export const setLanguageFirstTime = async () => {
@ -84,6 +85,7 @@ export const setLanguageFirstTime = async () => {
  );

  languageDetector.cacheUserLanguage(currentLanguage.lng);
+  trackEvent(EVENT_CHANGE, "language on load", currentLanguage.lng);
 };

 export const getLanguage = () => currentLanguage;