From 668150a667891e4a18f63ed7e57ac3eb5349139a Mon Sep 17 00:00:00 2001 From: Lipis Date: Thu, 3 Dec 2020 15:10:04 +0200 Subject: [PATCH] More events for layers, align, colors and swap name <=> category (#2442) --- analytics.md | 86 +++++++++++++++++++------------- src/actions/actionAlign.tsx | 7 +++ src/actions/actionCanvas.tsx | 9 +++- src/actions/actionDistribute.tsx | 3 ++ src/actions/actionProperties.tsx | 18 ++++++- src/analytics.ts | 8 +-- src/components/LayerUI.tsx | 3 +- src/components/MobileMenu.tsx | 2 + src/zindex.ts | 3 ++ 9 files changed, 96 insertions(+), 43 deletions(-) diff --git a/analytics.md b/analytics.md index ba0b6241c..0e80bf1e4 100644 --- a/analytics.md +++ b/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 | diff --git a/src/actions/actionAlign.tsx b/src/actions/actionAlign.tsx index d4bc1008f..77c1e8800 100644 --- a/src/actions/actionAlign.tsx +++ b/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, { diff --git a/src/actions/actionCanvas.tsx b/src/actions/actionCanvas.tsx index e321c8d43..7d5a371a9 100644 --- a/src/actions/actionCanvas.tsx +++ b/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 }, diff --git a/src/actions/actionDistribute.tsx b/src/actions/actionDistribute.tsx index cd733fdc2..15669dde0 100644 --- a/src/actions/actionDistribute.tsx +++ b/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, { diff --git a/src/actions/actionProperties.tsx b/src/actions/actionProperties.tsx index 0eebdb0c6..de74d2cce 100644 --- a/src/actions/actionProperties.tsx +++ b/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, { diff --git a/src/analytics.ts b/src/analytics.ts index 7372c3126..fb4c3b7dc 100644 --- a/src/analytics.ts +++ b/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); }; diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx index 279cb80c1..6c909340c 100644 --- a/src/components/LayerUI.tsx +++ b/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 = ({