simple integration

lib/csp/getCspPolicy.ts

@@ -89,6 +89,10 @@ function makePolicyMap() {
 
       // github (spec for api-docs page)
       'raw.githubusercontent.com',
+
+      // google analytics
+      'https://www.googletagmanager.com',
+      'https://www.google-analytics.com',
     ],
 
     'script-src': [
@@ -114,6 +118,11 @@ function makePolicyMap() {
       'https://www.gstatic.com',
       'https://translate.google.com',
       '\'sha256-FDyPg8CqqIpPAfGVKx1YeKduyLs0ghNYWII21wL+7HM=\'',
+
+      // google analytics
+      '\'sha256-NTmEg2dBnojQfTYrYJEmp3nG7V66756qPbQMCIBrctk=\'',
+      'https://www.googletagmanager.com',
+      'https://www.google-analytics.com',
     ],
 
     'style-src': [
@@ -168,6 +177,9 @@ function makePolicyMap() {
       // reCAPTCHA from google
       'https://translate.google.com',
       'https://www.gstatic.com',
+
+      // google analytics
+      'https://www.google-analytics.com',
     ],
 
     'font-src': [

pages/_app.tsx

@@ -2,6 +2,7 @@ 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';
@@ -58,20 +59,32 @@ 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>
+    <>
+      <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>
+    </>
   );
 }