More events for layers, align, colors and swap name <=> category (#2442)

analytics.md

@@ -1,36 +1,50 @@
-| Excalidraw           | Name   | Category                           | Label                    | Value     |
-| -------------------- | ------ | ---------------------------------- | ------------------------ | --------- |
-| Shape / Selection    | shape  | selection, rectangle, diamond, etc | `toolbar` or `shortcut`  |
-| Text on double click | shape  | text                               | `double-click`           |
-| 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`    |
-| Export dialog        | action | export                             | dialog                   |
-| Export to backend    | action | export                             | backend                  |
-| Export as SVG        | action | export                             | `svg` or `clipboard-svg` |
-| Export to PNG        | action | export                             | `png` or `clipboard-png` |
-| 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                             |
+| Excalidraw              | Category | Name                               | Label                           | Value     |
+| ----------------------- | -------- | ---------------------------------- | ------------------------------- | --------- |
+| Shape / Selection       | shape    | selection, rectangle, diamond, etc | `toolbar` or `shortcut`         |
+| Text on double click    | shape    | text                               | `double-click`                  |
+| 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`    |
+| Export dialog           | action   | export                             | dialog                          |
+| Export to backend       | action   | export                             | backend                         |
+| Export as SVG           | action   | export                             | `svg` or `clipboard-svg`        |
+| Export to PNG           | action   | export                             | `png` or `clipboard-png`        |
+| Scroll back to content  | action   | scroll to content                  |
+| 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 style            | change   | style                              | `solid` or `dashed` or `dotted` |
+| 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`                      |
+| Send to back            | layer    | move                               | `back`                          |
+| Send backward           | layer    | move                               | `down`                          |
+| Bring to front          | layer    | move                               | `front`                         |
+| Bring forward           | layer    | move                               | `up`                            |
+| Align left              | align    | align                              | `left`                          |
+| Align right             | align    | align                              | `right`                         |
+| Align top               | align    | align                              | `top`                           |
+| Align bottom            | align    | align                              | `bottom`                        |
+| Center horizontally     | align    | horizontally                       | `center`                        |
+| Center vertically       | align    | vertically                         | `center`                        |
+| Distribute horizontally | align    | distribute                         | `horizontally`                  |
+| Distribute vertically   | align    | distribute                         | `vertically`                    |
+| E2EE shield             | exit     | e2ee shield                        |
+| GitHub corner           | exit     | github                             |
+| Excalidraw blog         | exit     | blog                               |
+| Excalidraw guides       | exit     | guides                             |
+| File issues             | exit     | issues                             |

src/actions/actionAlign.tsx

@@ -17,6 +17,7 @@ import { ExcalidrawElement } from "../element/types";
 import { AppState } from "../types";
 import { alignElements, Alignment } from "../align";
 import { getShortcutKey } from "../utils";
+import { trackEvent, EVENT_ALIGN } from "../analytics";
 
 const enableActionGroup = (
   elements: readonly ExcalidrawElement[],
@@ -43,6 +44,7 @@ const alignSelectedElements = (
 export const actionAlignTop = register({
   name: "alignTop",
   perform: (elements, appState) => {
+    trackEvent(EVENT_ALIGN, "align", "top");
     return {
       appState,
       elements: alignSelectedElements(elements, appState, {
@@ -72,6 +74,7 @@ export const actionAlignTop = register({
 export const actionAlignBottom = register({
   name: "alignBottom",
   perform: (elements, appState) => {
+    trackEvent(EVENT_ALIGN, "align", "bottom");
     return {
       appState,
       elements: alignSelectedElements(elements, appState, {
@@ -101,6 +104,7 @@ export const actionAlignBottom = register({
 export const actionAlignLeft = register({
   name: "alignLeft",
   perform: (elements, appState) => {
+    trackEvent(EVENT_ALIGN, "align", "left");
     return {
       appState,
       elements: alignSelectedElements(elements, appState, {
@@ -130,6 +134,7 @@ export const actionAlignLeft = register({
 export const actionAlignRight = register({
   name: "alignRight",
   perform: (elements, appState) => {
+    trackEvent(EVENT_ALIGN, "align", "right");
     return {
       appState,
       elements: alignSelectedElements(elements, appState, {
@@ -159,6 +164,7 @@ export const actionAlignRight = register({
 export const actionAlignVerticallyCentered = register({
   name: "alignVerticallyCentered",
   perform: (elements, appState) => {
+    trackEvent(EVENT_ALIGN, "vertically", "center");
     return {
       appState,
       elements: alignSelectedElements(elements, appState, {
@@ -184,6 +190,7 @@ export const actionAlignVerticallyCentered = register({
 export const actionAlignHorizontallyCentered = register({
   name: "alignHorizontallyCentered",
   perform: (elements, appState) => {
+    trackEvent(EVENT_ALIGN, "horizontally", "center");
     return {
       appState,
       elements: alignSelectedElements(elements, appState, {

src/actions/actionCanvas.tsx

@@ -15,12 +15,19 @@ import { getCommonBounds } from "../element";
 import { getNewZoom } from "../scene/zoom";
 import { centerScrollOn } from "../scene/scroll";
 import { EVENT_ACTION, EVENT_CHANGE, trackEvent } from "../analytics";
+import colors from "../colors";
 
 export const actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
   perform: (_, appState, value) => {
     if (value !== appState.viewBackgroundColor) {
-      trackEvent(EVENT_CHANGE, "canvas color", value);
+      trackEvent(
+        EVENT_CHANGE,
+        "canvas color",
+        colors.canvasBackground.includes(value)
+          ? `${value} (picker ${colors.canvasBackground.indexOf(value)})`
+          : value,
+      );
     }
     return {
       appState: { ...appState, viewBackgroundColor: value },

src/actions/actionDistribute.tsx

@@ -13,6 +13,7 @@ import { ExcalidrawElement } from "../element/types";
 import { AppState } from "../types";
 import { distributeElements, Distribution } from "../disitrubte";
 import { getShortcutKey } from "../utils";
+import { EVENT_ALIGN, trackEvent } from "../analytics";
 
 const enableActionGroup = (
   elements: readonly ExcalidrawElement[],
@@ -39,6 +40,7 @@ const distributeSelectedElements = (
 export const distributeHorizontally = register({
   name: "distributeHorizontally",
   perform: (elements, appState) => {
+    trackEvent(EVENT_ALIGN, "distribute", "horizontally");
     return {
       appState,
       elements: distributeSelectedElements(elements, appState, {
@@ -67,6 +69,7 @@ export const distributeHorizontally = register({
 export const distributeVertically = register({
   name: "distributeVertically",
   perform: (elements, appState) => {
+    trackEvent(EVENT_ALIGN, "distribute", "vertically");
     return {
       appState,
       elements: distributeSelectedElements(elements, appState, {

src/actions/actionProperties.tsx

@@ -41,6 +41,7 @@ import {
   SloppinessCartoonistIcon,
 } from "../components/icons";
 import { EVENT_CHANGE, trackEvent } from "../analytics";
+import colors from "../colors";
 
 const changeProperty = (
   elements: readonly ExcalidrawElement[],
@@ -83,7 +84,13 @@ export const actionChangeStrokeColor = register({
   name: "changeStrokeColor",
   perform: (elements, appState, value) => {
     if (value !== appState.currentItemStrokeColor) {
-      trackEvent(EVENT_CHANGE, "stroke color", value);
+      trackEvent(
+        EVENT_CHANGE,
+        "stroke color",
+        colors.elementStroke.includes(value)
+          ? `${value} (picker ${colors.elementStroke.indexOf(value)})`
+          : value,
+      );
     }
     return {
       elements: changeProperty(elements, appState, (el) =>
@@ -117,7 +124,13 @@ export const actionChangeBackgroundColor = register({
   name: "changeBackgroundColor",
   perform: (elements, appState, value) => {
     if (value !== appState.currentItemBackgroundColor) {
-      trackEvent(EVENT_CHANGE, "background color", value);
+      trackEvent(
+        EVENT_CHANGE,
+        "background color",
+        colors.elementBackground.includes(value)
+          ? `${value} (picker ${colors.elementBackground.indexOf(value)})`
+          : value,
+      );
     }
 
     return {
@@ -313,6 +326,7 @@ export const actionChangeSloppiness = register({
 export const actionChangeStrokeStyle = register({
   name: "changeStrokeStyle",
   perform: (elements, appState, value) => {
+    trackEvent(EVENT_CHANGE, "style", value);
     return {
       elements: changeProperty(elements, appState, (el) =>
         newElementWith(el, {

src/analytics.ts

@@ -2,15 +2,17 @@ export const EVENT_ACTION = "action";
 export const EVENT_EXIT = "exit";
 export const EVENT_CHANGE = "change";
 export const EVENT_SHAPE = "shape";
+export const EVENT_LAYER = "layer";
+export const EVENT_ALIGN = "align";
 
 export const trackEvent = window.gtag
-  ? (name: string, category: string, label?: string, value?: number) => {
+  ? (category: string, name: 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);
+  : (category: string, name: string, label?: string, value?: number) => {
+      console.info("Track Event", category, name, label, value);
     };

src/components/LayerUI.tsx

@@ -45,7 +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";
+import { EVENT_ACTION, EVENT_EXIT, trackEvent } from "../analytics";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -575,6 +575,7 @@ const LayerUI = ({
         <button
           className="scroll-back-to-content"
           onClick={() => {
+            trackEvent(EVENT_ACTION, "scroll to content");
             setAppState({
               ...calculateScrollCenter(elements, appState, canvas),
             });

src/components/MobileMenu.tsx

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

src/zindex.ts

@@ -2,6 +2,7 @@ import { AppState } from "./types";
 import { ExcalidrawElement } from "./element/types";
 import { getElementsInGroup } from "./groups";
 import { findLastIndex, findIndex } from "./utils";
+import { trackEvent, EVENT_LAYER } from "./analytics";
 
 /**
  * Returns indices of elements to move based on selected elements.
@@ -175,6 +176,7 @@ const shiftElements = (
           ];
   });
 
+  trackEvent(EVENT_LAYER, "move", direction === "left" ? "down" : "up");
   return elements;
 };
 
@@ -232,6 +234,7 @@ const shiftElementsToEnd = (
   const leadingElements = elements.slice(0, leadingIndex);
   const trailingElements = elements.slice(trailingIndex + 1);
 
+  trackEvent(EVENT_LAYER, "move", direction === "left" ? "back" : "front");
   return direction === "left"
     ? [
         ...leadingElements,