Merge pull request xiv-gear-planner#331 from xiv-gear-planner/add-ana…

…lytics-events

Add analytics events for common actions

packages/core/src/analytics/analytics.ts

@@ -0,0 +1,35 @@
+import {GearPlanSheet} from "../sheet";
+
+
+type ExtraData = {
+    [key: string]: unknown
+}
+
+export function recordEvent(name: string, data?: ExtraData) {
+    try {
+        const umami = window['umami'];
+        // Don't blindly expect this to exist - someone might block the script with an adblocker, and we don't want
+        // the rest of the site to blow up. It also might just be down.
+        umami?.track(name, data);
+    }
+    catch (e) {
+        console.error("Error recording analytics", e);
+    }
+}
+
+export function recordSheetEvent(eventName: string, sheet: GearPlanSheet, extraData: ExtraData = {}) {
+    const fullData = {
+        // ...prepSheetData(sheet),
+        ...extraData,
+        sheet: prepSheetData(sheet)
+    };
+    recordEvent(eventName, fullData);
+}
+
+function prepSheetData(sheet: GearPlanSheet) {
+   return {
+       'job': sheet.classJobName,
+       'level': sheet.level,
+       'isync': sheet.ilvlSync
+   }
+}

packages/frontend/package.json

@@ -14,6 +14,7 @@
     "@types/expect": "^24.3.0",
     "@types/jsdom": "^21.1.3",
     "@types/mocha": "^10.0.2",
+    "@types/umami": "^2.10.0",
     "global-jsdom": "24.0.0",
     "html-webpack-plugin": "^5.5.3",
     "isomorphic-fetch": "^3.0.0",

packages/frontend/src/scripts/base_ui.ts

@@ -12,6 +12,7 @@ import {showSettingsModal} from "./settings/settings_modal";
 import {GearPlanSheetGui, GRAPHICAL_SHEET_PROVIDER} from "./components/sheet";
 import {splitPath} from "@xivgear/core/nav/common_nav";
 import {applyCommonTopMenuFormatting} from "@xivgear/common-ui/components/top_menu";
+import {recordSheetEvent} from "@xivgear/core/analytics/analytics";
 
 const pageTitle = 'XivGear - FFXIV Gear Planner';
 
@@ -124,6 +125,7 @@ export async function openSheetByKey(sheet: string) {
     console.log('openSheetByKey: ', sheet);
     const planner = GRAPHICAL_SHEET_PROVIDER.fromSaved(sheet);
     if (planner) {
+        recordSheetEvent("openSheetByKey", planner);
         await openSheet(planner);
     }
     else {
@@ -136,6 +138,12 @@ export async function openExport(exported: (SheetExport | SetExport), changeHash
     const isFullSheet = 'sets' in exported;
     const sheet = isFullSheet ? GRAPHICAL_SHEET_PROVIDER.fromExport(exported) : GRAPHICAL_SHEET_PROVIDER.fromSetExport(exported);
     const embed = isEmbed();
+    const analyticsData = {
+        'isEmbed': embed,
+        'viewOnly': viewOnly,
+        'nav': getHash()
+    };
+    recordSheetEvent('openExport', sheet, analyticsData);
     if (embed) {
         if (isFullSheet) {
             displayEmbedError("Embedding is only supported for a single set, not a full sheet. Consider embedding sets individually and/or linking to the full sheet rather than embedding it.");

packages/frontend/src/scripts/components/export_controller.ts

@@ -12,6 +12,7 @@ import {makeUrl, VIEW_SET_HASH} from "@xivgear/core/nav/common_nav";
 import {GearPlanSheet} from "@xivgear/core/sheet";
 import {writeProxy} from "@xivgear/core/util/proxies";
 import {EquipSlots, Materia, XivItem} from "@xivgear/xivmath/geartypes";
+import {recordSheetEvent} from "@xivgear/core/analytics/analytics";
 
 type ExportMethod<X> = {
     /**
@@ -289,6 +290,9 @@ abstract class ExportModal<X> extends BaseModal {
     }
 
     doExport(selectedType: ExportMethod<X>): Promise<string> {
+        recordSheetEvent("doExport", this.sheet, {
+            'exportType': selectedType.name,
+        });
         return selectedType.doExport(this.item);
     };
 

packages/frontend/src/scripts/components/gear_edit_toolbar.ts

@@ -5,6 +5,7 @@ import {StatTierDisplay} from "./stat_tier_display";
 import {CharacterGearSet} from "@xivgear/core/gear";
 import {GearPlanSheet} from "@xivgear/core/sheet";
 import {makeActionButton, redoIcon, undoIcon} from "@xivgear/common-ui/components/util";
+import {recordEvent} from "@xivgear/core/analytics/analytics";
 
 export class UndoArea extends HTMLDivElement {
     private _currentSet: CharacterGearSet;
@@ -15,9 +16,11 @@ export class UndoArea extends HTMLDivElement {
         super();
         this.classList.add('undo-controls');
         this.undoButton = makeActionButton([undoIcon()], () => {
+            recordEvent("undo");
             this.currentSet?.undo();
         }, 'Undo');
         this.redoButton = makeActionButton([redoIcon()], () => {
+            recordEvent("redo");
             this.currentSet?.redo();
         }, 'Redo');
         this.replaceChildren(this.undoButton, this.redoButton);

packages/frontend/src/scripts/components/materia.ts

@@ -21,6 +21,7 @@ import {
     quickElement
 } from "@xivgear/common-ui/components/util";
 import {GearPlanSheet} from "@xivgear/core/sheet";
+import {recordEvent} from "@xivgear/core/analytics/analytics";
 
 /**
  * Component for managing all materia slots on an item
@@ -391,9 +392,20 @@ export class MateriaPriorityPicker extends HTMLElement {
             'Keep Slot, else None: Keep the same materia as the previously item in that slot. If none equipped, leave empty.\n' +
             'Keep Item, else None: Remember what materia was equipped to each item. If none equipped, leave empty.';
         const fillModeLabel = labelFor("Fill Mode:", fillModeDropdown);
+        fillModeDropdown.addListener((newValue) => {
+           recordEvent("fillMode", {
+               'mode': newValue,
+           })
+        });
 
-        const fillEmptyNow = makeActionButton('Fill Empty', () => prioController.fillEmpty(), 'Fill all empty materia slots according to the chosen priority.');
-        const fillAllNow = makeActionButton('Fill All', () => prioController.fillAll(), 'Empty out and re-fill all materia slots according to the chosen priority.');
+        const fillEmptyNow = makeActionButton('Fill Empty', () => {
+            prioController.fillEmpty();
+            recordEvent("fillEmpty");
+        }, 'Fill all empty materia slots according to the chosen priority.');
+        const fillAllNow = makeActionButton('Fill All', () => {
+            prioController.fillAll();
+            recordEvent("fillAll");
+        }, 'Empty out and re-fill all materia slots according to the chosen priority.');
         const drag = new MateriaDragList(prioController);
 
         const minGcdText = document.createElement('span');

packages/frontend/src/scripts/components/new_sheet_form.ts

@@ -13,6 +13,7 @@ import {GRAPHICAL_SHEET_PROVIDER} from "./sheet";
 import {levelSelect} from "@xivgear/common-ui/components/level_picker";
 import {BaseModal} from "@xivgear/common-ui/components/modal";
 import {SHARED_SET_NAME} from "@xivgear/core/imports/imports";
+import {recordSheetEvent} from "@xivgear/core/analytics/analytics";
 
 export class NewSheetFormFieldSet extends HTMLFieldSetElement {
     readonly nameInput: HTMLInputElement;
@@ -139,6 +140,7 @@ export class NewSheetForm extends HTMLFormElement {
     private doSubmit() {
         const nextSheetSaveStub = getNextSheetInternalName();
         const gearPlanSheet = GRAPHICAL_SHEET_PROVIDER.fromScratch(nextSheetSaveStub, this.fieldSet.nameInput.value, this.fieldSet.jobDropdown.selectedItem, this.fieldSet.levelDropdown.selectedItem, this.fieldSet.tempSettings.ilvlSyncEnabled ? this.fieldSet.tempSettings.ilvlSync : undefined);
+        recordSheetEvent("newSheet", gearPlanSheet);
         this.sheetOpenCallback(gearPlanSheet).then(() => gearPlanSheet.requestSave());
     }
 }
@@ -172,7 +174,7 @@ export class SaveAsModal extends BaseModal {
             ev.stopPropagation();
             const newJob = this.fieldSet.jobDropdown.selectedItem;
             if (newJob !== undefined && newJob !== existingSheet.classJobName) {
-                const result = confirm(`You are attempting to change a sheet from ${existingSheet.classJobName} to ${newJob}. Items may need to be re-selected.`)
+                const result = confirm(`You are attempting to change a sheet from ${existingSheet.classJobName} to ${newJob}. Items may need to be re-selected.`);
                 if (!result) {
                     this.close();
                     return;
@@ -187,6 +189,7 @@ export class SaveAsModal extends BaseModal {
             const newSheet = GRAPHICAL_SHEET_PROVIDER.fromSaved(newSheetSaveKey);
             console.log("new sheet key", newSheet.saveKey);
             callback(newSheet).then(() => newSheet.requestSave());
+            recordSheetEvent("saveAs", newSheet);
             this.close();
         });
         this.fieldSet.recheck();