track dnd events

Author: medyo

src/App.js

@@ -38,16 +38,19 @@ function App() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onboardingCompleted, firstSeenDate])
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     document.documentElement.style.setProperty('--max-visible-cards', maxVisibleCards)
   }, [maxVisibleCards])
 
   useEffect(() => {
     setupAnalytics()
     setupIdentification()
-    trackPageView('home')
   }, [])
 
+  useEffect(() => {
+    trackPageView('home', isDNDModeActive())
+  }, [DNDDurarion, isDNDModeActive])
+
   const callback = (entries) => {
     entries.forEach((entry) => {
       if (!entry.isIntersecting) {

src/components/Layout/Header.tsx

@@ -8,7 +8,7 @@ import { SearchBar } from 'src/components/Elements/SearchBar'
 import { UserTags } from 'src/components/Elements/UserTags'
 import { Changelog } from 'src/features/changelog'
 import { SettingsModal } from 'src/features/settings'
-import { identifyUserTheme, trackThemeSelect } from 'src/lib/analytics'
+import { identifyUserTheme, trackDNDDisable, trackThemeSelect } from 'src/lib/analytics'
 import { useBookmarks } from 'src/stores/bookmarks'
 import { useUserPreferences } from 'src/stores/preferences'
 
@@ -75,6 +75,7 @@ export const Header = ({
   }
 
   const onUnpauseClicked = () => {
+    trackDNDDisable()
     setDNDDuration(0)
   }
 

src/features/settings/components/DNDSettings.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import Select, { SingleValue } from 'react-select'
+import { trackDNDEnable } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 
 type DndOption = {
@@ -36,6 +37,7 @@ export const DNDSettings = ({ setShowSettings }: DNDSettingsProps) => {
       setDNDDuration(futureDate.getTime())
     }
 
+    trackDNDEnable(selectedDNDDuration)
     setShowSettings(false)
   }
 

src/lib/analytics.ts

@@ -20,6 +20,7 @@ enum Objects {
   MARKETING_CAMPAIGN = 'Marketing Campaign',
   ONBOARDING = 'Onboarding',
   RSS = 'Rss',
+  DO_NOT_DISTURB = 'DND',
 }
 
 enum Verbs {
@@ -38,7 +39,9 @@ enum Verbs {
   FINISH = 'Finish',
   SKIP = 'Skip',
   DRAG = 'Drag',
-  Change = 'Change',
+  CHANGE = 'Change',
+  ENABLE = "Enable",
+  DISABLE = "Disable"
 }
 
 export enum Attributes {
@@ -62,6 +65,7 @@ export enum Attributes {
   CAMPAIGN_ID = 'Campaign Id',
   OCCUPATION = 'Occupation',
   MAX_VISIBLE_CARDS = 'Max Visible Cards',
+  DURATION = 'DURATION',
 }
 
 const _SEP_ = ' '
@@ -100,11 +104,13 @@ export const setupIdentification = () => {
   }
 }
 
-export const trackPageView = (pageName: string) => {
+export const trackPageView = (pageName: string, dndModeActive: boolean = false) => {
   trackEvent({
     object: Objects.PAGE,
     verb: Verbs.VIEW,
-    attributes: { [Attributes.PAGE_NAME]: pageName },
+    attributes: { 
+      [Attributes.PAGE_NAME]: pageName,
+      [Objects.DO_NOT_DISTURB]: dndModeActive ? "on" : "off" },
   })
 }
 
@@ -298,11 +304,26 @@ export const trackPageDrag = () => {
 export const trackMaxVisibleCardsChange = (maxVisibleCards: number) => {
   trackEvent({
     object: Objects.CARD,
-    verb: Verbs.Change,
+    verb: Verbs.CHANGE,
     attributes: {[Attributes.MAX_VISIBLE_CARDS]: maxVisibleCards}
   })
 }
 
+export const trackDNDEnable = (duration: number | "always") => {
+  trackEvent({
+    object: Objects.DO_NOT_DISTURB,
+    verb: Verbs.ENABLE,
+    attributes: {[Attributes.DURATION]: duration}
+  })
+}
+
+export const trackDNDDisable = () => {
+  trackEvent({
+    object: Objects.DO_NOT_DISTURB,
+    verb: Verbs.DISABLE
+  })
+}
+
 // Identification
 
 export const identifyUserLanguages = (languages: string[]) => {