update google analytics

.env

@@ -1,4 +1,4 @@
-NEXT_PUBLIC_GA_ID=G-JKZEHMJBMH
+NEXT_PUBLIC_GA_MEASUREMENT_ID=G-JKZEHMJBMH
 NEXT_PUBLIC_PAYMENT_URL=https://jsoncrack.lemonsqueezy.com/checkout/buy/ce30521f-c7cc-44f3-9435-995d3260ba22
 NEXT_PUBLIC_SUPABASE_URL=https://bxkgqurwqjmvrqekcbws.supabase.co
 NEXT_PUBLIC_SUPABASE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJ4a2dxdXJ3cWptdnJxZWtjYndzIiwicm9sZSI6ImFub24iLCJpYXQiOjE2OTA2NDU0MjUsImV4cCI6MjAwNjIyMTQyNX0.3nZ0yhuFjnI3yHbAL8S9UtK-Ny-6F5AylNHgo1tymTU

package.json

@@ -38,11 +38,11 @@
     "lodash.debounce": "^4.0.8",
     "next": "14.2.3",
     "next-seo": "^6.5.0",
+    "nextjs-google-analytics": "^2.3.7",
     "react": "^18.3.1",
     "react-compare-slider": "^3.1.0",
     "react-countup": "^6.5.3",
     "react-dom": "^18.3.1",
-    "react-ga4": "^2.1.0",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.2.1",
     "react-json-tree": "^0.18.0",

src/containers/Editor/BottomBar.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Flex, Popover, Text } from "@mantine/core";
 import styled from "styled-components";
+import { event as gaEvent } from "nextjs-google-analytics";
 import { AiOutlineLink, AiOutlineLock, AiOutlineUnlock } from "react-icons/ai";
 import { BiSolidDockLeft } from "react-icons/bi";
 import {
@@ -12,7 +13,6 @@ import {
   VscSync,
   VscSyncIgnored,
 } from "react-icons/vsc";
-import { gaEvent } from "src/lib/utils/gaEvent";
 import useGraph from "src/modules/GraphView/stores/useGraph";
 import useConfig from "src/store/useConfig";
 import useFile from "src/store/useFile";
@@ -100,7 +100,7 @@ export const BottomBar = () => {
 
   const toggleEditor = () => {
     toggleFullscreen(!fullscreen);
-    gaEvent("Bottom Bar", "toggle fullscreen");
+    gaEvent("toggle_fullscreen");
   };
 
   React.useEffect(() => {
@@ -158,7 +158,7 @@ export const BottomBar = () => {
         <StyledBottomBarItem
           onClick={() => {
             toggleLiveTransform(!liveTransformEnabled);
-            gaEvent("Bottom Bar", "toggle live transform", "manual");
+            gaEvent("toggle_live_transform");
           }}
         >
           {liveTransformEnabled ? <VscSync /> : <VscSyncIgnored />}

src/containers/Modals/CloudModal/index.tsx

@@ -21,14 +21,14 @@ import { useDebouncedValue } from "@mantine/hooks";
 import { useQuery } from "@tanstack/react-query";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
+import { event as gaEvent } from "nextjs-google-analytics";
 import toast from "react-hot-toast";
 import { BiSearch } from "react-icons/bi";
 import { FaTrash } from "react-icons/fa";
 import { LuDownload } from "react-icons/lu";
 import { SlOptionsVertical } from "react-icons/sl";
 import { VscAdd, VscWarning } from "react-icons/vsc";
 import type { FileFormat } from "src/enums/file.enum";
-import { gaEvent } from "src/lib/utils/gaEvent";
 import { documentSvc } from "src/services/document.service";
 import type { File } from "src/store/useFile";
 import useFile from "src/store/useFile";
@@ -76,7 +76,7 @@ export const CloudModal = ({ opened, onClose }: ModalProps) => {
         if (error) throw new Error(error.message);
 
         if (data[0]) setFile(data[0]);
-        gaEvent("Cloud Modal", "open file");
+        gaEvent("open_cloud_file");
       } catch (error) {
         if (error instanceof Error) toast.error(error.message);
       } finally {
@@ -100,7 +100,7 @@ export const CloudModal = ({ opened, onClose }: ModalProps) => {
       a.click();
       URL.revokeObjectURL(url);
 
-      gaEvent("Cloud Modal", "download file");
+      gaEvent("download_cloud_file");
 
       return true;
     } catch (error) {
@@ -121,7 +121,7 @@ export const CloudModal = ({ opened, onClose }: ModalProps) => {
 
         await refetch();
         toast.success(`Deleted ${file.name}!`, { id: "delete-file" });
-        gaEvent("Cloud Modal", "delete file");
+        gaEvent("delete_cloud_file");
       } catch (error) {
         if (error instanceof Error) {
           toast.error(error.message, { id: "delete-file" });

src/containers/Modals/DownloadModal/index.tsx

@@ -11,9 +11,9 @@ import {
   ColorInput,
 } from "@mantine/core";
 import { toBlob, toJpeg, toPng, toSvg } from "html-to-image";
+import { event as gaEvent } from "nextjs-google-analytics";
 import toast from "react-hot-toast";
 import { FiCopy, FiDownload } from "react-icons/fi";
-import { gaEvent } from "src/lib/utils/gaEvent";
 
 enum Extensions {
   SVG = "svg",
@@ -90,7 +90,7 @@ export const DownloadModal = ({ opened, onClose }: ModalProps) => {
       ]);
 
       toast.success("Copied to clipboard");
-      gaEvent("Download Modal", "clipboard image");
+      gaEvent("clipboard_img");
     } catch (error) {
       toast.error("Failed to copy to clipboard");
     } finally {
@@ -111,7 +111,7 @@ export const DownloadModal = ({ opened, onClose }: ModalProps) => {
       });
 
       downloadURI(dataURI, `${fileDetails.filename}.${extension}`);
-      gaEvent("Download Modal", "download image", extension);
+      gaEvent("download_img", { label: extension });
     } catch (error) {
       toast.error("Failed to download image!");
     } finally {

src/containers/Modals/ImportModal/index.tsx

@@ -2,10 +2,10 @@ import React from "react";
 import type { ModalProps } from "@mantine/core";
 import { Modal, Group, Button, TextInput, Stack, Divider, Paper, Text } from "@mantine/core";
 import { Dropzone } from "@mantine/dropzone";
+import { event as gaEvent } from "nextjs-google-analytics";
 import toast from "react-hot-toast";
 import { AiOutlineUpload } from "react-icons/ai";
 import type { FileFormat } from "src/enums/file.enum";
-import { gaEvent } from "src/lib/utils/gaEvent";
 import useFile from "src/store/useFile";
 
 export const ImportModal = ({ opened, onClose }: ModalProps) => {
@@ -20,7 +20,7 @@ export const ImportModal = ({ opened, onClose }: ModalProps) => {
       setFile(null);
 
       toast.loading("Loading...", { id: "toastFetch" });
-      gaEvent("Import Modal", "fetch url");
+      gaEvent("fetch_url");
 
       return fetch(url)
         .then(res => res.json())
@@ -42,7 +42,7 @@ export const ImportModal = ({ opened, onClose }: ModalProps) => {
         onClose();
       });
 
-      gaEvent("Import Modal", "import file", format);
+      gaEvent("import_file", { label: format });
     }
   };
 

src/containers/Modals/JPathModal/index.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import type { ModalProps } from "@mantine/core";
 import { Stack, Modal, Button, Text, Anchor, Group, TextInput } from "@mantine/core";
 import { JSONPath } from "jsonpath-plus";
+import { event as gaEvent } from "nextjs-google-analytics";
 import toast from "react-hot-toast";
 import { VscLinkExternal } from "react-icons/vsc";
-import { gaEvent } from "src/lib/utils/gaEvent";
 import useFile from "src/store/useFile";
 import useJson from "src/store/useJson";
 
@@ -19,7 +19,7 @@ export const JPathModal = ({ opened, onClose }: ModalProps) => {
       const result = JSONPath({ path: query, json: JSON.parse(json) });
 
       setContents({ contents: JSON.stringify(result, null, 2) });
-      gaEvent("JSON Path Modal", "evaluate JSON Path");
+      gaEvent("run_json_path");
       onClose();
     } catch (error) {
       if (error instanceof Error) toast.error(error.message);

src/containers/Modals/JWTModal/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import type { ModalProps } from "@mantine/core";
 import { Modal, Button, Textarea, Divider, Group } from "@mantine/core";
 import { decode } from "jsonwebtoken";
-import { gaEvent } from "src/lib/utils/gaEvent";
+import { event as gaEvent } from "nextjs-google-analytics";
 import useFile from "src/store/useFile";
 
 export const JWTModal = ({ opened, onClose }: ModalProps) => {
@@ -14,7 +14,7 @@ export const JWTModal = ({ opened, onClose }: ModalProps) => {
     const json = decode(token);
     setContents({ contents: JSON.stringify(json, null, 2) });
 
-    gaEvent("JWT Modal", "resolve");
+    gaEvent("resolve_jwt");
     setToken("");
     onClose();
   };

src/containers/Modals/NodeModal/index.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import type { ModalProps } from "@mantine/core";
 import { Modal, Stack, Text, ScrollArea, Button } from "@mantine/core";
 import { CodeHighlight } from "@mantine/code-highlight";
+import { event as gaEvent } from "nextjs-google-analytics";
 import { VscLock } from "react-icons/vsc";
-import { gaEvent } from "src/lib/utils/gaEvent";
 import useGraph from "src/modules/GraphView/stores/useGraph";
 import useModal from "src/store/useModal";
 
@@ -36,7 +36,7 @@ export const NodeModal = ({ opened, onClose }: ModalProps) => {
         <Button
           onClick={() => {
             setVisible("upgrade")(true);
-            gaEvent("Node Modal", "edit");
+            gaEvent("click_node_edit");
           }}
           rightSection={<VscLock strokeWidth={0.5} />}
         >

src/containers/Modals/SchemaModal/index.tsx

@@ -2,11 +2,11 @@ import React from "react";
 import type { ModalProps } from "@mantine/core";
 import { Stack, Modal, Button, Text, Anchor, Divider, Menu, Group } from "@mantine/core";
 import Editor from "@monaco-editor/react";
+import { event as gaEvent } from "nextjs-google-analytics";
 import { toast } from "react-hot-toast";
 import { FaChevronDown } from "react-icons/fa";
 import { VscLinkExternal } from "react-icons/vsc";
 import { FileFormat } from "src/enums/file.enum";
-import { gaEvent } from "src/lib/utils/gaEvent";
 import useConfig from "src/store/useConfig";
 import useFile from "src/store/useFile";
 
@@ -39,7 +39,7 @@ export const SchemaModal = ({ opened, onClose }: ModalProps) => {
       const parsedSchema = JSON.parse(schema);
       setJsonSchema(parsedSchema);
 
-      gaEvent("Schema Modal", "apply");
+      gaEvent("apply_json_schema");
       toast.success("Applied schema!");
       onClose();
     } catch (error) {
@@ -60,7 +60,7 @@ export const SchemaModal = ({ opened, onClose }: ModalProps) => {
       const data = JSONSchemaFaker.generate(JSON.parse(schema));
       setContents({ contents: JSON.stringify(data, null, 2), format: FileFormat.JSON });
 
-      gaEvent("Schema Modal", "generate mock data");
+      gaEvent("generate_schema_mock_data");
       onClose();
     } catch (error) {
       console.error(error);

src/containers/Modals/ShareModal/index.tsx

@@ -11,9 +11,9 @@ import {
   ActionIcon,
   Text,
 } from "@mantine/core";
+import { event as gaEvent } from "nextjs-google-analytics";
 import { FiExternalLink } from "react-icons/fi";
 import { MdCheck, MdCopyAll } from "react-icons/md";
-import { gaEvent } from "src/lib/utils/gaEvent";
 
 export const ShareModal = ({ opened, onClose }: ModalProps) => {
   const { query } = useRouter();
@@ -37,7 +37,7 @@ export const ShareModal = ({ opened, onClose }: ModalProps) => {
                     color={copied ? "teal" : "gray"}
                     onClick={() => {
                       copy();
-                      gaEvent("Share Modal", "copy");
+                      gaEvent("copy_share_link");
                     }}
                   >
                     {copied ? <MdCheck size="1rem" /> : <MdCopyAll size="1rem" />}

src/containers/Modals/TypeModal/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import type { ModalProps } from "@mantine/core";
 import { Stack, Modal, Select, ScrollArea } from "@mantine/core";
 import { CodeHighlight } from "@mantine/code-highlight";
-import { gaEvent } from "src/lib/utils/gaEvent";
+import { event as gaEvent } from "nextjs-google-analytics";
 import useJson from "src/store/useJson";
 
 enum Language {
@@ -97,7 +97,7 @@ export const TypeModal = ({ opened, onClose }: ModalProps) => {
           data={typeOptions}
           onChange={e => {
             setSelectedType(e as Language);
-            gaEvent("Type Modal", "generate", e as string);
+            gaEvent("generate_type", { label: e as Language });
           }}
           allowDeselect={false}
         />

src/containers/Toolbar/FileMenu.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Flex, Menu } from "@mantine/core";
+import { event as gaEvent } from "nextjs-google-analytics";
 import { CgChevronDown } from "react-icons/cg";
-import { gaEvent } from "src/lib/utils/gaEvent";
 import useFile from "src/store/useFile";
 import useModal from "src/store/useModal";
 import * as Styles from "./styles";
@@ -19,7 +19,7 @@ export const FileMenu = () => {
     a.download = `jsoncrack.${getFormat()}`;
     a.click();
 
-    gaEvent("File Menu", "download", getFormat());
+    gaEvent("save_file", { label: getFormat() });
   };
 
   return (