feat: add car play analytics

lrtlt · May 2, 2024 · 6e9812b · 6e9812b
1 parent 90582b3
commit 6e9812b
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 8 deletions.
diff --git a/app/car/category/useCarCategoryTemplate.ts b/app/car/category/useCarCategoryTemplate.ts
@@ -7,6 +7,14 @@ import {CategoryListItem} from '../CarPlayContext';
 import useCarPlayCategoryEpisodeStream from './useCarPlayCategoryEpisodeStream';
 import {MediaType} from '../../components/videoComponent/context/PlayerContext';
 import {carPlayNowPlayingTemplate} from '../nowPlaying/createNowPlayingTemplate';
+import {debounce} from 'lodash';
+import Gemius from 'react-native-gemius-plugin';
+import analytics from '@react-native-firebase/analytics';
+
+const sendAnalyticsEvent = debounce((eventName: string) => {
+  Gemius.sendPageViewedEvent(eventName);
+  analytics().logEvent(eventName);
+}, 200);
 
 const useCarCategoryTemplate = (podcast?: CarPlayPodcastItem) => {
   const [template, setTemplate] = useState<ListTemplate>();
@@ -39,6 +47,8 @@ const useCarCategoryTemplate = (podcast?: CarPlayPodcastItem) => {
       setSelectedEpisode(episodes[index]);
     };
     setTemplate(t);
+    sendAnalyticsEvent('carplay_podcast_open_' + podcast?.id);
+
     return () => {
       t.config.onItemSelect = undefined;
     };

diff --git a/app/car/live/createPlayLiveTemplate.ts b/app/car/live/createPlayLiveTemplate.ts
@@ -1,10 +1,12 @@
 import {ListTemplate} from 'react-native-carplay';
 
+export const TEMPLATE_ID_LIVE = 'lrt-list-template-live';
+
 export const carPlayLiveTemplate = new ListTemplate({
   title: 'Tiesiogiai',
   tabTitle: 'Tiesiogiai',
   tabSystemImageName: 'play.square.fill',
-  id: 'lrt-list-template-live',
+  id: TEMPLATE_ID_LIVE,
   trailingNavigationBarButtons: [
     {
       id: 'reload',

diff --git a/app/car/newest/createPlayNewestTemplate.ts b/app/car/newest/createPlayNewestTemplate.ts
@@ -1,10 +1,12 @@
 import {ListTemplate} from 'react-native-carplay';
 
+export const TEMPLATE_ID_NEWEST = 'lrt-list-template-newest';
+
 export const carPlayNewestTemplate = new ListTemplate({
   title: 'Naujausi',
   tabTitle: 'Naujausi',
   tabSystemImageName: 'newspaper.fill',
-  id: 'lrt-list-template-newest',
+  id: TEMPLATE_ID_NEWEST,
   trailingNavigationBarButtons: [
     {
       id: 'reload',

diff --git a/app/car/podcasts/createPlayPodcastsTemplate.ts b/app/car/podcasts/createPlayPodcastsTemplate.ts
@@ -1,11 +1,13 @@
 import {ListTemplate} from 'react-native-carplay';
 
+export const TEMPLATE_ID_PODCASTS = 'lrt-list-template-podcasts';
+
 export const carPlayPodcastsTemplate = new ListTemplate({
   title: 'Radijo laidos',
   tabTitle: 'Laidos',
   // tabSystemImageName: 'folder.fill',
   tabSystemImageName: 'circle.grid.3x3.fill',
-  id: 'lrt-list-template-podcasts',
+  id: TEMPLATE_ID_PODCASTS,
   sections: [
     {
       items: [],

diff --git a/app/car/popular/createPlayPopularTemplate.ts b/app/car/popular/createPlayPopularTemplate.ts
@@ -1,10 +1,12 @@
 import {ListTemplate} from 'react-native-carplay';
 
+export const TEMPLATE_ID_POPULAR = 'lrt-list-template-popular';
+
 export const carPlayPopularTemplate = new ListTemplate({
   title: 'Populiariausi',
   tabTitle: 'Populiariausi',
   tabSystemImageName: 'star.fill',
-  id: 'lrt-list-template-popular',
+  id: TEMPLATE_ID_POPULAR,
   trailingNavigationBarButtons: [
     {
       id: 'reload',

diff --git a/app/car/recommended/createPlayRecommendedTemplate.ts b/app/car/recommended/createPlayRecommendedTemplate.ts
@@ -1,11 +1,13 @@
 import {ListTemplate} from 'react-native-carplay';
 
+export const TEMPLATE_ID_RECOMMENDED = 'lrt-list-template-recommended';
+
 export const carPlayRecommendedTemplate = new ListTemplate({
   title: 'Rekomenduojame',
   tabTitle: 'Siūlome',
   // tabSystemImageName: 'square.grid.3x3.fill',
   tabSystemImageName: 'star.fill',
-  id: 'lrt-list-template-Recommended',
+  id: TEMPLATE_ID_RECOMMENDED,
   trailingNavigationBarButtons: [
     {
       id: 'reload',

diff --git a/app/car/root/createPlayRootTemplate.ts b/app/car/root/createPlayRootTemplate.ts
@@ -6,9 +6,10 @@ export const CATEGORY_POPULAR = 2;
 export const CATEGORY_NEWEST = 3;
 export const CATEGORY_PODCASTS = 4;
 
+export const TEMPLATE_ID_ROOT = 'lrt-root-template';
 export const carPlayRootTemplate = new ListTemplate({
   title: 'LRT.lt',
-  id: 'lrt-root-template',
+  id: TEMPLATE_ID_ROOT,
   backButtonHidden: true,
   // tabTitle: 'Tab title',
   // tabImage: require('./star.png'),

diff --git a/app/car/root/useCarPlayRootTemplate.ts b/app/car/root/useCarPlayRootTemplate.ts
@@ -5,19 +5,52 @@ import useCarLiveTemplate from '../live/useCarLiveTemplate';
 import useCarNewestTemplate from '../newest/useCarNewestTemplate';
 import useCarRecommendedTemplate from '../recommended/useCarRecommendedTemplate';
 import useCarPodcastsTemplate from '../podcasts/useCarPodcastsTemplate';
+import {TEMPLATE_ID_ROOT} from './createPlayRootTemplate';
+import {TEMPLATE_ID_LIVE} from '../live/createPlayLiveTemplate';
+import analytics from '@react-native-firebase/analytics';
+import Gemius from 'react-native-gemius-plugin';
+import {TEMPLATE_ID_NEWEST} from '../newest/createPlayNewestTemplate';
+import {TEMPLATE_ID_PODCASTS} from '../podcasts/createPlayPodcastsTemplate';
+import {TEMPLATE_ID_RECOMMENDED} from '../recommended/createPlayRecommendedTemplate';
+import {TEMPLATE_ID_POPULAR} from '../popular/createPlayPopularTemplate';
+import {debounce} from 'lodash';
+
+const sendAnalyticsEvent = debounce((eventName: string) => {
+  Gemius.sendPageViewedEvent(eventName);
+  analytics().logEvent(eventName);
+}, 200);
 
 const useCarPlayRootTemplate = (isConnected: boolean) => {
   const [template] = useState<TabBarTemplate>(
     new TabBarTemplate({
       title: 'LRT',
-      id: 'root-tab-bar',
+      id: TEMPLATE_ID_ROOT,
       templates: [
         useCarRecommendedTemplate(isConnected),
         useCarLiveTemplate(isConnected),
         useCarNewestTemplate(isConnected),
         useCarPodcastsTemplate(isConnected),
       ],
-      onTemplateSelect: (_template, _params) => {},
+
+      onTemplateSelect: (template, _params) => {
+        switch (template.config.id) {
+          case TEMPLATE_ID_RECOMMENDED:
+            sendAnalyticsEvent('carplay_recommended_open');
+            break;
+          case TEMPLATE_ID_LIVE:
+            sendAnalyticsEvent('carplay_live_open');
+            break;
+          case TEMPLATE_ID_NEWEST:
+            sendAnalyticsEvent('carplay_newest_open');
+            break;
+          case TEMPLATE_ID_PODCASTS:
+            sendAnalyticsEvent('carplay_podcasts_open');
+            break;
+          case TEMPLATE_ID_POPULAR:
+            sendAnalyticsEvent('carplay_popular_open');
+            break;
+        }
+      },
     }),
   );
 

diff --git a/app/car/useCarPlayController.ts b/app/car/useCarPlayController.ts
@@ -2,6 +2,8 @@ import {useEffect, useState} from 'react';
 import {CarPlay} from 'react-native-carplay';
 import {CarPlayContextType} from './CarPlayContext';
 import useCarPlayRootTemplate from './root/useCarPlayRootTemplate';
+import Gemius from 'react-native-gemius-plugin';
+import analytics from '@react-native-firebase/analytics';
 
 type ReturnType = CarPlayContextType;
 
@@ -20,11 +22,15 @@ const useCarPlayController = (): ReturnType => {
   useEffect(() => {
     CarPlay.emitter.addListener('didConnect', () => {
       console.log('useCarPlayController: CarPlay connected');
+      Gemius.sendPageViewedEvent('carplay_connected');
+      analytics().logEvent('carplay_connected');
       setIsConnected(true);
     });
 
     CarPlay.emitter.addListener('didDisconnect', () => {
       console.log('useCarPlayController: CarPlay disconnected');
+      Gemius.sendPageViewedEvent('carplay_disconnected');
+      analytics().logEvent('carplay_disconnected');
       setIsConnected(false);
     });
     CarPlay.emitter.addListener('backButtonPressed', () => {