From 0424045f55fbe1afcd0ff25da27fae3934a554c2 Mon Sep 17 00:00:00 2001
From: Anton Jacobsson <ajacobsson98@gmail.com>
Date: Wed, 22 Sep 2021 22:10:14 +0200
Subject: [PATCH] feat(all): add hotjar

---
 README.md                  | 13 +++++++++++++
 package-lock.json          | 12 ++++++++++++
 package.json               |  1 +
 src/config.js              |  4 ++++
 src/helpers/setupHotjar.js | 10 ++++++++++
 src/index.js               |  2 ++
 6 files changed, 42 insertions(+)
 create mode 100644 src/helpers/setupHotjar.js

diff --git a/README.md b/README.md
index 2d354a3..7890ee7 100644
--- a/README.md
+++ b/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
 
diff --git a/package-lock.json b/package-lock.json
index 3dfc467..8faa24c 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index b9a29b7..f9dc1b6 100644
--- a/package.json
+++ b/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",
diff --git a/src/config.js b/src/config.js
index 1fbcec1..a047949 100644
--- a/src/config.js
+++ b/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',
 
diff --git a/src/helpers/setupHotjar.js b/src/helpers/setupHotjar.js
new file mode 100644
index 0000000..9ca55fd
--- /dev/null
+++ b/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);
+    }
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 24d5e40..9ff31db 100644
--- a/src/index.js
+++ b/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();