add analytics

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=

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",

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 };

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,