From dafd93748cfc112db0f93b902bdf6b07b2f03d46 Mon Sep 17 00:00:00 2001 From: Nikita Yutanov Date: Tue, 3 Dec 2024 16:17:01 +0300 Subject: [PATCH] add analytics --- frontend/.env.example | 1 + frontend/package.json | 2 ++ frontend/pnpm-lock.yaml | 16 ++++++++++++++++ frontend/src/consts.ts | 4 +++- frontend/src/main.tsx | 5 ++++- 5 files changed, 26 insertions(+), 2 deletions(-) diff --git a/frontend/.env.example b/frontend/.env.example index 4a3672e..38e7dfd 100644 --- a/frontend/.env.example +++ b/frontend/.env.example @@ -3,3 +3,4 @@ VITE_IPFS_UPLOAD_ADDRESS= VITE_IPFS_GATEWAY_ADDRESS= VITE_INDEXER_ADDRESS= VITE_INDEXER_WS_ADDRESS= +VITE_GTM_ID= diff --git a/frontend/package.json b/frontend/package.json index 4d1683a..e8e5c83 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -23,11 +23,13 @@ "graphql-request": "6.1.0", "react": "18.2.0", "react-dom": "18.2.0", + "react-gtm-module": "2.0.11", "react-hook-form": "7.49.2", "react-router-dom": "6.21.0", "zod": "3.22.4" }, "devDependencies": { + "@types/react-gtm-module": "2.0.4", "@graphql-codegen/cli": "5.0.2", "@graphql-codegen/client-preset": "4.2.4", "@graphql-typed-document-node/core": "3.2.0", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 8cb1992..7ab4047 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -44,6 +44,9 @@ importers: react-dom: specifier: 18.2.0 version: 18.2.0(react@18.2.0) + react-gtm-module: + specifier: 2.0.11 + version: 2.0.11 react-hook-form: specifier: 7.49.2 version: 7.49.2(react@18.2.0) @@ -72,6 +75,9 @@ importers: '@types/react-dom': specifier: 18.2.17 version: 18.2.17 + '@types/react-gtm-module': + specifier: 2.0.4 + version: 2.0.4 '@typescript-eslint/eslint-plugin': specifier: 6.14.0 version: 6.14.0(@typescript-eslint/parser@6.14.0(eslint@8.55.0)(typescript@5.2.2))(eslint@8.55.0)(typescript@5.2.2) @@ -1367,6 +1373,9 @@ packages: '@types/react-dom@18.2.17': resolution: {integrity: sha512-rvrT/M7Df5eykWFxn6MYt5Pem/Dbyc1N8Y0S9Mrkw2WFCRiqUgw9P7ul2NpwsXCSM1DVdENzdG9J5SreqfAIWg==} + '@types/react-gtm-module@2.0.4': + resolution: {integrity: sha512-5wPMWsUE5AI6O0B0K1/zbs0rFHBKu+7NWXQwDXhqvA12ooLD6W1AYiWZqR4UiOd7ixZDV1H5Ys301zEsqyIfNg==} + '@types/react@18.2.43': resolution: {integrity: sha512-nvOV01ZdBdd/KW6FahSbcNplt2jCJfyWdTos61RYHV+FVv5L/g9AOX1bmbVcWcLFL8+KHQfh1zVIQrud6ihyQA==} @@ -3112,6 +3121,9 @@ packages: peerDependencies: react: ^18.2.0 + react-gtm-module@2.0.11: + resolution: {integrity: sha512-8gyj4TTxeP7eEyc2QKawEuQoAZdjKvMY4pgWfycGmqGByhs17fR+zEBs0JUDq4US/l+vbTl+6zvUIx27iDo/Vw==} + react-hook-form@7.49.2: resolution: {integrity: sha512-TZcnSc17+LPPVpMRIDNVITY6w20deMdNi6iehTFLV1x8SqThXGwu93HjlUVU09pzFgZH7qZOvLMM7UYf2ShAHA==} engines: {node: '>=18', pnpm: '8'} @@ -5442,6 +5454,8 @@ snapshots: dependencies: '@types/react': 18.2.43 + '@types/react-gtm-module@2.0.4': {} + '@types/react@18.2.43': dependencies: '@types/prop-types': 15.7.11 @@ -7574,6 +7588,8 @@ snapshots: react: 18.2.0 scheduler: 0.23.0 + react-gtm-module@2.0.11: {} + react-hook-form@7.49.2(react@18.2.0): dependencies: react: 18.2.0 diff --git a/frontend/src/consts.ts b/frontend/src/consts.ts index aaf8c32..aad4077 100644 --- a/frontend/src/consts.ts +++ b/frontend/src/consts.ts @@ -11,6 +11,8 @@ const ADDRESS = { INDEXER_WS: import.meta.env.VITE_INDEXER_WS_ADDRESS as string, }; +const GTM_ID = import.meta.env.VITE_GTM_ID as string | undefined; + const ROUTE = { HOME: '/', CREATE_COLLECTION: '/create', @@ -27,4 +29,4 @@ const SCHEMA = { .transform((value) => decodeAddress(value)), }; -export { ADDRESS, ROUTE, SCHEMA }; +export { ADDRESS, GTM_ID, ROUTE, SCHEMA }; diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index 7752d9e..6f831ac 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -1,14 +1,17 @@ import '@gear-js/vara-ui/dist/style.css'; import React from 'react'; import ReactDOM from 'react-dom/client'; +import TagManager from 'react-gtm-module'; import { RouterProvider, createBrowserRouter } from 'react-router-dom'; import { App } from './App'; import { PrivateRoute } from './components'; -import { ROUTE } from './consts'; +import { GTM_ID, ROUTE } from './consts'; import { Collection, CreateCollection, NFT, Lists, NotFound } from './pages'; import './index.scss'; +if (GTM_ID) TagManager.initialize({ gtmId: GTM_ID }); + const PRIVATE_ROUTES = [ { path: ROUTE.CREATE_COLLECTION,