diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 5040f67..f45c06a 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -8,7 +8,7 @@ on: types: - closed branches: - - develop + - main jobs: project-build: diff --git a/.pnp.cjs b/.pnp.cjs index e8984ef..1870cd5 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -48,6 +48,7 @@ const RAW_RUNTIME_STATE = ["@types/node", "npm:22.10.7"],\ ["@types/react", "npm:18.3.18"],\ ["@types/react-dom", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:18.3.5"],\ + ["@types/react-gtm-module", "npm:2.0.4"],\ ["@typescript-eslint/eslint-plugin", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:8.20.0"],\ ["@typescript-eslint/parser", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:8.20.0"],\ ["@vitejs/plugin-react", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:4.3.4"],\ @@ -68,6 +69,7 @@ const RAW_RUNTIME_STATE = ["prettier", "npm:3.4.2"],\ ["react", "npm:18.3.1"],\ ["react-dom", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:18.3.1"],\ + ["react-gtm-module", "npm:2.0.11"],\ ["react-router-dom", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:7.1.3"],\ ["sass", "npm:1.83.4"],\ ["sass-loader", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:16.0.4"],\ @@ -4691,6 +4693,15 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["@types/react-gtm-module", [\ + ["npm:2.0.4", {\ + "packageLocation": "./.yarn/cache/@types-react-gtm-module-npm-2.0.4-ba9b45b661-0bba7b8416.zip/node_modules/@types/react-gtm-module/",\ + "packageDependencies": [\ + ["@types/react-gtm-module", "npm:2.0.4"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["@types/resolve", [\ ["npm:1.20.6", {\ "packageLocation": "./.yarn/cache/@types-resolve-npm-1.20.6-6ab126a04b-a9b0549d81.zip/node_modules/@types/resolve/",\ @@ -10792,6 +10803,7 @@ const RAW_RUNTIME_STATE = ["@types/node", "npm:22.10.7"],\ ["@types/react", "npm:18.3.18"],\ ["@types/react-dom", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:18.3.5"],\ + ["@types/react-gtm-module", "npm:2.0.4"],\ ["@typescript-eslint/eslint-plugin", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:8.20.0"],\ ["@typescript-eslint/parser", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:8.20.0"],\ ["@vitejs/plugin-react", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:4.3.4"],\ @@ -10812,6 +10824,7 @@ const RAW_RUNTIME_STATE = ["prettier", "npm:3.4.2"],\ ["react", "npm:18.3.1"],\ ["react-dom", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:18.3.1"],\ + ["react-gtm-module", "npm:2.0.11"],\ ["react-router-dom", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:7.1.3"],\ ["sass", "npm:1.83.4"],\ ["sass-loader", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:16.0.4"],\ @@ -11860,6 +11873,15 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["react-gtm-module", [\ + ["npm:2.0.11", {\ + "packageLocation": "./.yarn/cache/react-gtm-module-npm-2.0.11-99adaedaa9-ceedf296a1.zip/node_modules/react-gtm-module/",\ + "packageDependencies": [\ + ["react-gtm-module", "npm:2.0.11"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["react-is", [\ ["npm:17.0.2", {\ "packageLocation": "./.yarn/cache/react-is-npm-17.0.2-091bbb8db6-2bdb6b93fb.zip/node_modules/react-is/",\ diff --git a/.yarn/cache/@types-react-gtm-module-npm-2.0.4-ba9b45b661-0bba7b8416.zip b/.yarn/cache/@types-react-gtm-module-npm-2.0.4-ba9b45b661-0bba7b8416.zip new file mode 100644 index 0000000..371ca56 Binary files /dev/null and b/.yarn/cache/@types-react-gtm-module-npm-2.0.4-ba9b45b661-0bba7b8416.zip differ diff --git a/.yarn/cache/react-gtm-module-npm-2.0.11-99adaedaa9-ceedf296a1.zip b/.yarn/cache/react-gtm-module-npm-2.0.11-99adaedaa9-ceedf296a1.zip new file mode 100644 index 0000000..ebb819c Binary files /dev/null and b/.yarn/cache/react-gtm-module-npm-2.0.11-99adaedaa9-ceedf296a1.zip differ diff --git a/package.json b/package.json index 1cae871..4d5d83c 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "classnames": "^2.5.1", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-gtm-module": "^2.0.11", "react-router-dom": "^7.1.3", "zustand": "^5.0.3" }, @@ -46,6 +47,7 @@ "@types/node": "^22.10.7", "@types/react": "^18.3.18", "@types/react-dom": "^18.3.5", + "@types/react-gtm-module": "^2", "@typescript-eslint/eslint-plugin": "^8.20.0", "@typescript-eslint/parser": "^8.20.0", "@vitejs/plugin-react": "^4.3.4", diff --git a/src/main.tsx b/src/main.tsx index ab3eb9d..e6772e1 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,5 +1,7 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ import { StrictMode } from "react"; import ReactDom from "react-dom/client"; +import TagManager from "react-gtm-module"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; @@ -15,6 +17,35 @@ import { ToastProvider } from "@/hooks/common/useToast"; import "@/styles/reset.scss"; import "@/styles/global.scss"; +const gtmTag = { + gtmId: import.meta.env.VITE_GTM_ID, +}; + +const initializeGA4 = () => { + const ga4Id = import.meta.env.VITE_GA4_ID; + + const script = document.createElement("script"); + script.async = true; + script.src = `https://www.googletagmanager.com/gtag/js?id=${ga4Id}`; + document.head.appendChild(script); + + script.onload = () => { + (window as any).dataLayer = (window as any).dataLayer || []; + + function gtag(...args: any[]) { + (window as any).dataLayer.push(args); + } + gtag("js", new Date()); + + gtag("config", ga4Id); + }; +}; + +if (import.meta.env.MODE === "production") { + TagManager.initialize(gtmTag); + initializeGA4(); +} + ReactDom.createRoot(document.getElementById("root")!).render( diff --git a/yarn.lock b/yarn.lock index 7d0454d..3c37ca9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3038,6 +3038,13 @@ __metadata: languageName: node linkType: hard +"@types/react-gtm-module@npm:^2": + version: 2.0.4 + resolution: "@types/react-gtm-module@npm:2.0.4" + checksum: 10c0/0bba7b841617fca4a23aacdd6e69299e0b9f193988d381db285e91de3b17bf4599bc58236d2f76a2eb2cf589b4e4d665d66feb2f90f87b549e957a79765ffec6 + languageName: node + linkType: hard + "@types/react@npm:^18.3.18": version: 18.3.18 resolution: "@types/react@npm:18.3.18" @@ -8283,6 +8290,7 @@ __metadata: "@types/node": "npm:^22.10.7" "@types/react": "npm:^18.3.18" "@types/react-dom": "npm:^18.3.5" + "@types/react-gtm-module": "npm:^2" "@typescript-eslint/eslint-plugin": "npm:^8.20.0" "@typescript-eslint/parser": "npm:^8.20.0" "@vitejs/plugin-react": "npm:^4.3.4" @@ -8303,6 +8311,7 @@ __metadata: prettier: "npm:^3.4.2" react: "npm:^18.3.1" react-dom: "npm:^18.3.1" + react-gtm-module: "npm:^2.0.11" react-router-dom: "npm:^7.1.3" sass: "npm:^1.83.4" sass-loader: "npm:^16.0.4" @@ -9158,6 +9167,13 @@ __metadata: languageName: node linkType: hard +"react-gtm-module@npm:^2.0.11": + version: 2.0.11 + resolution: "react-gtm-module@npm:2.0.11" + checksum: 10c0/ceedf296a1232934788583e4a20452a82e872fcd79e24827bf615b1cd3bceb59c294d169b1bf8313ba48b9e480e681ce520cd2a5cf2381c5aaa1fb74d4f88930 + languageName: node + linkType: hard + "react-is@npm:^17.0.1": version: 17.0.2 resolution: "react-is@npm:17.0.2"