feat: ga4 analytics #117

entrypoints/background.ts

@@ -1,3 +1,4 @@
+import { trackError } from "@/features/analytics";
 import { collectionCount, getCollections, saveCollections } from "@/features/collectionStorage";
 import { migrateStorage } from "@/features/migration";
 import { showWelcomeDialog } from "@/features/v3welcome/utils/showWelcomeDialog";
@@ -30,6 +31,7 @@ export default defineBackground(() =>
 		browser.runtime.onInstalled.addListener(async ({ reason, previousVersion }) =>
 		{
 			logger("onInstalled", reason, previousVersion);
+			analytics.track("extension_installed", { reason, previousVersion: previousVersion ?? "none" });
 
 			const previousMajor: number = previousVersion ? parseInt(previousVersion.split(".")[0]) : 0;
 
@@ -88,11 +90,9 @@ export default defineBackground(() =>
 							preview: graphicsCache[tab.url]?.preview,
 							icon: graphicsCache[tab.url]?.icon
 						};
-
-						logger("Captured tab", tab.url);
 					}
 				}
-				catch (ex) { logger(ex); }
+				catch { }
 			};
 
 			setInterval(() =>
@@ -374,5 +374,6 @@ export default defineBackground(() =>
 	catch (ex)
 	{
 		console.error(ex);
+		trackError("background_error", ex as Error);
 	}
 });

entrypoints/options/main.tsx

@@ -14,6 +14,8 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
 	</App>
 );
 
+analytics.page("options_page");
+
 function OptionsPage(): React.ReactElement
 {
 	const [selection, setSelection] = useState<SelectionType>("general");

entrypoints/sidepanel/components/EditDialog.tsx

@@ -26,6 +26,11 @@ export default function EditDialog(props: GroupEditDialogProps): ReactElement
 
 	const handleSave = () =>
 	{
+		if (props.type === "collection" ? props.collection !== null : props.group !== null)
+			analytics.track("item_edited", { type: props.type });
+		else
+			analytics.track("item_created", { type: props.type });
+
 		if (props.type === "collection")
 			props.onSave({
 				type: "collection",

entrypoints/sidepanel/layouts/collections/CollectionListView.tsx

@@ -64,6 +64,8 @@ export default function CollectionListView(): ReactElement
 			updateCollections(result);
 			if (sortMode !== "custom")
 				setSortMode("custom");
+
+			analytics.track("used_drag_and_drop");
 		}
 	};
 

entrypoints/sidepanel/layouts/collections/messages/CtaMessage.tsx

@@ -27,6 +27,11 @@ export default function CtaMessage(props: MessageBarProps): ReactElement
 	{
 		await ctaCounter.setValue(counter);
 		setCounter(counter);
+
+		if (counter === -1)
+			analytics.track("bmc_clicked");
+		else
+			analytics.track("cta_dismissed");
 	};
 
 	if (counter < 50)
@@ -36,7 +41,7 @@ export default function CtaMessage(props: MessageBarProps): ReactElement
 		<MessageBar layout="multiline" icon={ <HeartFilled color="red" /> } { ...props }>
 			<MessageBarBody>
 				<MessageBarTitle>{ i18n.t("cta_message.title") }</MessageBarTitle>
-				{ i18n.t("cta_message.message") } <Link { ...extLink(storeLink) }>{ i18n.t("cta_message.feedback") }</Link>
+				{ i18n.t("cta_message.message") } <Link { ...extLink(storeLink) } onClick={ () => analytics.track("feedback_clicked") }>{ i18n.t("cta_message.feedback") }</Link>
 			</MessageBarBody>
 			<MessageBarActions
 				containerAction={

entrypoints/sidepanel/layouts/header/MoreButton.tsx

@@ -41,10 +41,10 @@ export default function MoreButton(): ReactElement
 
 					<fui.MenuDivider />
 
-					<fui.MenuItemLink icon={ <BmcIcon /> } { ...extLink(buyMeACoffeeLink) }>
+					<fui.MenuItemLink icon={ <BmcIcon /> } { ...extLink(buyMeACoffeeLink) } onClick={ () => analytics.track("feedback_clicked") }>
 						{ i18n.t("common.cta.sponsor") }
 					</fui.MenuItemLink>
-					<fui.MenuItemLink icon={ <FeedbackIcon /> } { ...extLink(storeLink) } >
+					<fui.MenuItemLink icon={ <FeedbackIcon /> } { ...extLink(storeLink) } onClick={ () => analytics.track("bmc_clicked") }>
 						{ i18n.t("common.cta.feedback") }
 					</fui.MenuItemLink>
 					<fui.MenuItemLink icon={ <LearnIcon /> } { ...extLink(githubLinks.release) } >

entrypoints/sidepanel/main.tsx

@@ -15,6 +15,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
 );
 
 document.title = i18n.t("manifest.name");
+analytics.page("collection_list");
 
 function MainPage(): React.ReactElement
 {