gtag added

COVISART · Oct 10, 2023 · 22b3e65 · 22b3e65
1 parent 4fb81cc
commit 22b3e65
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "emailjs-com": "^3.2.0",
     "framer-motion": "^10.16.4",
     "google-map-react": "^2.1.10",
+    "gtag-ga": "^1.0.3",
     "leva": "^0.9.35",
     "maath": "^0.9.0",
     "react": "^18.2.0",
@@ -29,6 +30,7 @@
     "react-countup": "^6.4.2",
     "react-dom": "^18.2.0",
     "react-ga": "^3.3.1",
+    "react-ga4": "^2.1.0",
     "react-helmet": "^6.1.0",
     "react-icons": "^4.2.0",
     "react-move": "^6.4.0",

diff --git a/src/App.js b/src/App.js
@@ -68,17 +68,17 @@ import BlogListSidebar from "./components/blog/BlogListSidebar";
 import BlogDetails from "./pages/BlogDetails";
 import Error from "./pages/Error";
 
-import ReactGA from 'react-ga';
-
+import { initializeGtag, gtag } from 'gtag-ga';
+import ReactGA from "react-ga4";
 
 // Import Css Here 
 import './assets/scss/style.scss';
 
 
 const App = () => {
-    ReactGA.initialize('UA-256923835-1', { debug: true });
-    ReactGA.pageview(`${process.env.PUBLIC_URL + "/ngs"}`);
-    
+
+    //initializeGtag('G-XTQCE7S8BR'); // Your tracking code
+
     return (
         <Router>
             <PageScrollTop>

diff --git a/src/covisart/Product.js b/src/covisart/Product.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Space, Table, Tag } from 'antd';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import SectionTitle from "../elements/sectionTitle/SectionTitle";
@@ -10,11 +10,15 @@ import Simulator from './Simulator'
 import { state } from './store'
 import Configuration from './Configuration'
 import Email from './system/SendMail';
-import ReactGA from 'react-ga';
+import { initializeGtag, gtag } from 'gtag-ga';
+import ReactGA from "react-ga4";
+
 
 const Product = () => {
     const [selectedTab, setSelectedTab] = useState(0);
     const tabCount = 5;
+    ReactGA.initialize("G-XTQCE7S8BR");
+
     const snap = useSnapshot(state)
     const columns = [
         {
@@ -28,6 +32,7 @@ const Product = () => {
             key: 'value',
         }
     ];
+
     return (
         <div className="row">
             <div className="col-lg-12">
@@ -148,20 +153,19 @@ const Product = () => {
                                                 ]
                                             } pagination={false} />
 
-
                                             <div className="inner" style={{ justifyContent: "flex-end", alignItems: "center", flexDirection: "column", display: "flex" }}>
                                                 <div className="pricing-footer">
                                                     <a className="btn-default btn-border" onClick={() => {
+                                                        // Send a custom event
                                                         ReactGA.event({
-                                                            category: 'Promotion',
-                                                            action: 'Displayed Promotional Widget',
-                                                            label: 'Homepage Thing',
-                                                            nonInteraction: true
+                                                            category: "purchase",
+                                                            action: "Purchase",
+                                                            label: "ngs", // optional
+                                                            value: 99, // optional, must be a number
+                                                            nonInteraction: true, // optional, true/false
+                                                            transport: "xhr", // optional, beacon/xhr/image
                                                         });
-                                                        ReactGA.event({
-                                                            category: 'User',
-                                                            action: 'Created an Account'
-                                                          });
+                                                        console.log("clicked")
                                                     }}>Order</a>
                                                 </div>
                                             </div>

diff --git a/yarn.lock b/yarn.lock
@@ -5821,6 +5821,11 @@ graphemer@^1.4.0:
   resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
+gtag-ga@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/gtag-ga/-/gtag-ga-1.0.3.tgz#601f462e9b42ed50cdaac7409013f77d039091ce"
+  integrity sha512-5KB5uRMZW1w1le3bDavy/p+T9BWR6UpSUr3tP9BM+4bevFduMIEvioduYtKE6vUbLljKNMHyi2ERMZhtvg4C3w==
+
 gzip-size@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
@@ -9304,6 +9309,11 @@ react-fast-compare@^3.1.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
   integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
 
+react-ga4@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-ga4/-/react-ga4-2.1.0.tgz#56601f59d95c08466ebd6edfbf8dede55c4678f9"
+  integrity sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==
+
 react-ga@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.3.1.tgz#d8e1f4e05ec55ed6ff944dcb14b99011dfaf9504"