Merge pull request #9 from anton-gustafsson/add-hotjar

Add hotjar support

README.md

@@ -238,6 +238,19 @@ Besides tracking visitors, ezFolio will track click events on projects and blog
 <br/>
 ![Event](https://www.arifszn.com/assets/img/hosted/ezprofile/event.png)
 
+### Hotjar
+
+ezProfile supports hotjar. If you do not want to use Hotjar, comment out the id property.
+
+```js
+// config.js
+module.exports = {
+  // ...
+  hotjar: {
+    //id: 
+  },
+}
+```
 
 ### Meta Tags
 

package-lock.json

@@ -5,6 +5,7 @@
     "requires": true,
     "packages": {
         "": {
+            "name": "ezprofile",
             "version": "1.0.1",
             "license": "Apache-2.0",
             "dependencies": {
@@ -21,6 +22,7 @@
                 "react": "^17.0.2",
                 "react-dom": "^17.0.2",
                 "react-helmet-async": "^1.1.0",
+                "react-hotjar": "^3.0.1",
                 "react-icons": "^4.2.0",
                 "react-scripts": "4.0.3",
                 "sass": "^1.38.0",
@@ -16279,6 +16281,11 @@
                 "react-dom": "^16.6.0 || ^17.0.0"
             }
         },
+        "node_modules/react-hotjar": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/react-hotjar/-/react-hotjar-3.0.1.tgz",
+            "integrity": "sha512-3ZiZQhbsisJkK+iUlPVVTa7hUJXVQ/o/3+Bzocpjb2+of8lMh7uiDXLsSKxD6T4J3JR9sZ+L3v9CYyUgrp1R8g=="
+        },
         "node_modules/react-icons": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz",
@@ -34472,6 +34479,11 @@
                 "shallowequal": "^1.1.0"
             }
         },
+        "react-hotjar": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/react-hotjar/-/react-hotjar-3.0.1.tgz",
+            "integrity": "sha512-3ZiZQhbsisJkK+iUlPVVTa7hUJXVQ/o/3+Bzocpjb2+of8lMh7uiDXLsSKxD6T4J3JR9sZ+L3v9CYyUgrp1R8g=="
+        },
         "react-icons": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz",

package.json

@@ -24,6 +24,7 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-helmet-async": "^1.1.0",
+        "react-hotjar": "^3.0.1",
         "react-icons": "^4.2.0",
         "react-scripts": "4.0.3",
         "sass": "^1.38.0",

src/config.js

@@ -86,6 +86,10 @@ module.exports = {
         // GA3 tracking id/GA4 tag id UA-XXXXXXXXX-X | G-XXXXXXXXXX
         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
+    },
     themeConfig: {
         default: 'light',
 

src/helpers/setupHotjar.js

@@ -0,0 +1,10 @@
+import { hotjar } from 'react-hotjar';
+import config from "./../config";
+
+export function setupHotjar() {
+    if (config.hotjar?.id) {
+        let snippetVersion = config.hotjar?.snippetVersion ? config.hotjar?.snippetVersion : 6;
+        
+        hotjar.initialize(config.hotjar.id, snippetVersion);
+    }
+}

src/index.js

@@ -6,6 +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';
 
 ReactDOM.render(
     <React.StrictMode>
@@ -21,3 +22,4 @@ ReactDOM.render(
 );
 
 reportWebVitals();
+setupHotjar();