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

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