Merge pull request #14 from ianpherbert/hotjar

install hotjar

.github/workflows/deploy-main.yml

@@ -30,6 +30,7 @@ jobs:
             VITE_MAPBOX_STYLE=${{ secrets.VITE_MAPBOX_STYLE }}
             VITE_TRAVEL_ENDPOINT=${{ secrets.VITE_TRAVEL_ENDPOINT_PROD }}
             VITE_UNSPLASH_CLIENT_ID=${{ secrets.VITE_UNSPLASH_CLIENT_ID }}
+            VITE_HOTJAR_ID=${{ secrets.VITE_HOTJAR_ID }}
             VITE_ENV=PROD
 
   prepare-deployment-package:

package.json

@@ -12,8 +12,9 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@hotjar/browser": "^1.0.9",
     "@mui/icons-material": "^5.15.3",
-    "@mui/material": "^5.15.3",
+    "@mui/material": "^5.15.14",
     "@mui/x-date-pickers": "^6.19.5",
     "@reduxjs/toolkit": "^2.0.1",
     "date-fns": "^3.3.1",

src/main.tsx

@@ -11,6 +11,8 @@ import store from './redux/store.ts'
 import TestPage from './pages/TestPage.tsx'
 import ExplorePage from './pages/ExplorePage.tsx'
 import GdprPage from './pages/GdprPage.tsx'
+import Hotjar from '@hotjar/browser';
+import { environment, hotjarSiteId, hotjarVersion } from './variables.ts'
 
 export const endPoints = {
   home: { entrypoint: "" },
@@ -36,6 +38,11 @@ const router = createBrowserRouter([
   },
 ]);
 
+
+if (environment === "PROD") {
+  Hotjar.init(hotjarSiteId, hotjarVersion);
+}
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <Provider store={store}>

src/variables.ts

@@ -5,4 +5,6 @@ export const travelEndpoint = import.meta.env.VITE_TRAVEL_ENDPOINT;
 export const unsplashClientId = import.meta.env.VITE_UNSPLASH_CLIENT_ID;
 export const unsplashBaseUrl = "https://api.unsplash.com";
 export const environment = import.meta.env.VITE_ENV;
-export const GDPRCookie = "gdprConsent"
+export const GDPRCookie = "gdprConsent"
+export const hotjarSiteId = import.meta.env.VITE_HOTJAR_ID ?? "";
+export const hotjarVersion = 6;