fix: add gtag (#347)

TradeTrust · Sep 18, 2024 · 7188fe5 · 7188fe5
1 parent 122f9a6
commit 7188fe5
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 1 deletion.
diff --git a/netlify.toml b/netlify.toml
@@ -11,4 +11,4 @@
   [headers.values]
     X-Content-Type-Options = "nosniff"
     Strict-Transport-Security = "max-age=31536000; includeSubDomains"
-    Content-Security-Policy = "default-src 'self'; img-src 'self'; style-src 'self' https://fonts.googleapis.com https://use.fontawesome.com 'unsafe-inline'; script-src 'self' https://identity.netlify.com https://www.googletagmanager.com 'unsafe-eval'; font-src 'self' data: https://fonts.gstatic.com https://use.fontawesome.com https://ui.tradetrust.io; connect-src 'self' https://www.google-analytics.com https://*.infura.io/v3/ https://identity.netlify.com https://dns.google https://cloudflare-dns.com https://mainnet.hashio.io/api https://testnet.hashio.io/api https://free.testnet.stabilityprotocol.com https://gtn.stabilityprotocol.com https://erpc.apothem.network https://erpc.xinfin.network https://polygon-rpc.com https://*.xdcrpc.com https://api.etherscan.io https://gasstation.polygon.technology/v2 https://gasstation-testnet.polygon.technology/v2 https://gallery.openattestation.com https://tradetrust-functions.netlify.app; frame-src * https://app.netlify.com; frame-ancestors 'self'; object-src 'none';"
+    Content-Security-Policy = "default-src 'self'; img-src 'self'; style-src 'self' https://fonts.googleapis.com https://use.fontawesome.com 'unsafe-inline'; script-src 'self' https://identity.netlify.com https://www.googletagmanager.com 'nonce-{nonce}' 'unsafe-eval'; font-src 'self' data: https://fonts.gstatic.com https://use.fontawesome.com https://ui.tradetrust.io; connect-src 'self' https://www.google-analytics.com https://*.infura.io/v3/ https://identity.netlify.com https://dns.google https://cloudflare-dns.com https://mainnet.hashio.io/api https://testnet.hashio.io/api https://free.testnet.stabilityprotocol.com https://gtn.stabilityprotocol.com https://erpc.apothem.network https://erpc.xinfin.network https://polygon-rpc.com https://*.xdcrpc.com https://api.etherscan.io https://gasstation.polygon.technology/v2 https://gasstation-testnet.polygon.technology/v2 https://gallery.openattestation.com https://tradetrust-functions.netlify.app; frame-src * https://app.netlify.com; frame-ancestors 'self'; object-src 'none';"
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "IE >= 11"
   ],
   "scripts": {
+    "build:prepare": "node update-netlify-config.js",
     "build": "cross-env NODE_OPTIONS='--max-old-space-size=4096' CI=false npm-run-all -s build:*",
     "build:css": "cross-env NODE_ENV=production postcss src/tailwind.css -o src/index.css",
     "build:js": "cross-env NODE_ENV=production react-app-rewired build",

diff --git a/public/index.html b/public/index.html
@@ -34,6 +34,26 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap" rel="stylesheet">
     <title>TradeTrust Creator</title>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=<%= process.env.REACT_APP_GA_MEASUREMENT_ID %>"
+      nonce="<%= process.env.REACT_APP_NONCE_VALUE %>"
+      ></script>
+    <script nonce="<%= process.env.REACT_APP_NONCE_VALUE %>">
+      var option = {
+          allow_google_signals: false,
+          allow_ad_personalization_signals: false,
+          debug_mode: false,
+        };
+
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+      gtag("config", "<%= process.env.REACT_APP_GA_MEASUREMENT_ID %>", option);
+    </script>
   </head>
   <body class="font-body">
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/update-netlify-config.js b/update-netlify-config.js
@@ -0,0 +1,26 @@
+const fs = require('fs');
+const path = require('path');
+
+// Read environment variables
+const nonceValue = process.env.REACT_APP_NONCE_VALUE || '';
+
+// Path to netlify.toml
+const netlifyTomlPath = path.resolve(__dirname, 'netlify.toml');
+
+// Read existing netlify.toml
+fs.readFile(netlifyTomlPath, 'utf8', (err, data) => {
+  if (err) {
+    console.error('Error reading netlify.toml:', err);
+    return;
+  }
+
+  // Replace placeholder with the actual nonce value
+  const updatedData = data.replace(/{nonce}/g, nonceValue);
+
+  // Write updated netlify.toml
+  fs.writeFile(netlifyTomlPath, updatedData, 'utf8', (err) => {
+    if (err) {
+      console.error('Error writing updated netlify.toml:', err);
+    }
+  });
+});