add amplitude analytics

Author: medyo

package.json

@@ -3,6 +3,7 @@
   "version": "1.1.0",
   "private": false,
   "dependencies": {
+    "@amplitude/analytics-browser": "^1.5.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

src/App.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext, useRef } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import './App.css'
 import ConfigurationContext from './configuration/ConfigurationContext'
 import Footer from './components/Footer'
@@ -10,6 +10,7 @@ import ScrollCardsNavigator from './components/ScrollCardsNavigator'
 import AppContentLayout from './components/AppContentLayout'
 import 'react-contexify/dist/ReactContexify.css'
 import PreferencesContext from './preferences/PreferencesContext'
+import { initAnalytics } from './utils/Analytics'
 
 function App() {
   const { marketingBannerConfig = {}, feedbackWidget } = useContext(ConfigurationContext)
@@ -18,6 +19,7 @@ function App() {
   const { dispatcher, ...state } = useContext(PreferencesContext)
 
   useEffect(() => {
+    initAnalytics()
     trackPageView('home')
   }, [])
 

src/Constants.js

@@ -34,6 +34,8 @@ const APP = {
   dataSourcesLink: 'https://www.hackertab.dev/data-sources',
   changeLogLink: 'https://api.github.com/repos/medyo/hackertab.dev/releases',
 }
+export const ANALYTICS_ENDPOINT = 'https://api.hackertab.dev/analytics'
+export const ANALYTICS_SDK_KEY = '9662c93f91473ba6e96711b22e0a367d'
 
 export const LOCAL_CONFIGURATION = {
   supportedTags: [], // Loaded remotly

src/preferences/AppReducer.js

@@ -1,7 +1,12 @@
 
 import { LS_PREFERENCES_KEY } from '../Constants';
 import AppStorage from '../services/localStorage';
-
+import {
+  identifyUserLanguages,
+  identifyUserCards,
+  identifyListingMode,
+  identifyUserTheme,
+} from '../utils/Analytics'
 
 const AppReducer = (state, action) => {
   let newState = { ...state }
@@ -10,13 +15,15 @@ const AppReducer = (state, action) => {
 
   switch (action.type) {
     case 'setUserSelectedTags':
+      identifyUserLanguages(value.map((tag) => tag.value))
       // check duplication.
       newState = {
         ...newState,
         userSelectedTags: value,
       }
       break
     case 'setCards':
+      identifyUserCards(value.map((card) => card.value))
       newState = { ...state, cards: value }
       break
     case 'setChangelogMeta':
@@ -27,6 +34,7 @@ const AppReducer = (state, action) => {
       if (!theme) {
         theme = state.theme === 'dark' ? 'light' : 'dark'
       }
+      identifyUserTheme(theme)
       newState = { ...newState, theme }
       break
     case 'setOpenLinksNewTab':
@@ -36,6 +44,7 @@ const AppReducer = (state, action) => {
       }
       break
     case 'changelistingMode':
+      identifyListingMode(value)
       newState = { ...newState, listingMode: value }
       break
     case 'bookmarkItem':

src/utils/Analytics.js

@@ -1,6 +1,14 @@
 import AppStorage from '../services/localStorage';
 import { LS_ANALYTICS_ID_KEY } from '../Constants';
+import { init, track, Identify, identify } from '@amplitude/analytics-browser'
+import { ANALYTICS_SDK_KEY, ANALYTICS_ENDPOINT } from '../Constants'
 
+const initAnalytics = () => {
+  init(ANALYTICS_SDK_KEY, getRandomUserId(), {
+    disableCookies: true,
+    serverUrl: ANALYTICS_ENDPOINT,
+  })
+}
 const trackPageScroll = (direction) => {
   trackEvent('Pages', 'Scroll', direction)
 }
@@ -41,6 +49,29 @@ const trackAddCard = (card) => {
   trackEvent('Card', 'Add', card)
 }
 
+const identifyUserLanguages = (languages) => {
+  const identity = new Identify()
+  identity.set('Languages', languages)
+  identify(identity)
+}
+
+const identifyListingMode = (listingMode) => {
+  const identity = new Identify()
+  identity.set('ListingMode', listingMode)
+  identify(identity)
+}
+const identifyUserCards = (cards) => {
+  const identity = new Identify()
+  identity.set('Sources', cards)
+  identify(identity)
+}
+
+const identifyUserTheme = (theme) => {
+  const identity = new Identify()
+  identity.set('Theme', theme)
+  identify(identity)
+}
+
 const trackRemoveCard = (card) => {
   trackEvent('Card', 'Remove', card)
 }
@@ -124,10 +155,9 @@ const trackEvent = (category, action, label) => {
     payload.append('el', label.capitalize())
   }
 
-  try {
-    var manifestData = chrome.runtime.getManifest()
-    payload.append('cd1', manifestData.version)
-  } catch (e) {}
+  payload.append('cd1', getAppVersion())
+
+  track(`${category.toLowerCase()}_${action.toLowerCase()}`)
 
   if (process.env.NODE_ENV !== 'production') {
     console.log('Analytics debug payload', payload.toString())
@@ -137,28 +167,45 @@ const trackEvent = (category, action, label) => {
   navigator.sendBeacon('https://www.google-analytics.com/collect', payload.toString())
 }
 
+const getAppVersion = () => {
+  try {
+    var manifestData = chrome.runtime.getManifest()
+    return manifestData.version
+  } catch (e) {
+    return '0.0'
+  }
+}
+/**
+ * Generates a random user id
+ */
 const getRandomUserId = () => {
   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()}`
     AppStorage.setItem(LS_ANALYTICS_ID_KEY, newUserId)
     userId = newUserId
   }
   return userId
 }
+
 Object.assign(String.prototype, {
   capitalize() {
     return this.charAt(0).toUpperCase() + this.slice(1)
   },
 })
 
 export {
+  initAnalytics,
   trackPageView,
   trackThemeChange,
   trackOpenLinkFrom,
   trackAddLanguage,
   trackRemoveLanguage,
   trackAddCard,
+  identifyUserLanguages,
+  identifyUserCards,
+  identifyListingMode,
+  identifyUserTheme,
   trackRemoveCard,
   trackOpenLinksNewTab,
   trackBookmarkFrom,

yarn.lock

@@ -2,6 +2,52 @@
 # yarn lockfile v1
 
 
+"@amplitude/analytics-browser@^1.5.3":
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/@amplitude/analytics-browser/-/analytics-browser-1.5.3.tgz#d9ff16c2a9d5a1c906f92754d0aef1bc019971ac"
+  integrity sha512-/rZneKmxPqBFdIY+DBvqPCs2xZkq4TYz0ZEq5/7Ov6mL5Jxq4kmmd6p0l7o8kvlXwDXkYdnUVYQaMS93eBF3CQ==
+  dependencies:
+    "@amplitude/analytics-client-common" "^0.2.4"
+    "@amplitude/analytics-core" "^0.9.4"
+    "@amplitude/analytics-types" "^0.10.3"
+    "@amplitude/ua-parser-js" "^0.7.31"
+    tslib "^2.3.1"
+
+"@amplitude/analytics-client-common@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@amplitude/analytics-client-common/-/analytics-client-common-0.2.4.tgz#6304ca9ea1dc142593685f6b33b41108035293b1"
+  integrity sha512-MMeb5ZG57xKmmegnyrYNzkAukTTQlwY1AsXTTUPZb9+m+cVESU7Xidtto9W8/crf9p7TEcVX8qK8GNsB2xr/+A==
+  dependencies:
+    "@amplitude/analytics-connector" "^1.4.5"
+    "@amplitude/analytics-core" "^0.9.4"
+    "@amplitude/analytics-types" "^0.10.3"
+    tslib "^2.3.1"
+
+"@amplitude/analytics-connector@^1.4.5":
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/@amplitude/analytics-connector/-/analytics-connector-1.4.5.tgz#07e9375101332bd8b6f15e39e70f31f287e87ad0"
+  integrity sha512-ELAP6ivg+13uSk+TOirGZE/92M+tTbeiQ/i7eXgDO4Hiy00Abf/UxO/rp9WovtxCyeFYTILrujEYxPv5cRQmFw==
+  dependencies:
+    "@amplitude/ua-parser-js" "0.7.31"
+
+"@amplitude/analytics-core@^0.9.4":
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/@amplitude/analytics-core/-/analytics-core-0.9.4.tgz#b7f8e0a558291d8347cd7fbe5b19660b1421ceed"
+  integrity sha512-DUtWTIm6b7LMCC5Cde6hSjrye0MV7oz9rNmU5JrwaVepLIfjhVFm8vPdrIlIxkzVhrnvMn/dP7CTCz9EFJozmA==
+  dependencies:
+    "@amplitude/analytics-types" "^0.10.3"
+    tslib "^2.3.1"
+
+"@amplitude/analytics-types@^0.10.3":
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/@amplitude/analytics-types/-/analytics-types-0.10.3.tgz#608094a2a9e93d74952200486f9c7fed25cbf851"
+  integrity sha512-ZzMcLk4vM0ZLKfX8Vo1GqTKnyva3lH6EJzZ2pEjoAvoZKvkOM9TUpcn35qRiLyVTsMgiBi7G4SR+1T57gaQP9w==
+
+"@amplitude/ua-parser-js@0.7.31", "@amplitude/ua-parser-js@^0.7.31":
+  version "0.7.31"
+  resolved "https://registry.yarnpkg.com/@amplitude/ua-parser-js/-/ua-parser-js-0.7.31.tgz#749bf7cb633cfcc7ff3c10805bad7c5f6fbdbc61"
+  integrity sha512-+z8UGRaj13Pt5NDzOnkTBy49HE2CX64jeL0ArB86HAtilpnfkPB7oqkigN7Lf2LxscMg4QhFD7mmCfedh3rqTg==
+
 "@babel/code-frame@7.10.4", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.5.5":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
@@ -11531,6 +11577,11 @@ tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2.3.1:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tsutils@^3.17.1:
   version "3.17.1"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"