feat(analytics): aptabase

.env.example

@@ -0,0 +1,2 @@
+# Aptabase Key - Analytics
+APTABASE_KEY=some-key

.github/workflows/build.yml

@@ -38,6 +38,8 @@ jobs:
 
       - name: Build application
         run: pnpm build
+        env:
+          APTABASE_KEY: ${{ secrets.APTABASE_KEY }}
 
       - name: Package for ${{ matrix.platform }}
         run: ${{ matrix.package-cmd }}

.github/workflows/publish.yml

@@ -40,8 +40,7 @@ jobs:
       - name: Build application
         run: pnpm build
         env:
-          OAUTH_CLIENT_ID: ${{ secrets.OAUTH_CLIENT_ID }}
-          OAUTH_CLIENT_SECRET: ${{ secrets.OAUTH_CLIENT_SECRET }}
+          APTABASE_KEY: ${{ secrets.APTABASE_KEY }}
 
       - name: Package and publish for ${{ matrix.platform }}
         run: ${{ matrix.package-cmd }}

.gitignore

@@ -2,6 +2,9 @@
 dist/
 build/
 
+# Environment variables
+.env
+
 # Dependency directories
 node_modules/
 

config/webpack.config.main.base.ts

@@ -1,5 +1,6 @@
 import path from 'node:path';
 
+import Dotenv from 'dotenv-webpack';
 import type webpack from 'webpack';
 import { merge } from 'webpack-merge';
 
@@ -19,6 +20,8 @@ const configuration: webpack.Configuration = {
     path: webpackPaths.buildPath,
     filename: 'main.js',
   },
+
+  plugins: [new Dotenv()],
 };
 
 export default merge(baseConfig, configuration);

package.json

@@ -69,6 +69,7 @@
     "react-router-dom": "7.13.0"
   },
   "devDependencies": {
+    "@aptabase/electron": "0.3.1",
     "@atlaskit/avatar": "25.7.3",
     "@atlaskit/avatar-group": "12.4.9",
     "@atlaskit/badge": "18.3.3",
@@ -101,6 +102,7 @@
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.6.1",
+    "@types/dotenv-webpack": "7.0.8",
     "@types/jest": "30.0.0",
     "@types/node": "24.10.9",
     "@types/react": "19.2.9",
@@ -113,6 +115,7 @@
     "css-loader": "7.1.2",
     "css-minimizer-webpack-plugin": "7.0.4",
     "date-fns": "4.1.0",
+    "dotenv-webpack": "8.1.1",
     "electron": "40.0.0",
     "electron-builder": "26.4.0",
     "graphql": "16.12.0",

src/main/index.ts

@@ -12,14 +12,16 @@ import {
 import log from 'electron-log';
 import { menubar } from 'menubar';
 
+import { initialize, trackEvent } from '@aptabase/electron/main';
+
 import { APPLICATION } from '../shared/constants';
 import {
   EVENTS,
   type IAutoLaunch,
   type IKeyboardShortcut,
   type IOpenExternal,
 } from '../shared/events';
-import { logWarn } from '../shared/logger';
+import { logError, logWarn } from '../shared/logger';
 import { Theme } from '../shared/theme';
 
 import { handleMainEvent, onMainEvent, sendRendererEvent } from './events';
@@ -30,6 +32,16 @@ import AppUpdater from './updater';
 
 log.initialize();
 
+const aptabaseKey = process.env.APTABASE_KEY;
+if (!aptabaseKey) {
+  logError(
+    'main:initialize',
+    'APTABASE_KEY environment variable is not set',
+    new Error('APTABASE_KEY environment variable is not set'),
+  );
+}
+initialize(aptabaseKey);
+
 /**
  * File paths
  */
@@ -75,6 +87,7 @@ let shouldUseAlternateIdleIcon = false;
 let shouldUseUnreadActiveIcon = true;
 
 app.whenReady().then(async () => {
+  trackEvent('app', { event: 'launched' });
   preventSecondInstance();
 
   await onFirstRunMaybe();

src/renderer/App.tsx

@@ -20,6 +20,7 @@ import { useAppContext } from './hooks/useAppContext';
 
 import { GlobalShortcuts } from './components/GlobalShortcuts';
 import { AppLayout } from './components/layout/AppLayout';
+import { AppAnalytics } from './components/NavigationAnalyticsListener';
 
 function RequireAuth({ children }) {
   const { isLoggedIn } = useAppContext();
@@ -36,6 +37,7 @@ export const App = () => {
   return (
     <AppProvider>
       <Router>
+        <AppAnalytics />
         <AppLayout>
           <GlobalShortcuts />
           <Routes>

src/renderer/components/GlobalShortcuts.tsx

@@ -2,7 +2,7 @@ import { type FC, useEffect } from 'react';
 
 import { useShortcutActions } from '../hooks/useShortcutActions';
 
-/**
+/**let
  * Component that registers global keyboard shortcuts for the renderer app.
  * Mount once inside App, within Router + AppProvider.
  */

src/renderer/components/NavigationAnalyticsListener.tsx

@@ -0,0 +1,10 @@
+import { useNavigationAnalytics } from '../hooks/useNavigationAnalytics';
+
+/**
+ * Listens for navigation changes and logs analytics events.
+ * Should be rendered inside <Router> but outside layout/content components.
+ */
+export function AppAnalytics() {
+  useNavigationAnalytics();
+  return null;
+}

src/renderer/components/layout/AppLayout.tsx

@@ -1,5 +1,7 @@
 import type { FC, ReactNode } from 'react';
 
+import { useNavigationAnalytics } from '../../hooks/useNavigationAnalytics';
+
 import { Sidebar } from '../Sidebar';
 
 type AppLayoutProps = { children: ReactNode };
@@ -9,6 +11,8 @@ type AppLayoutProps = { children: ReactNode };
  * It handles the basic layout with sidebar and content area.
  */
 export const AppLayout: FC<AppLayoutProps> = ({ children }) => {
+  useNavigationAnalytics();
+
   const setFocusRef = (el: HTMLButtonElement | null) => {
     if (el) {
       el.focus();

src/renderer/hooks/useNavigationAnalytics.ts

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { trackEvent } from '@aptabase/electron/renderer';
+
+import { formatProperCase } from '../utils/helpers';
+
+/**
+ * Hook to log navigation events on every location change.
+ */
+export function useNavigationAnalytics() {
+  const location = useLocation();
+
+  useEffect(() => {
+    const screen =
+      location.pathname === '/'
+        ? 'Notifications'
+        : formatProperCase(location.pathname.replaceAll('/', ''));
+
+    trackEvent('navigate', { to: screen });
+  }, [location]);
+}

src/renderer/hooks/useNotifications.ts

@@ -1,5 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 
+import { trackEvent } from '@aptabase/electron/renderer';
+
 import type {
   Account,
   AccountNotifications,
@@ -177,6 +179,7 @@ export const useNotifications = (): NotificationsState => {
       readNotifications: AtlassifyNotification[],
     ) => {
       setStatus('loading');
+      trackEvent('action', { name: 'Mark as Read' });
 
       const account = readNotifications[0].account;
 
@@ -228,6 +231,7 @@ export const useNotifications = (): NotificationsState => {
       unreadNotifications: AtlassifyNotification[],
     ) => {
       setStatus('loading');
+      trackEvent('action', { name: 'Mark as Unread' });
 
       const account = unreadNotifications[0].account;