add analytics

.github/workflows/deploy-to-k8s.yml

@@ -79,6 +79,7 @@ jobs:
             VITE_IPFS_GATEWAY_ADDRESS=${{ secrets.VITE_IPFS_GATEWAY_ADDRESS }}
             VITE_INDEXER_ADDRESS=${{ secrets.VITE_INDEXER_ADDRESS }}
             VITE_INDEXER_WS_ADDRESS=${{ secrets.VITE_INDEXER_WS_ADDRESS }}
+            VITE_GTM_ID=${{ secrets.VITE_GTM_ID }}
 
   deploy-to-k8s:
     needs: [prepair, build-and-push-image]

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/Dockerfile

@@ -13,12 +13,14 @@ ARG VITE_NODE_ADDRESS  \
     VITE_IPFS_UPLOAD_ADDRESS  \
     VITE_IPFS_GATEWAY_ADDRESS  \
     VITE_INDEXER_ADDRESS \
-    VITE_INDEXER_WS_ADDRESS
+    VITE_INDEXER_WS_ADDRESS \
+    VITE_GTM_ID
 ENV VITE_NODE_ADDRESS=${VITE_NODE_ADDRESS} \
     VITE_IPFS_UPLOAD_ADDRESS=${VITE_IPFS_UPLOAD_ADDRESS} \
     VITE_IPFS_GATEWAY_ADDRESS=${VITE_IPFS_GATEWAY_ADDRESS} \
     VITE_INDEXER_ADDRESS=${VITE_INDEXER_ADDRESS} \
     VITE_INDEXER_WS_ADDRESS=${VITE_INDEXER_WS_ADDRESS} \
+    VITE_GTM_ID=${VITE_GTM_ID} \
     DISABLE_ESLINT_PLUGIN=true
 
 WORKDIR /opt

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,