From 5125da67f29ad0f52b9e52f90c7b93f6dfeccd9c Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Thu, 25 May 2023 22:21:08 +0800
Subject: [PATCH] refactor: fix gtag reporting

---
 .../cloud/src/middleware/with-security-headers.ts |  8 ++++++--
 packages/console/src/onboarding/App.tsx           |  8 ++++----
 packages/console/src/onboarding/utils.ts          | 15 +++++++++++----
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/cloud/src/middleware/with-security-headers.ts b/packages/cloud/src/middleware/with-security-headers.ts
index 9a8b82a02..797801361 100644
--- a/packages/cloud/src/middleware/with-security-headers.ts
+++ b/packages/cloud/src/middleware/with-security-headers.ts
@@ -38,7 +38,11 @@ export default function withSecurityHeaders<InputContext extends RequestContext>
   const developmentOrigins = conditionalArray(!isProduction && 'ws:');
   const appInsightsOrigins = ['https://*.applicationinsights.azure.com'];
   // Gtag will load by `<script />`
-  const gtagOrigins = ['https://*.googletagmanager.com'];
+  const gtagOrigins = [
+    'https://*.googletagmanager.com',
+    'https://*.doubleclick.net',
+    'https://*.googleadservices.com',
+  ];
 
   return async (
     context: InputContext,
@@ -94,7 +98,7 @@ export default function withSecurityHeaders<InputContext extends RequestContext>
           directives: {
             'upgrade-insecure-requests': null,
             imgSrc: ["'self'", 'data:', 'https:'],
-            scriptSrc: ["'self'", "'unsafe-eval'", "'unsafe-inline'"],
+            scriptSrc: ["'self'", "'unsafe-eval'", "'unsafe-inline'", ...gtagOrigins],
             connectSrc: [
               "'self'",
               ...adminOrigins,
diff --git a/packages/console/src/onboarding/App.tsx b/packages/console/src/onboarding/App.tsx
index 94dfed3e2..1e09dff24 100644
--- a/packages/console/src/onboarding/App.tsx
+++ b/packages/console/src/onboarding/App.tsx
@@ -81,15 +81,15 @@ function App() {
       <div className={styles.app}>
         <SWRConfig value={swrOptions}>
           <AppBoundary>
-            <Helmet>
-              {shouldReportToGtag && (
+            {shouldReportToGtag && (
+              <Helmet>
                 <script
                   async
                   crossOrigin="anonymous"
                   src={`https://www.googletagmanager.com/gtag/js?id=${gtagAwTrackingId}`}
                 />
-              )}
-            </Helmet>
+              </Helmet>
+            )}
             <Toast />
             <Routes>
               <Route index element={<Navigate replace to={welcomePathname} />} />
diff --git a/packages/console/src/onboarding/utils.ts b/packages/console/src/onboarding/utils.ts
index 86edecd12..b77302852 100644
--- a/packages/console/src/onboarding/utils.ts
+++ b/packages/console/src/onboarding/utils.ts
@@ -6,7 +6,14 @@ import { OnboardingRoute } from './types';
 export const getOnboardingPage = (page: OnboardingPage) =>
   joinPath(OnboardingRoute.Onboarding, page);
 
-export const gtag = (...args: unknown[]) => {
-  // eslint-disable-next-line @silverhand/fp/no-mutating-methods
-  window.dataLayer?.push(args);
-};
+/** This function is updated from the Google Tag official code snippet. */
+export function gtag(..._: unknown[]) {
+  if (!window.dataLayer) {
+    // eslint-disable-next-line @silverhand/fp/no-mutation
+    window.dataLayer = [];
+  }
+
+  // We cannot use rest params here since gtag has some internal logic about `arguments` for data transpiling
+  // eslint-disable-next-line @silverhand/fp/no-mutating-methods, prefer-rest-params
+  window.dataLayer.push(arguments);
+}