refactor: fix gtag reporting

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,

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} />} />

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);
+}