Refactor hotjar setup

Author: arifszn

README.md

@@ -146,6 +146,10 @@ module.exports = {
     // GA3 tracking id/GA4 tag id
     id: '' // UA-XXXXXXXXX-X | G-XXXXXXXXXX
   },
+  hotjar: {
+    id: '',
+    snippetVersion : 6 
+  },
   themeConfig: {
     default: 'light',
 
@@ -240,14 +244,15 @@ Besides tracking visitors, ezFolio will track click events on projects and blog
 
 ### Hotjar
 
-ezProfile supports hotjar. If you do not want to use Hotjar, comment out the id property.
+ezProfile supports hotjar. If you do not want to use Hotjar, keep the <code>id</code> empty.
 
 ```js
 // config.js
 module.exports = {
   // ...
   hotjar: {
-    //id: 
+    id: '',
+    snippetVersion : 6 
   },
 }
 ```

package-lock.json

@@ -87,8 +87,8 @@ module.exports = {
         id: 'G-WLLB5E14M6' // Please remove this and use your own tag id
     },
     hotjar: {
-        id: 1234567, //  Please remove this and use your own id
-        snippetVersion : 6 // hotjar snippet version, defaults to 6
+        id: '2617601', //  Please remove this and use your own id
+        snippetVersion : 6
     },
     themeConfig: {
         default: 'light',

src/config.js

@@ -1,5 +1,6 @@
 import config from "../config";
 import colors from './colors.json';
+import { hotjar } from 'react-hotjar';
 
 export const getInitialTheme = () => {
     if (config.themeConfig.disableSwitch) {
@@ -67,4 +68,12 @@ export const isThemeDarkish = (theme) => {
     } else {
         return false;
     }
+}
+
+export const setupHotjar = () => {
+    if (config.hotjar?.id) {
+        let snippetVersion = config.hotjar?.snippetVersion ? config.hotjar?.snippetVersion : 6;
+        
+        hotjar.initialize(config.hotjar.id, snippetVersion);
+    }
 }

src/helpers/setupHotjar.js

@@ -6,7 +6,7 @@ import reportWebVitals from './reportWebVitals';
 import { HelmetProvider } from 'react-helmet-async';
 import { ThemeProvider } from './contexts/ThemeContext';
 import { LoadingProvider } from './contexts/LoadingContext';
-import { setupHotjar } from './helpers/setupHotjar';
+import { setupHotjar } from './helpers/utils';
 
 ReactDOM.render(
     <React.StrictMode>