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,6 +59,7 @@ function MyApp({ Component, pageProps }: AppProps) {
   }, []);
 
   return (
+    <>
       <Chakra theme={ theme } cookies={ pageProps.cookies }>
         <ErrorBoundary renderErrorScreen={ renderErrorScreen } onError={ handleError }>
           <AppContextProvider pageProps={ pageProps }>
@@ -72,6 +74,17 @@ function MyApp({ Component, pageProps }: AppProps) {
           </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>
+    </>
   );
 }