Add events on load (#2451)

analytics.md

@@ -60,3 +60,5 @@
 | Excalidraw blog         | exit     | blog                               |
 | Excalidraw guides       | exit     | guides                             |
 | File issues             | exit     | issues                             |
+| First load              | load     | first load                         |
+| Load from stroage       | load     | storage                            | size                            | `bytes`   |

src/analytics.ts

@@ -1,13 +1,14 @@
 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 EVENT_SHARE = "share";
+export const EVENT_CHANGE = "change";
-export const EVENT_IO = "io";
 export const EVENT_DIALOG = "dialog";
+export const EVENT_EXIT = "exit";
+export const EVENT_IO = "io";
+export const EVENT_LAYER = "layer";
 export const EVENT_LIBRARY = "library";
+export const EVENT_LOAD = "load";
+export const EVENT_SHAPE = "shape";
+export const EVENT_SHARE = "share";
 
 export const trackEvent = window.gtag
   ? (category: string, name: string, label?: string, value?: number) => {

src/data/localStorage.ts

@@ -87,3 +87,17 @@ export const importFromLocalStorage = () => {
   }
   return { elements, appState };
 };
+
+export const getTotalStorageSize = () => {
+  const appState = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_APP_STATE);
+  const collab = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_COLLAB);
+  const elements = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS);
+  const library = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_LIBRARY);
+
+  const appStateSize = appState ? JSON.stringify(appState).length : 0;
+  const collabSize = collab ? JSON.stringify(collab).length : 0;
+  const elementsSize = elements ? JSON.stringify(elements).length : 0;
+  const librarySize = library ? JSON.stringify(library).length : 0;
+
+  return appStateSize + collabSize + elementsSize + librarySize;
+};

src/excalidraw-app/index.tsx

@@ -1,24 +1,21 @@
-import React, { useState, useLayoutEffect, useEffect } from "react";
+import React, { useEffect, useLayoutEffect, useState } from "react";
-
+import { EVENT_LOAD, trackEvent } from "../analytics";
 import { LoadingMessage } from "../components/LoadingMessage";
 import { TopErrorBoundary } from "../components/TopErrorBoundary";
-import Excalidraw from "../packages/excalidraw/index";
+import { EVENT } from "../constants";
-
 import {
+  getTotalStorageSize,
   importFromLocalStorage,
   importUsernameFromLocalStorage,
   saveToLocalStorage,
   saveUsernameToLocalStorage,
 } from "../data/localStorage";
-
-import { debounce } from "../utils";
-
-import { SAVE_TO_LOCAL_STORAGE_TIMEOUT } from "../time_constants";
-import { EVENT } from "../constants";
-
 import { ImportedDataState } from "../data/types";
 import { ExcalidrawElement } from "../element/types";
+import Excalidraw from "../packages/excalidraw/index";
+import { SAVE_TO_LOCAL_STORAGE_TIMEOUT } from "../time_constants";
 import { AppState } from "../types";
+import { debounce } from "../utils";
 
 const saveDebounced = debounce(
   (elements: readonly ExcalidrawElement[], state: AppState) => {
@@ -36,9 +33,6 @@ const onBlur = () => {
 };
 
 export default function ExcalidrawApp() {
-  // dimensions
-  // ---------------------------------------------------------------------------
-
   const [dimensions, setDimensions] = useState({
     width: window.innerWidth,
     height: window.innerHeight,
@@ -56,9 +50,6 @@ export default function ExcalidrawApp() {
     return () => window.removeEventListener("resize", onResize);
   }, []);
 
-  // initial state
-  // ---------------------------------------------------------------------------
-
   const [initialState, setInitialState] = useState<{
     data: ImportedDataState;
     user: {
@@ -67,6 +58,12 @@ export default function ExcalidrawApp() {
   } | null>(null);
 
   useEffect(() => {
+    const storageSize = getTotalStorageSize();
+    if (storageSize) {
+      trackEvent(EVENT_LOAD, "storage", "size", storageSize);
+    } else {
+      trackEvent(EVENT_LOAD, "first time");
+    }
     setInitialState({
       data: importFromLocalStorage(),
       user: {
@@ -75,9 +72,6 @@ export default function ExcalidrawApp() {
     });
   }, []);
 
-  // blur/unload
-  // ---------------------------------------------------------------------------
-
   useEffect(() => {
     window.addEventListener(EVENT.UNLOAD, onBlur, false);
     window.addEventListener(EVENT.BLUR, onBlur, false);
@@ -87,13 +81,7 @@ export default function ExcalidrawApp() {
     };
   }, []);
 
-  // ---------------------------------------------------------------------------
+  return initialState ? (
-
-  if (!initialState) {
-    return <LoadingMessage />;
-  }
-
-  return (
     <TopErrorBoundary>
       <Excalidraw
         width={dimensions.width}
@@ -104,5 +92,7 @@ export default function ExcalidrawApp() {
         onUsernameChange={onUsernameChange}
       />
     </TopErrorBoundary>
+  ) : (
+    <LoadingMessage />
   );
 }