feat: ga4 analytics #117

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
 {