From e91c8d9df0689ddc6c36090022b10601515bd6b2 Mon Sep 17 00:00:00 2001
From: Ariful Alam <swazan.arif@gmail.com>
Date: Sun, 20 Mar 2022 00:40:59 +0600
Subject: [PATCH] Setup hotjar integration

---
 src/App.jsx             |  6 +++++-
 src/ezprofile.config.js |  4 ++++
 src/helpers/utils.jsx   | 11 +++++++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index 74dc688..a652a3a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -12,7 +12,7 @@ import Experience from './components/experience';
 import Education from './components/education';
 import Project from './components/project';
 import Blog from './components/blog';
-import { getInitialTheme } from './helpers/utils';
+import { getInitialTheme, setupHotjar } from './helpers/utils';
 
 function App() {
   const [theme, setTheme] = useState(getInitialTheme());
@@ -28,6 +28,10 @@ function App() {
     }
   }, [theme]);
 
+  useEffect(() => {
+    setupHotjar();
+  }, []);
+
   const loadData = useCallback(() => {
     axios
       .get(`https://api.github.com/users/${config.github.username}`)
diff --git a/src/ezprofile.config.js b/src/ezprofile.config.js
index ab744f8..3c31ba5 100644
--- a/src/ezprofile.config.js
+++ b/src/ezprofile.config.js
@@ -86,6 +86,10 @@ const config = {
     // GA3 tracking id/GA4 tag id UA-XXXXXXXXX-X | G-XXXXXXXXXX
     id: 'G-WLLB5E14M6', // Please remove this and use your own tag id or keep it empty
   },
+  hotjar: {
+    id: '2617601', //  Please remove this and use your own id or keep it empty
+    snippetVersion: 6,
+  },
   themeConfig: {
     default: 'light',
 
diff --git a/src/helpers/utils.jsx b/src/helpers/utils.jsx
index 6c7e0fe..1d20a58 100644
--- a/src/helpers/utils.jsx
+++ b/src/helpers/utils.jsx
@@ -1,5 +1,6 @@
 import config from '../ezprofile.config';
 import colors from '../data/colors.json';
+import { hotjar } from 'react-hotjar';
 
 export const getInitialTheme = () => {
   if (config.themeConfig.disableSwitch) {
@@ -85,3 +86,13 @@ export const isThemeDarkish = (theme) => {
     return false;
   }
 };
+
+export const setupHotjar = () => {
+  if (config.hotjar?.id) {
+    let snippetVersion = config.hotjar?.snippetVersion
+      ? config.hotjar?.snippetVersion
+      : 6;
+
+    hotjar.initialize(config.hotjar.id, snippetVersion);
+  }
+};