Merge pull request #33 from simonyiszk/analytics

feat: added analytics

.env.example

@@ -1 +1,2 @@
-EXPO_PUBLIC_API_BASE_URL=
+EXPO_PUBLIC_API_BASE_URL=
+EXPO_PUBLIC_DISABLE_ANALYTICS=true

app.config.ts

@@ -4,12 +4,14 @@ import * as env from 'env-var';
 config();
 
 const EXPO_PUBLIC_API_BASE_URL = env.get('EXPO_PUBLIC_API_BASE_URL').required().asString();
+const EXPO_PUBLIC_DISABLE_ANALYTICS = env.get('EXPO_PUBLIC_DISABLE_ANALYTICS').default('false').asBool();
 
 export default ({ config }: ConfigContext) => {
   return {
     ...config,
     extra: {
       apiBaseUrl: EXPO_PUBLIC_API_BASE_URL,
+      disableAnalytics: EXPO_PUBLIC_DISABLE_ANALYTICS,
       ...config.extra,
     },
   };

app/(tabs)/home/index.tsx

@@ -18,7 +18,7 @@ export default function HomePage() {
   const conference = useConference();
   const news = useNews();
   return (
-    <Screen>
+    <Screen analyticsScreenName='home'>
       <Header>
         <Title>Simonyi Konferencia</Title>
       </Header>

app/(tabs)/map.tsx

@@ -18,7 +18,7 @@ export default function MapPage() {
   };
 
   return (
-    <Screen>
+    <Screen analyticsScreenName='map'>
       <Header>
         <Title>Térkép</Title>
       </Header>

app/(tabs)/presentation/favorite-presentations.tsx

@@ -11,7 +11,7 @@ import { useFavoritePresentationsList } from '../../../hooks/use-favorite-presen
 export default function FavoritePresentationsScreen() {
   const { data, isLoading, isError } = useFavoritePresentationsList();
   return (
-    <Screen>
+    <Screen analyticsScreenName='favorite-presentations'>
       <Header>
         <Title>Kedvenc előadásaim</Title>
       </Header>

app/(tabs)/presentation/index.tsx

@@ -13,7 +13,7 @@ import { useConference } from '../../../hooks/use-conference';
 export default function PresentationListPage() {
   const { data, isError, isLoading } = useConference();
   return (
-    <Screen>
+    <Screen analyticsScreenName='presentation'>
       <Header>
         <Title>Programterv</Title>
       </Header>

app/[...unmatched].tsx

@@ -4,9 +4,11 @@ import { SafeAreaView } from 'react-native';
 import { StyledButton } from '../components/common/styled-button';
 import { Subtitle } from '../components/common/subtitle';
 import { Title } from '../components/common/title';
+import { usePageView } from '../utils/analytics.utils';
 
 export default function Unmatched() {
   const { canGoBack, back } = useRouter();
+  usePageView('unmatched');
   return (
     <SafeAreaView className='items-center justify-center flex-grow space-y-5'>
       <Title className='text-center'>Ismeretlen képernyőre jutottál</Title>

components/base/screen.tsx

@@ -1,7 +1,13 @@
 import { View, ViewProps } from 'react-native';
 
+import { usePageView } from '../../utils/analytics.utils';
 import { cn } from '../../utils/common.utils';
 
-export function Screen({ className, ...props }: ViewProps) {
+interface ScreenProps extends ViewProps {
+  analyticsScreenName?: string;
+}
+
+export function Screen({ className, analyticsScreenName, ...props }: ScreenProps) {
+  usePageView(analyticsScreenName);
   return <View className={cn('bg-slate-100 dark:bg-slate-900 h-full', className)} {...props} />;
 }

components/common/error-boundary.tsx

@@ -2,12 +2,14 @@ import { ErrorBoundaryProps } from 'expo-router';
 import { ScrollView, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { usePageView } from '../../utils/analytics.utils';
 import { StyledButton } from './styled-button';
 import { Subtitle } from './subtitle';
 import { Title } from './title';
 
 export function ErrorBoundary(props: ErrorBoundaryProps) {
   const { top, bottom, left, right } = useSafeAreaInsets();
+  usePageView('error');
   return (
     <View
       className='bg-blue-500 items-center justify-center flex-1 space-y-5'

components/news/layouts/news-details-page.tsx

@@ -14,12 +14,11 @@ interface NewsDetailsPageProps {
 
 export function NewsDetailsPage({ id }: NewsDetailsPageProps) {
   const { data, error, isLoading } = useNewsItem(id);
-  if (!data) return <Screen />;
   return (
-    <Screen>
+    <Screen analyticsScreenName={`news/${id}`}>
       <Header>
         {isLoading && <SkeletonTitle />}
-        {data.title && <Title>{data.title}</Title>}
+        {data?.title && <Title>{data.title}</Title>}
       </Header>
       <ScrollContent>
         {error && (

components/schedule/layouts/presentation-details-page.tsx

@@ -19,7 +19,7 @@ export function PresentationDetailsPage({ slug }: ScheduleDetailsPageProps) {
   const startTime = ConferenceService.getFormattedTimestamp(data?.startTime ?? '');
   const endTime = ConferenceService.getFormattedTimestamp(data?.endTime ?? '');
   return (
-    <Screen>
+    <Screen analyticsScreenName={`presentation-details/` + slug}>
       <Header corner={data ? <FavoriteButton presentation={data} /> : undefined}>
         {isLoading && <SkeletonTitle />}
         {data && (

config/env.config.ts

@@ -1,3 +1,4 @@
 import Constants from 'expo-constants';
 
 export const API_BASE_URL = Constants.expoConfig?.extra?.apiBaseUrl;
+export const DISABLE_ANALYTICS = Constants.expoConfig?.extra?.disableAnalytics;

services/analytics.service.ts

@@ -0,0 +1,21 @@
+import axios from 'axios';
+
+import { DISABLE_ANALYTICS } from '../config/env.config';
+
+export class AnalyticsService {
+  static sendPageView(location: string) {
+    const eventBody = {
+      name: 'pageview',
+      domain: 'konferenciapp.kir-dev.hu',
+      url: 'com.kir-dev.konferenciapp://localhost/' + location,
+    };
+
+    if (DISABLE_ANALYTICS) {
+      console.debug('Analytics event', eventBody);
+    } else {
+      axios.post('https://visit.kir-dev.hu/api/event', eventBody).catch((error) => {
+        console.error('Error during analytics event: ', error);
+      });
+    }
+  }
+}

utils/analytics.utils.ts

@@ -0,0 +1,10 @@
+import { useEffect } from 'react';
+
+import { AnalyticsService } from '../services/analytics.service';
+
+export function usePageView(location?: string) {
+  useEffect(() => {
+    if (!location) return;
+    AnalyticsService.sendPageView(location);
+  }, []);
+}