Merge pull request #34 from OpenUpSA/feature/add-hotjar

Feature/add hotjar
OpenUpSA · Feb 19, 2025 · dd21109 · dd21109
2 parents 0c87332 + 5664df5
commit dd21109
Show file tree

Hide file tree

Showing 8 changed files with 166 additions and 80 deletions.
diff --git a/package.json b/package.json
@@ -3,8 +3,8 @@
   "version": "1.0.0",
   "license": "MIT",
   "scripts": {
-    "dev": "parcel src/index.html src/attendance/index.html src/overview/index.html && npm run copy",
-    "build": "parcel build src/index.html src/attendance/index.html src/overview/index.html && npm run copy",
+    "dev": "parcel src/index.html src/attendance/index.html src/bill-tracker/index.html src/overview/index.html && npm run copy",
+    "build": "parcel build src/index.html src/attendance/index.html src/bill-tracker/index.html src/overview/index.html && npm run copy",
     "deploy": "netlify deploy",
     "copy": "cp -r src/data dist && cp -r src/assets dist"
   },

diff --git a/src/attendance/index.html b/src/attendance/index.html
@@ -1,28 +1,39 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <!-- Google tag (gtag.js) -->
-    <script
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=G-7R2ZRGPPBV"
-    ></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag("js", new Date());
 
-      gtag("config", "G-7R2ZRGPPBV");
-    </script>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="robots" content="noindex" />
-    <link rel="icon" href="../assets/favicon.ico" type="image/x-icon" />
-    <title>Attendance Tracker</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./index.js"></script>
-  </body>
-</html>
+<head>
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-7R2ZRGPPBV"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag("js", new Date());
+
+    gtag("config", "G-7R2ZRGPPBV");
+  </script>
+  <!-- Hotjar Tracking Code -->
+  <script>
+    (function (h, o, t, j, a, r) {
+      h.hj = h.hj || function () { (h.hj.q = h.hj.q || []).push(arguments) };
+      h._hjSettings = { hjid: 5310183, hjsv: 6 };
+      a = o.getElementsByTagName('head')[0];
+      r = o.createElement('script'); r.async = 1;
+      r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
+      a.appendChild(r);
+    })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
+  </script>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="robots" content="noindex" />
+  <link rel="icon" href="../assets/favicon.ico" type="image/x-icon" />
+  <title>Attendance Tracker</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="./index.js"></script>
+</body>
+
+</html>
diff --git a/src/bill-tracker/index.html b/src/bill-tracker/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-7R2ZRGPPBV"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag("js", new Date());
+
+    gtag("config", "G-7R2ZRGPPBV");
+  </script>
+  <!-- Hotjar Tracking Code -->
+  <script>
+    (function (h, o, t, j, a, r) {
+      h.hj = h.hj || function () { (h.hj.q = h.hj.q || []).push(arguments) };
+      h._hjSettings = { hjid: 5310183, hjsv: 6 };
+      a = o.getElementsByTagName('head')[0];
+      r = o.createElement('script'); r.async = 1;
+      r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
+      a.appendChild(r);
+    })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
+  </script>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="robots" content="noindex" />
+  <link rel="icon" href="../assets/favicon.ico" type="image/x-icon" />
+  <title>Bill Tracker</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="./index.js"></script>
+</body>
+
+</html>
diff --git a/src/bill-tracker/index.js b/src/bill-tracker/index.js
@@ -0,0 +1,14 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+
+import BillTracker from "../components/billtracker";
+
+import "../app.scss";
+
+function App() {
+  return <BillTracker />;
+}
+
+const container = document.getElementById("root");
+const root = createRoot(container);
+root.render(<App />);
diff --git a/src/components/pmtabs/index.js b/src/components/pmtabs/index.js
@@ -24,7 +24,7 @@ function PMTabs(props) {
           </a>
           <a
             className={`tab ${active === "bill-tracker" ? "active" : ""}`}
-            href="/"
+            href="/bill-tracker"
           >
             Bill Tracker
           </a>

diff --git a/src/index.html b/src/index.html
@@ -1,28 +1,39 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <!-- Google tag (gtag.js) -->
-    <script
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=G-7R2ZRGPPBV"
-    ></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag("js", new Date());
 
-      gtag("config", "G-7R2ZRGPPBV");
-    </script>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="robots" content="noindex" />
-    <link rel="icon" href="./assets/favicon.ico" type="image/x-icon" />
-    <title>Bill Tracker</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./index.js"></script>
-  </body>
-</html>
+<head>
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-7R2ZRGPPBV"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag("js", new Date());
+
+    gtag("config", "G-7R2ZRGPPBV");
+  </script>
+  <!-- Hotjar Tracking Code -->
+  <script>
+    (function (h, o, t, j, a, r) {
+      h.hj = h.hj || function () { (h.hj.q = h.hj.q || []).push(arguments) };
+      h._hjSettings = { hjid: 5310183, hjsv: 6 };
+      a = o.getElementsByTagName('head')[0];
+      r = o.createElement('script'); r.async = 1;
+      r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
+      a.appendChild(r);
+    })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
+  </script>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="robots" content="noindex" />
+  <link rel="icon" href="./assets/favicon.ico" type="image/x-icon" />
+  <title>Bill Tracker</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="./index.js"></script>
+</body>
+
+</html>
diff --git a/src/index.js b/src/index.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 
-import BillTracker from './components/billtracker';
+import Overview from './components/overview';
 
 import './app.scss';
 
 function App() {
   return (
-    <BillTracker />
+    <Overview />
   );
 }
 

diff --git a/src/overview/index.html b/src/overview/index.html
@@ -1,28 +1,39 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <!-- Google tag (gtag.js) -->
-    <script
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=G-7R2ZRGPPBV"
-    ></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag("js", new Date());
 
-      gtag("config", "G-7R2ZRGPPBV");
-    </script>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="robots" content="noindex" />
-    <link rel="icon" href="../assets/favicon.ico" type="image/x-icon" />
-    <title>Performace Overview</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./index.js"></script>
-  </body>
-</html>
+<head>
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-7R2ZRGPPBV"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag("js", new Date());
+
+    gtag("config", "G-7R2ZRGPPBV");
+  </script>
+  <!-- Hotjar Tracking Code -->
+  <script>
+    (function (h, o, t, j, a, r) {
+      h.hj = h.hj || function () { (h.hj.q = h.hj.q || []).push(arguments) };
+      h._hjSettings = { hjid: 5310183, hjsv: 6 };
+      a = o.getElementsByTagName('head')[0];
+      r = o.createElement('script'); r.async = 1;
+      r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
+      a.appendChild(r);
+    })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
+  </script>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="robots" content="noindex" />
+  <link rel="icon" href="../assets/favicon.ico" type="image/x-icon" />
+  <title>Performace Overview</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="./index.js"></script>
+</body>
+
+</html>