chore: Remove tracking (excalidraw#2722)

* chore: Remove tracking * process * rename * remove * prod * Update public/index.html Co-authored-by: David Luzar <[email protected]> * Update public/index.html * eol * more * stats Co-authored-by: David Luzar <[email protected]>
RussPalms · Jan 5, 2021 · 3aa01ad · 3aa01ad
1 parent 4acdc47
commit 3aa01ad
Show file tree

Hide file tree

Showing 33 changed files with 170 additions and 423 deletions.
diff --git a/.env.production b/.env.production
@@ -1 +1 @@
-REACT_APP_INCLUDE_GTAG=true
+REACT_APP_GOOGLE_ANALYTICS_ID=UA-387204-13
diff --git a/Dockerfile b/Dockerfile
@@ -5,7 +5,6 @@ WORKDIR /opt/node_app
 COPY package.json package-lock.json ./
 RUN npm i --no-optional
 
-ARG REACT_APP_INCLUDE_GTAG=false
 ARG NODE_ENV=production
 
 COPY . .

diff --git a/analytics.md b/analytics.md
diff --git a/package.json b/package.json
@@ -81,8 +81,8 @@
  "private": true,
  "scripts": {
  "build-node": "node ./scripts/build-node.js",
- "build:app:docker": "REACT_APP_INCLUDE_GTAG=false REACT_APP_DISABLE_SENTRY=true react-scripts build",
- "build:app": "REACT_APP_INCLUDE_GTAG=true REACT_APP_GIT_SHA=$NOW_GITHUB_COMMIT_SHA react-scripts build",
+ "build:app:docker": "REACT_APP_DISABLE_SENTRY=true react-scripts build",
+ "build:app": "REACT_APP_GIT_SHA=$NOW_GITHUB_COMMIT_SHA react-scripts build",
  "build:version": "node ./scripts/build-version.js",
  "build": "npm run build:app && npm run build:version",
  "eject": "react-scripts eject",

diff --git a/public/index.html b/public/index.html
@@ -86,18 +86,18 @@
 
  <link rel="stylesheet" href="fonts.css" type="text/css" />
 
- <% if (process.env.REACT_APP_INCLUDE_GTAG === 'true') { %>
+ <% if (process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
  <script
  async
- src="https://www.googletagmanager.com/gtag/js?id=UA-387204-13"
+ src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GOOGLE_ANALYTICS_ID%"
  ></script>
  <script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
  dataLayer.push(arguments);
  }
  gtag("js", new Date());
- gtag("config", "UA-387204-13");
+ gtag("config", "%REACT_APP_GOOGLE_ANALYTICS_ID%");
  </script>
  <% } %>
 

diff --git a/src/actions/actionAddToLibrary.ts b/src/actions/actionAddToLibrary.ts
@@ -3,7 +3,6 @@ import { getSelectedElements } from "../scene";
 import { getNonDeletedElements } from "../element";
 import { deepCopyElement } from "../element/newElement";
 import { Library } from "../data/library";
-import { EVENT_LIBRARY, trackEvent } from "../analytics";
 
 export const actionAddToLibrary = register({
  name: "addToLibrary",
@@ -16,7 +15,6 @@ export const actionAddToLibrary = register({
  Library.loadLibrary().then((items) => {
  Library.saveLibrary([...items, selectedElements.map(deepCopyElement)]);
  });
- trackEvent(EVENT_LIBRARY, "add");
  return false;
  },
  contextMenuOrder: 6,

diff --git a/src/actions/actionAlign.tsx b/src/actions/actionAlign.tsx
@@ -1,7 +1,5 @@
 import React from "react";
-import { KEYS } from "../keys";
-import { t } from "../i18n";
-import { register } from "./register";
+import { alignElements, Alignment } from "../align";
 import {
  AlignBottomIcon,
  AlignLeftIcon,
@@ -10,14 +8,15 @@ import {
  CenterHorizontallyIcon,
  CenterVerticallyIcon,
 } from "../components/icons";
-import { getSelectedElements, isSomeElementSelected } from "../scene";
-import { getElementMap, getNonDeletedElements } from "../element";
 import { ToolButton } from "../components/ToolButton";
+import { getElementMap, getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
+import { t } from "../i18n";
+import { KEYS } from "../keys";
+import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { AppState } from "../types";
-import { alignElements, Alignment } from "../align";
 import { getShortcutKey } from "../utils";
-import { trackEvent, EVENT_ALIGN } from "../analytics";
+import { register } from "./register";
 
 const enableActionGroup = (
  elements: readonly ExcalidrawElement[],
@@ -44,7 +43,6 @@ const alignSelectedElements = (
 export const actionAlignTop = register({
  name: "alignTop",
  perform: (elements, appState) => {
- trackEvent(EVENT_ALIGN, "align", "top");
  return {
  appState,
  elements: alignSelectedElements(elements, appState, {
@@ -74,7 +72,6 @@ export const actionAlignTop = register({
 export const actionAlignBottom = register({
  name: "alignBottom",
  perform: (elements, appState) => {
- trackEvent(EVENT_ALIGN, "align", "bottom");
  return {
  appState,
  elements: alignSelectedElements(elements, appState, {
@@ -104,7 +101,6 @@ export const actionAlignBottom = register({
 export const actionAlignLeft = register({
  name: "alignLeft",
  perform: (elements, appState) => {
- trackEvent(EVENT_ALIGN, "align", "left");
  return {
  appState,
  elements: alignSelectedElements(elements, appState, {
@@ -134,7 +130,6 @@ export const actionAlignLeft = register({
 export const actionAlignRight = register({
  name: "alignRight",
  perform: (elements, appState) => {
- trackEvent(EVENT_ALIGN, "align", "right");
  return {
  appState,
  elements: alignSelectedElements(elements, appState, {
@@ -164,7 +159,6 @@ export const actionAlignRight = register({
 export const actionAlignVerticallyCentered = register({
  name: "alignVerticallyCentered",
  perform: (elements, appState) => {
- trackEvent(EVENT_ALIGN, "vertically", "center");
  return {
  appState,
  elements: alignSelectedElements(elements, appState, {
@@ -190,7 +184,6 @@ 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
@@ -1,7 +1,5 @@
 import React from "react";
-import { EVENT_ACTION, EVENT_CHANGE, trackEvent } from "../analytics";
 import { getDefaultAppState } from "../appState";
-import colors from "../colors";
 import { ColorPicker } from "../components/ColorPicker";
 import { resetZoom, trash, zoomIn, zoomOut } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
@@ -21,15 +19,6 @@ import { register } from "./register";
 export const actionChangeViewBackgroundColor = register({
  name: "changeViewBackgroundColor",
  perform: (_, appState, value) => {
- if (value !== appState.viewBackgroundColor) {
- trackEvent(
- EVENT_CHANGE,
- "canvas color",
- colors.canvasBackground.includes(value)
- ? `${value} (picker ${colors.canvasBackground.indexOf(value)})`
- : value,
- );
- }
  return {
  appState: { ...appState, viewBackgroundColor: value },
  commitToHistory: true,
@@ -52,7 +41,6 @@ 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 }),
@@ -98,7 +86,6 @@ export const actionZoomIn = register({
  { left: appState.offsetLeft, top: appState.offsetTop },
  { x: appState.width / 2, y: appState.height / 2 },
  );
- trackEvent(EVENT_ACTION, "zoom", "in", zoom.value * 100);
  return {
  appState: {
  ...appState,
@@ -133,7 +120,6 @@ export const actionZoomOut = register({
  { x: appState.width / 2, y: appState.height / 2 },
  );
 
- trackEvent(EVENT_ACTION, "zoom", "out", zoom.value * 100);
  return {
  appState: {
  ...appState,
@@ -161,7 +147,6 @@ export const actionZoomOut = register({
 export const actionResetZoom = register({
  name: "resetZoom",
  perform: (_elements, appState) => {
- trackEvent(EVENT_ACTION, "zoom", "reset", 100);
  return {
  appState: {
  ...appState,
@@ -234,12 +219,10 @@ const zoomToFitElements = (
  left: appState.offsetLeft,
  top: appState.offsetTop,
  });
- const action = zoomToSelection ? "selection" : "fit";
 
  const [x1, y1, x2, y2] = commonBounds;
  const centerX = (x1 + x2) / 2;
  const centerY = (y1 + y2) / 2;
- trackEvent(EVENT_ACTION, "zoom", action, newZoom.value * 100);
  return {
  appState: {
  ...appState,

diff --git a/src/actions/actionDistribute.tsx b/src/actions/actionDistribute.tsx
@@ -1,19 +1,18 @@
 import React from "react";
-import { CODES } from "../keys";
-import { t } from "../i18n";
-import { register } from "./register";
 import {
  DistributeHorizontallyIcon,
  DistributeVerticallyIcon,
 } from "../components/icons";
-import { getSelectedElements, isSomeElementSelected } from "../scene";
-import { getElementMap, getNonDeletedElements } from "../element";
 import { ToolButton } from "../components/ToolButton";
+import { distributeElements, Distribution } from "../disitrubte";
+import { getElementMap, getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
+import { t } from "../i18n";
+import { CODES } from "../keys";
+import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { AppState } from "../types";
-import { distributeElements, Distribution } from "../disitrubte";
 import { getShortcutKey } from "../utils";
-import { EVENT_ALIGN, trackEvent } from "../analytics";
+import { register } from "./register";
 
 const enableActionGroup = (
  elements: readonly ExcalidrawElement[],
@@ -40,7 +39,6 @@ const distributeSelectedElements = (
 export const distributeHorizontally = register({
  name: "distributeHorizontally",
  perform: (elements, appState) => {
- trackEvent(EVENT_ALIGN, "distribute", "horizontally");
  return {
  appState,
  elements: distributeSelectedElements(elements, appState, {
@@ -69,7 +67,6 @@ 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/actionExport.tsx b/src/actions/actionExport.tsx
@@ -1,22 +1,21 @@
 import React from "react";
-import { EVENT_CHANGE, EVENT_IO, trackEvent } from "../analytics";
-import { load, save, saveAs } from "../components/icons";
+import { trackEvent } from "../analytics";
+import { load, questionCircle, save, saveAs } from "../components/icons";
 import { ProjectName } from "../components/ProjectName";
 import { ToolButton } from "../components/ToolButton";
+import "../components/ToolIcon.scss";
 import { Tooltip } from "../components/Tooltip";
-import { questionCircle } from "../components/icons";
 import { loadFromJSON, saveAsJSON } from "../data";
 import { t } from "../i18n";
 import useIsMobile from "../is-mobile";
 import { KEYS } from "../keys";
 import { muteFSAbortError } from "../utils";
 import { register } from "./register";
-import "../components/ToolIcon.scss";
 
 export const actionChangeProjectName = register({
  name: "changeProjectName",
  perform: (_elements, appState, value) => {
- trackEvent(EVENT_CHANGE, "title");
+ trackEvent("change", "title");
  return { appState: { ...appState, name: value }, commitToHistory: false };
  },
  PanelComponent: ({ appState, updateData }) => (
@@ -100,7 +99,6 @@ export const actionSaveScene = register({
  perform: async (elements, appState, value) => {
  try {
  const { fileHandle } = await saveAsJSON(elements, appState);
- trackEvent(EVENT_IO, "save");
  return { commitToHistory: false, appState: { ...appState, fileHandle } };
  } catch (error) {
  if (error?.name !== "AbortError") {
@@ -131,7 +129,6 @@ export const actionSaveAsScene = register({
  ...appState,
  fileHandle: null,
  });
- trackEvent(EVENT_IO, "save as");
  return { commitToHistory: false, appState: { ...appState, fileHandle } };
  } catch (error) {
  if (error?.name !== "AbortError") {

diff --git a/src/actions/actionMenu.tsx b/src/actions/actionMenu.tsx
@@ -7,7 +7,6 @@ import { register } from "./register";
 import { allowFullScreen, exitFullScreen, isFullScreen } from "../utils";
 import { CODES, KEYS } from "../keys";
 import { HelpIcon } from "../components/HelpIcon";
-import { EVENT_DIALOG, trackEvent } from "../analytics";
 
 export const actionToggleCanvasMenu = register({
  name: "toggleCanvasMenu",
@@ -72,7 +71,6 @@ export const actionFullScreen = register({
 export const actionShortcuts = register({
  name: "toggleShortcuts",
  perform: (_elements, appState) => {
- trackEvent(EVENT_DIALOG, "shortcuts");
  return {
  appState: {
  ...appState,

diff --git a/src/actions/actionNavigate.tsx b/src/actions/actionNavigate.tsx
@@ -1,16 +1,14 @@
 import React from "react";
-import { Avatar } from "../components/Avatar";
-import { register } from "./register";
 import { getClientColors, getClientInitials } from "../clients";
-import { Collaborator } from "../types";
+import { Avatar } from "../components/Avatar";
 import { centerScrollOn } from "../scene/scroll";
-import { EVENT_SHARE, trackEvent } from "../analytics";
+import { Collaborator } from "../types";
+import { register } from "./register";
 
 export const actionGoToCollaborator = register({
  name: "goToCollaborator",
  perform: (_elements, appState, value) => {
  const point = value as Collaborator["pointer"];
- trackEvent(EVENT_SHARE, "go to collaborator");
  if (!point) {
  return { appState, commitToHistory: false };
  }