use env

.env.example

 NEXT_PUBLIC_SENTRY_DSN=xxx
 SENTRY_CSP_REPORT_URI=xxx
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=xxx
-NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=xxx
+NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=xxx
\ No newline at end of file
+NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID=UA-XXXXXX-X
\ No newline at end of file

.env.template

@@ -56,6 +56,7 @@ NEXT_PUBLIC_SENTRY_DSN=__PLACEHOLDER_FOR_NEXT_PUBLIC_SENTRY_DSN__
 NEXT_PUBLIC_AUTH0_CLIENT_ID=__PLACEHOLDER_FOR_NEXT_PUBLIC_AUTH0_CLIENT_ID__
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=__PLACEHOLDER_FOR_NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID__
 NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=__PLACEHOLDER_FOR_NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY__
+NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID=__PLACEHOLDER_FOR_NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID__
 
 # l2 config
 NEXT_PUBLIC_IS_L2_NETWORK=__PLACEHOLDER_FOR_NEXT_PUBLIC_IS_L2_NETWORKL__

README.md

@@ -130,6 +130,7 @@ The app instance could be customized by passing following variables to NodeJS en
 | NEXT_PUBLIC_AUTH0_CLIENT_ID | `string` | Client id for [Auth0](https://auth0.com/) provider | `<secret>` |
 | NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID | `string` | Project id for [WalletConnect](https://docs.walletconnect.com/2.0/web3modal/react/installation#obtain-project-id) integration | `<secret>` |
 | NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY | `string` | Site key for [reCAPTCHA](https://developers.google.com/recaptcha) service | `<secret>` |
+| NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID | `string` | Property ID for [Google Analytics](https://analytics.google.com/) service | `UA-XXXXXX-X` |
 
 ### L2 configuration
 | Variable | Type | Description | Default value

configs/app/config.ts

@@ -133,6 +133,9 @@ const config = Object.freeze({
   reCaptcha: {
     siteKey: getEnvValue(process.env.NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY) || '',
   },
+  googleAnalytics: {
+    propertyId: getEnvValue(process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID),
+  },
 });
 
 export default config;

lib/csp/getCspPolicy.ts

@@ -93,6 +93,7 @@ function makePolicyMap() {
       // google analytics
       'https://www.googletagmanager.com',
       'https://www.google-analytics.com',
+      'https://stats.g.doubleclick.net',
     ],
 
     'script-src': [

pages/_app.tsx

@@ -2,7 +2,6 @@ import * as Sentry from '@sentry/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import type { AppProps } from 'next/app';
-import Script from 'next/script';
 import React, { useState } from 'react';
 
 import appConfig from 'configs/app/config';
@@ -16,6 +15,7 @@ import { SocketProvider } from 'lib/socket/context';
 import theme from 'theme';
 import AppError from 'ui/shared/AppError/AppError';
 import ErrorBoundary from 'ui/shared/ErrorBoundary';
+import GoogleAnalytics from 'ui/shared/GoogleAnalytics';
 
 function MyApp({ Component, pageProps }: AppProps) {
   useConfigSentry();
@@ -59,32 +59,21 @@ function MyApp({ Component, pageProps }: AppProps) {
   }, []);
 
   return (
-    <>
-      <Chakra theme={ theme } cookies={ pageProps.cookies }>
-        <ErrorBoundary renderErrorScreen={ renderErrorScreen } onError={ handleError }>
-          <AppContextProvider pageProps={ pageProps }>
-            <QueryClientProvider client={ queryClient }>
-              <ScrollDirectionProvider>
-                <SocketProvider url={ `${ appConfig.api.socket }${ appConfig.api.basePath }/socket/v2` }>
-                  <Component { ...pageProps }/>
-                </SocketProvider>
-              </ScrollDirectionProvider>
-              <ReactQueryDevtools/>
-            </QueryClientProvider>
-          </AppContextProvider>
-        </ErrorBoundary>
-      </Chakra>
-      { /* <!-- Google tag (gtag.js) --> */ }
-      <Script src="https://www.googletagmanager.com/gtag/js?id=UA-125140709-1"/>
-      <Script id="google-analytics">
-        { `
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
-          gtag('config', 'UA-125140709-1');
-        ` }
-      </Script>
-    </>
+    <Chakra theme={ theme } cookies={ pageProps.cookies }>
+      <ErrorBoundary renderErrorScreen={ renderErrorScreen } onError={ handleError }>
+        <AppContextProvider pageProps={ pageProps }>
+          <QueryClientProvider client={ queryClient }>
+            <ScrollDirectionProvider>
+              <SocketProvider url={ `${ appConfig.api.socket }${ appConfig.api.basePath }/socket/v2` }>
+                <Component { ...pageProps }/>
+              </SocketProvider>
+            </ScrollDirectionProvider>
+            <ReactQueryDevtools/>
+            <GoogleAnalytics/>
+          </QueryClientProvider>
+        </AppContextProvider>
+      </ErrorBoundary>
+    </Chakra>
   );
 }
 

ui/shared/GoogleAnalytics.tsx

+import Script from 'next/script';
+import React from 'react';
+
+import appConfig from 'configs/app/config';
+
+const GoogleAnalytics = () => {
+  if (!appConfig.googleAnalytics.propertyId) {
+    return null;
+  }
+
+  const id = appConfig.googleAnalytics.propertyId;
+
+  return (
+    <>
+      <Script src={ `https://www.googletagmanager.com/gtag/js?id=${ id }` }/>
+      <Script id="google-analytics">
+        { `
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', '${ id }');
+        ` }
+      </Script>
+    </>
+  );
+};
+
+export default React.memo(GoogleAnalytics);