From 0453a83d2f8b806f88403c7aa714eb8d8a933b4e Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 28 Aug 2022 20:57:40 +0200 Subject: [PATCH] Analytics now works even if blocked by tracker blockers --- public/local-data/websiteInterfaces.json | 6 +-- src/components/AppLayout.tsx | 50 +++++++++++----------- src/components/Inputs/LanguageSwitcher.tsx | 3 +- src/components/Panels/MainPanel.tsx | 15 ++++--- src/helpers/analytics.ts | 7 +++ src/pages/about-us/contact.tsx | 7 +-- src/pages/contents/all.tsx | 14 +++--- src/pages/library/index.tsx | 35 +++++++-------- src/pages/news/index.tsx | 9 ++-- src/pages/wiki/index.tsx | 11 ++--- src/types/global.d.ts | 4 +- 11 files changed, 89 insertions(+), 72 deletions(-) create mode 100644 src/helpers/analytics.ts diff --git a/public/local-data/websiteInterfaces.json b/public/local-data/websiteInterfaces.json index fdaddd4..71d9b1b 100644 --- a/public/local-data/websiteInterfaces.json +++ b/public/local-data/websiteInterfaces.json @@ -172,9 +172,9 @@ "anchor_link_copied": "Copied! 👍", "folders": "Folders", "empty_folder_message": "This folder is empty", - "switch_to_grid_view": null, - "switch_to_folder_view": null, - "content_is_not_available": null + "switch_to_grid_view": "Switch to grid view", + "switch_to_folder_view": "Switch to folder view", + "content_is_not_available": "This content is not available" } }, { diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 8e97679..4718840 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -22,6 +22,7 @@ import { OpenGraph, TITLE_PREFIX, TITLE_SEPARATOR } from "helpers/openGraph"; import { useIs1ColumnLayout, useIsScreenAtLeast } from "hooks/useContainerQuery"; import { useOnResize } from "hooks/useOnResize"; import { Ids } from "types/ids"; +import { sendAnalytics } from "helpers/analytics"; /* * ╭─────────────╮ @@ -324,7 +325,7 @@ export const AppLayout = ({ className="mt-8" onClick={() => { disgardSafariWarning(); - umami("[Safari] Disgard warning"); + sendAnalytics("Safari", "Disgard warning"); }} /> @@ -333,7 +334,7 @@ export const AppLayout = ({ state={configPanelOpen} onClose={() => { setConfigPanelOpen(false); - umami("[Settings] Close settings"); + sendAnalytics("Settings", "Close settings"); }}>

{langui.settings}

@@ -364,7 +365,7 @@ export const AppLayout = ({ onChange={(items) => { const newPreferredLanguages = items.map((item) => item.code); setPreferredLanguages(newPreferredLanguages); - umami("[Settings] Change preferred languages"); + sendAnalytics("Settings", "Change preferred languages"); }} /> )} @@ -383,7 +384,7 @@ export const AppLayout = ({ onClick: () => { setDarkMode(false); setSelectedThemeMode(true); - umami("[Settings] Change theme (light)"); + sendAnalytics("Settings", "Change theme (light)"); }, active: selectedThemeMode && !darkMode, text: langui.light, @@ -391,7 +392,7 @@ export const AppLayout = ({ { onClick: () => { setSelectedThemeMode(false); - umami("[Settings] Change theme (auto)"); + sendAnalytics("Settings", "Change theme (auto)"); }, active: !selectedThemeMode, text: langui.auto, @@ -400,7 +401,7 @@ export const AppLayout = ({ onClick: () => { setDarkMode(true); setSelectedThemeMode(true); - umami("[Settings] Change theme (dark)"); + sendAnalytics("Settings", "Change theme (dark)"); }, active: selectedThemeMode && darkMode, text: langui.dark, @@ -417,7 +418,10 @@ export const AppLayout = ({ value={currencySelect} onChange={(newCurrency) => { setCurrencySelect(newCurrency); - umami(`[Settings] Change currency (${currencyOptions[newCurrency]})}`); + sendAnalytics( + "Settings", + `Change currency (${currencyOptions[newCurrency]})}` + ); }} className="w-28" /> @@ -431,13 +435,11 @@ export const AppLayout = ({ { onClick: () => { setFontSize((current) => current / 1.05); - umami( - `[Settings] Change font size (${((fontSize / 1.05) * 100).toLocaleString( - undefined, - { - maximumFractionDigits: 0, - } - )}%)` + sendAnalytics( + "Settings", + `Change font size (${((fontSize / 1.05) * 100).toLocaleString(undefined, { + maximumFractionDigits: 0, + })}%)` ); }, icon: Icon.TextDecrease, @@ -445,7 +447,7 @@ export const AppLayout = ({ { onClick: () => { setFontSize(1); - umami("[Settings] Change font size (100%)"); + sendAnalytics("Settings", "Change font size (100%)"); }, text: `${(fontSize * 100).toLocaleString(undefined, { maximumFractionDigits: 0, @@ -454,13 +456,11 @@ export const AppLayout = ({ { onClick: () => { setFontSize((current) => current * 1.05); - umami( - `[Settings] Change font size (${(fontSize * 1.05 * 100).toLocaleString( - undefined, - { - maximumFractionDigits: 0, - } - )}%)` + sendAnalytics( + "Settings", + `Change font size (${(fontSize * 1.05 * 100).toLocaleString(undefined, { + maximumFractionDigits: 0, + })}%)` ); }, icon: Icon.TextIncrease, @@ -476,7 +476,7 @@ export const AppLayout = ({ active={!dyslexic} onClick={() => { setDyslexic(false); - umami("[Settings] Change font (Zen Maru Gothic)"); + sendAnalytics("Settings", "Change font (Zen Maru Gothic)"); }} className="font-zenMaruGothic" text="Zen Maru Gothic" @@ -485,7 +485,7 @@ export const AppLayout = ({ active={dyslexic} onClick={() => { setDyslexic(true); - umami("[Settings] Change font (OpenDyslexic)"); + sendAnalytics("Settings", "Change font (OpenDyslexic)"); }} className="font-openDyslexic" text="OpenDyslexic" @@ -501,7 +501,7 @@ export const AppLayout = ({ value={playerName} onChange={(newName) => { setPlayerName(newName); - umami("[Settings] Change username"); + sendAnalytics("Settings", "Change username"); }} /> diff --git a/src/components/Inputs/LanguageSwitcher.tsx b/src/components/Inputs/LanguageSwitcher.tsx index 361de09..b63150e 100644 --- a/src/components/Inputs/LanguageSwitcher.tsx +++ b/src/components/Inputs/LanguageSwitcher.tsx @@ -6,6 +6,7 @@ import { cJoin } from "helpers/className"; import { prettyLanguage } from "helpers/formatters"; import { iterateMap } from "helpers/others"; import { useLanguages } from "hooks/useLocalData"; +import { sendAnalytics } from "helpers/analytics"; /* * ╭─────────────╮ @@ -42,7 +43,7 @@ export const LanguageSwitcher = ({ active={value === localesIndex} onClick={() => { onLanguageChanged(value); - umami(`[Language Switcher] Switch language (${locale})`); + sendAnalytics("Language Switcher", `Switch language (${locale})`); }} text={prettyLanguage(locale, languages)} /> diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx index 4fcbb41..57e70ea 100644 --- a/src/components/Panels/MainPanel.tsx +++ b/src/components/Panels/MainPanel.tsx @@ -9,6 +9,7 @@ import { cIf, cJoin } from "helpers/className"; import { isDefinedAndNotEmpty } from "helpers/others"; import { Link } from "components/Inputs/Link"; import { useIs3ColumnsLayout } from "hooks/useContainerQuery"; +import { sendAnalytics } from "helpers/analytics"; /* * ╭─────────────╮ @@ -40,9 +41,9 @@ export const MainPanel = (): JSX.Element => {