track scroll direction

Author: medyo

src/components/ScrollCardsNavigator.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useContext, useLayoutEffect, useRef } from
 import { FiChevronLeft, FiChevronRight } from 'react-icons/fi'
 import { APP } from '../Constants'
 import PreferencesContext from '../preferences/PreferencesContext'
+import { trackPageScroll } from '../utils/Analytics'
 
 function ScrollCardsNavigator() {
   const { cards } = useContext(PreferencesContext)
@@ -27,6 +28,7 @@ function ScrollCardsNavigator() {
   useLayoutEffect(() => {
     scrollBarContainer.current = document.querySelector('.AppContent')
   }, [])
+
   useEffect(() => {
     scrollBarContainer.current.addEventListener('scroll', handleScroll, true)
     window.addEventListener('keydown', handleKeyboardKeys)
@@ -45,6 +47,7 @@ function ScrollCardsNavigator() {
     if (!scrollBarContainer.current) {
       return
     }
+    trackPageScroll(direction)
     const { offsetWidth, scrollLeft } = scrollBarContainer.current.children[0]
     let extraPadding = 32 // Should be calculated dynamically
 

src/utils/Analytics.js

@@ -1,115 +1,112 @@
 import AppStorage from '../services/localStorage';
 import { LS_ANALYTICS_ID_KEY } from '../Constants';
 
+const trackPageScroll = (direction) => {
+  trackEvent('Pages', 'Scroll', direction)
+}
+
 const trackPageView = (pageName) => {
-  trackEvent("Pages", "Open", pageName)
+  trackEvent('Pages', 'Open', pageName)
 }
 
 const trackThemeChange = (theme) => {
-  trackEvent("Theme", "Apply", theme)
+  trackEvent('Theme', 'Apply', theme)
 }
 
 const trackOpenLinkFrom = (dataSource) => {
-  trackEvent("Link", "Open", dataSource)
+  trackEvent('Link', 'Open', dataSource)
 }
 
 const trackListingModeChange = (listingMode) => {
-  trackEvent("ListingMode", listingMode)
+  trackEvent('ListingMode', listingMode)
 }
 
 const trackAddLanguage = (language) => {
-  trackEvent("Language", "Add", language)
+  trackEvent('Language', 'Add', language)
 }
 
 const trackRemoveLanguage = (card) => {
-  trackEvent("Language", "Remove", card)
+  trackEvent('Language', 'Remove', card)
 }
 
 const trackAddCard = (card) => {
-  trackEvent("Card", "Add", card)
+  trackEvent('Card', 'Add', card)
 }
 
 const trackRemoveCard = (card) => {
-  trackEvent("Card", "Remove", card)
+  trackEvent('Card', 'Remove', card)
 }
 
 const trackOpenLinksNewTab = (enabled) => {
   if (enabled) {
-    trackEvent("NewTab", "Enable")
+    trackEvent('NewTab', 'Enable')
   } else {
-    trackEvent("NewTab", "Disable")
+    trackEvent('NewTab', 'Disable')
   }
-
 }
 
 const trackBookmarkFrom = (dataSource) => {
-  trackEvent("Bookmarks", "Add", dataSource)
+  trackEvent('Bookmarks', 'Add', dataSource)
 }
 
 const trackUnbookmarkFrom = (dataSource) => {
-  trackEvent("Bookmarks", "Remove", dataSource)
+  trackEvent('Bookmarks', 'Remove', dataSource)
 }
 
 const trackReposLanguageChange = (language) => {
-  trackEvent("Repos", "ChangeLanguage", language)
+  trackEvent('Repos', 'ChangeLanguage', language)
 }
 
 const trackReposDateRangeChange = (dateRange) => {
-  trackEvent("Repos", "ChangeDateRange", dateRange)
+  trackEvent('Repos', 'ChangeDateRange', dateRange)
 }
 
 const trackEvent = (category, action, label) => {
-
   if (!process.env.REACT_APP_ANALYTICS_ID) {
-    console.log("Missing analytics ID")
+    console.log('Missing analytics ID')
     return
   }
 
   let userId = AppStorage.getItem(LS_ANALYTICS_ID_KEY)
   if (!userId) {
-    let newUserId = `${new Date().getTime()}${Math.random()}`  // Random User Id
+    let newUserId = `${new Date().getTime()}${Math.random()}` // Random User Id
     AppStorage.setItem(LS_ANALYTICS_ID_KEY, newUserId)
     userId = newUserId
   }
 
   const payload = new URLSearchParams([
-    ["v", "1"],
-    ["t", "event"],
-    ["tid", process.env.REACT_APP_ANALYTICS_ID],
-    ["cid", userId],
-    ["ec", category],
-    ["ea", action],
-    ["ul", navigator.language],
-    ["ua", navigator.userAgent],
+    ['v', '1'],
+    ['t', 'event'],
+    ['tid', process.env.REACT_APP_ANALYTICS_ID],
+    ['cid', userId],
+    ['ec', category],
+    ['ea', action],
+    ['ul', navigator.language],
+    ['ua', navigator.userAgent],
   ])
 
   if (label) {
-    payload.append("el", label.capitalize())
+    payload.append('el', label.capitalize())
   }
 
   try {
-    var manifestData = chrome.runtime.getManifest();
-    payload.append("cd1", manifestData.version)
-  } catch(e){}
-  
+    var manifestData = chrome.runtime.getManifest()
+    payload.append('cd1', manifestData.version)
+  } catch (e) {}
 
   if (process.env.NODE_ENV !== 'production') {
-    console.log("Analytics debug payload", payload.toString())
+    console.log('Analytics debug payload', payload.toString())
     return
   }
 
-  navigator.sendBeacon(
-    "https://www.google-analytics.com/collect",
-    payload.toString()
-  )
-
+  navigator.sendBeacon('https://www.google-analytics.com/collect', payload.toString())
 }
 
 Object.assign(String.prototype, {
   capitalize() {
     return this.charAt(0).toUpperCase() + this.slice(1)
-  }
-});
+  },
+})
 
 export {
   trackPageView,
@@ -124,5 +121,6 @@ export {
   trackUnbookmarkFrom,
   trackReposLanguageChange,
   trackReposDateRangeChange,
-  trackListingModeChange
+  trackListingModeChange,
+  trackPageScroll,
 }