Merge pull request #268 from edx/trhodes/ent-3829

feat: enable hotjar metrics

.env.development

@@ -28,3 +28,6 @@ FEATURE_ENROLL_WITH_CODES='true'
 FEATURE_LANGUAGE_FACET='true'
 FEATURE_PROGRAM_TITLES_FACET='true'
 SHOW_MAINTENANCE_ALERT=''
+HOTJAR_APP_ID=2426588
+HOTJAR_VERSION=6
+HOTJAR_DEBUG=true

package.json

@@ -45,6 +45,7 @@
     "react-router-redux": "5.0.0-alpha.9",
     "react-transition-group": "4.4.1",
     "react-truncate": "2.4.0",
+    "react-use-hotjar": "^1.1.2",
     "redux": "4.0.5",
     "redux-devtools-extension": "2.13.8",
     "redux-logger": "3.0.6",

src/components/app/App.jsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Switch } from 'react-router-dom';
+import useHotjar from 'react-use-hotjar';
 import { AppProvider, AuthenticatedPageRoute, PageRoute } from '@edx/frontend-platform/react';
 
 import NotFoundPage from '../NotFoundPage';
@@ -15,6 +16,12 @@ import { LicenseActivationPage } from '../license-activation';
 import store from '../../store';
 
 export default function App() {
+  if (process.env.HOTJAR_APP_ID) {
+    const { initHotjar } = useHotjar();
+    useEffect(() => {
+      initHotjar(process.env.HOTJAR_APP_ID, process.env.HOTJAR_VERSION, process.env.HOTJAR_DEBUG);
+    }, [initHotjar]);
+  }
   return (
     <AppProvider store={store}>
       <Switch>