GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-12 19:02:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

update ga

Browse Source
This commit is contained in:
AykutSarac 2023-08-09 18:00:08 +03:00
parent e6b6ea6f3c
commit d152ad9301
No known key found for this signature in database
10 changed files with 46 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -40,7 +40,7 @@
"next": "13.4.12",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-ga": "^3.3.1",
"react-ga4": "^2.1.0",
"react-hot-toast": "^2.4.1",
"react-icons": "^4.10.1",
"react-linkify-it": "^1.0.7",

37
src/components/GoogleAnalytics/index.tsx
View File

@ -1,37 +0,0 @@
import React from "react";
import Script from "next/script";
import ReactGA from "react-ga";
const isDevelopment = process.env.NODE_ENV === "development";
const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;
ReactGA.initialize(GA_TRACKING_ID, { testMode: isDevelopment });
const GoogleAnalytics: React.FC = () => {
if (isDevelopment) return null;
return (
<>
<Script
strategy="afterInteractive"
src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
/>
<Script
id="gtag-init"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${GA_TRACKING_ID}', {
page_path: window.location.pathname,
});
`,
}}
/>
</>
);
};
export default GoogleAnalytics;

4
src/components/SearchInput/index.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import { Flex, Input, Text } from "@mantine/core";
import { getHotkeyHandler } from "@mantine/hooks";
import { event } from "react-ga";
import ReactGA from "react-ga4";
import { AiOutlineSearch } from "react-icons/ai";
import { useFocusNode } from "src/hooks/useFocusNode";
@ -16,7 +16,7 @@ export const SearchInput: React.FC = () => {
w={180}
value={searchValue}
onChange={e => setValue(e.currentTarget.value)}
onFocus={() => event({ action: "focus_node_search", category: "User" })}
onFocus={() => ReactGA.event({ action: "focus_node_search", category: "User" })}
placeholder="Search Node"
onKeyDown={getHotkeyHandler([["Enter", skip]])}
icon={<AiOutlineSearch />}

26
src/containers/Editor/LiveEditor/Tools.tsx
View File

@ -2,7 +2,7 @@ import React from "react";
import styled from "styled-components";
import { Flex, Group, MediaQuery, Menu, Select, Text } from "@mantine/core";
import { useHotkeys } from "@mantine/hooks";
import { event } from "react-ga";
import ReactGA from "react-ga4";
import toast from "react-hot-toast";
import { AiOutlineFullscreen, AiOutlineMinus, AiOutlinePlus } from "react-icons/ai";
import { CgArrowsMergeAltH, CgArrowsShrinkH, CgChevronDown } from "react-icons/cg";
@ -212,7 +212,11 @@ export const Tools: React.FC<{ isWidget?: boolean }> = ({ isWidget = false }) =>
fz={12}
onClick={() => {
toggleEditor();
event({ action: "toggle_hide_editor", category: "User", label: "Tools" });
ReactGA.event({
action: "toggle_hide_editor",
category: "User",
label: "Tools",
});
}}
icon={fullscreen ? <VscLayoutSidebarLeft /> : <VscLayoutSidebarLeftOff />}
rightSection={
@ -227,7 +231,11 @@ export const Tools: React.FC<{ isWidget?: boolean }> = ({ isWidget = false }) =>
fz={12}
onClick={() => {
toggleDirection();
event({ action: "toggle_layout_direction", category: "User", label: "Tools" });
ReactGA.event({
action: "toggle_layout_direction",
category: "User",
label: "Tools",
});
}}
icon={<StyledFlowIcon rotate={rotateLayout(direction)} />}
rightSection={
@ -242,7 +250,11 @@ export const Tools: React.FC<{ isWidget?: boolean }> = ({ isWidget = false }) =>
fz={12}
onClick={() => {
toggleFoldNodes();
event({ action: "toggle_fold_nodes", category: "User", label: "Tools" });
ReactGA.event({
action: "toggle_fold_nodes",
category: "User",
label: "Tools",
});
}}
icon={foldNodes ? <CgArrowsShrinkH /> : <CgArrowsMergeAltH />}
rightSection={
@ -257,7 +269,11 @@ export const Tools: React.FC<{ isWidget?: boolean }> = ({ isWidget = false }) =>
fz={12}
onClick={() => {
toggleExpandCollapseGraph();
event({ action: "toggle_collapse_nodes", category: "User", label: "Tools" });
ReactGA.event({
action: "toggle_collapse_nodes",
category: "User",
label: "Tools",
});
}}
icon={graphCollapsed ? <VscExpandAll /> : <VscCollapseAll />}
rightSection={

6
src/containers/Modals/DownloadModal/index.tsx
View File

@ -13,7 +13,7 @@ import {
Stack,
} from "@mantine/core";
import { toBlob, toJpeg, toPng, toSvg } from "html-to-image";
import { event } from "react-ga";
import ReactGA from "react-ga4";
import toast from "react-hot-toast";
import { FiCopy, FiDownload } from "react-icons/fi";
@ -96,7 +96,7 @@ export const DownloadModal: React.FC<ModalProps> = ({ opened, onClose }) => {
toast.error("Failed to copy to clipboard");
} finally {
toast.dismiss("toastClipboard");
event({ action: "click_clipboard_image", category: "User" });
ReactGA.event({ action: "click_clipboard_image", category: "User" });
onClose();
}
};
@ -117,7 +117,7 @@ export const DownloadModal: React.FC<ModalProps> = ({ opened, onClose }) => {
toast.error("Failed to download image!");
} finally {
toast.dismiss("toastDownload");
event({ action: "click_download_image", category: "User" });
ReactGA.event({ action: "click_download_image", category: "User" });
onClose();
}
};

13
src/pages/_app.tsx
View File

@ -5,17 +5,21 @@ import { useRouter } from "next/router";
import { StyleSheetManager, ThemeProvider } from "styled-components";
import { MantineProvider, MantineThemeOverride } from "@mantine/core";
import { SessionContextProvider, Session } from "@supabase/auth-helpers-react";
import { pageview } from "react-ga";
import ReactGA from "react-ga4";
import { monaSans } from "src/constants/fonts";
import GlobalStyle from "src/constants/globalStyle";
import { lightTheme } from "src/constants/theme";
import { supabase } from "src/lib/api/supabase";
import useUser from "src/store/useUser";
const isDevelopment = process.env.NODE_ENV === "development";
const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;
ReactGA.initialize(GA_TRACKING_ID, { testMode: isDevelopment });
const Toaster = dynamic(() => import("react-hot-toast").then(c => c.Toaster));
const ExternalMode = dynamic(() => import("src/layout/ExternalMode"));
const ModalController = dynamic(() => import("src/layout/ModalController"));
const GoogleAnalytics = dynamic(() => import("src/components/GoogleAnalytics"));
const mantineTheme: MantineThemeOverride = {
colorScheme: "light",
@ -40,8 +44,8 @@ function JsonCrack({
}, [setSession]);
React.useEffect(() => {
const handleRouteChange = (url: string) => {
pageview(url);
const handleRouteChange = (page: string) => {
ReactGA.send({ hitType: "pageview", page });
};
router.events.on("routeChangeComplete", handleRouteChange);
@ -53,7 +57,6 @@ function JsonCrack({
return (
<SessionContextProvider supabaseClient={supabase}>
<GoogleAnalytics />
<StyleSheetManager>
<ThemeProvider theme={lightTheme}>
<GlobalStyle />

4
src/store/useFile.ts
View File

@ -1,7 +1,7 @@
import debounce from "lodash.debounce";
import _get from "lodash.get";
import _set from "lodash.set";
import { event } from "react-ga";
import ReactGA from "react-ga4";
import { toast } from "react-hot-toast";
import { create } from "zustand";
import { defaultJson } from "src/constants/data";
@ -112,7 +112,7 @@ const useFile = create<FileStates & JsonActions>()((set, get) => ({
get().setContents({ contents: jsonContent });
event({ action: "change_data_format", category: "User" });
ReactGA.event({ action: "change_data_format", category: "User" });
} catch (error) {
get().clear();
console.warn("The content was unable to be converted, so it was cleared instead.");

4
src/store/useModal.ts
View File

@ -1,4 +1,4 @@
import { modalview } from "react-ga";
import ReactGA from "react-ga4";
import { create } from "zustand";
import { Modal } from "src/containers/Modals";
import useUser from "./useUser";
@ -41,7 +41,7 @@ const useModal = create<ModalState & ModalActions>()(set => ({
return set({ premium: true });
}
if (visible) modalview(modal);
if (visible) ReactGA.event({ category: "Modal View", action: `modal_view_${modal}` });
set({ [modal]: visible });
},
}));

3
src/store/useUser.ts
View File

@ -1,4 +1,5 @@
import { Session, User } from "@supabase/supabase-js";
import ReactGA from "react-ga4";
import toast from "react-hot-toast";
import { create } from "zustand";
import { supabase } from "src/lib/api/supabase";
@ -34,9 +35,11 @@ const useUser = create<UserStates & UserActions>()(set => ({
organization: data.organization,
premiumCancelled: !!data.cancelled,
});
ReactGA.set({ tier: data.premium ? "premium" : "free" });
}
set({ user: session.user, isAuthenticated: true });
ReactGA.set({ userId: session.user.id });
});
},
logout: async () => {

8
yarn.lock
View File

@ -4933,10 +4933,10 @@ react-fast-compare@^3.2.0:
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
react-ga@^3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.3.1.tgz#d8e1f4e05ec55ed6ff944dcb14b99011dfaf9504"
integrity sha512-4Vc0W5EvXAXUN/wWyxvsAKDLLgtJ3oLmhYYssx+YzphJpejtOst6cbIHCIyF50Fdxuf5DDKqRYny24yJ2y7GFQ==
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-hot-toast@^2.4.1:
version "2.4.1"