From 46746f8285c821f8424797502cd1347329660094 Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Thu, 25 May 2023 17:25:40 +0800
Subject: [PATCH] refactor(console): restrict gtag report to production

---
 packages/console/src/onboarding/App.tsx       | 24 ++++++++++++-------
 .../console/src/onboarding/constants/index.ts |  1 +
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/console/src/onboarding/App.tsx b/packages/console/src/onboarding/App.tsx
index efedae5c1..471332e47 100644
--- a/packages/console/src/onboarding/App.tsx
+++ b/packages/console/src/onboarding/App.tsx
@@ -15,7 +15,7 @@ import useSwrOptions from '@/hooks/use-swr-options';
 import NotFound from '@/pages/NotFound';
 
 import * as styles from './App.module.scss';
-import { gtagAwTrackingId, gtagSignUpConversionId } from './constants';
+import { gtagAwTrackingId, gtagSignUpConversionId, logtoProductionHostname } from './constants';
 import AppContent from './containers/AppContent';
 import useUserOnboardingData from './hooks/use-user-onboarding-data';
 import About from './pages/About';
@@ -26,7 +26,11 @@ import { OnboardingPage, OnboardingRoute } from './types';
 import { getOnboardingPage, gtag } from './utils';
 
 const welcomePathname = getOnboardingPage(OnboardingPage.Welcome);
-const isLocalhost = window.location.hostname === 'localhost';
+/**
+ * Due to the special of Google Tag, it should be `true` only in the Logto Cloud production environment.
+ * Add the leading '.' to make it safer (ignore hostnames like "foologto.io").
+ */
+const shouldReportToGtag = window.location.hostname.endsWith('.' + logtoProductionHostname);
 
 function App() {
   const swrOptions = useSwrOptions();
@@ -51,14 +55,14 @@ function App() {
    * as "alpha" which looks unreliable.
    */
   useEffect(() => {
-    if (isLocalhost) {
-      console.debug('Fire Google Tag event');
-    } else {
+    if (shouldReportToGtag) {
       gtag('js', new Date());
       gtag('config', gtagAwTrackingId);
       gtag('event', 'conversion', {
         send_to: gtagSignUpConversionId,
       });
+    } else {
+      console.debug('Google Tag event fires');
     }
   }, []);
 
@@ -78,10 +82,12 @@ function App() {
         <SWRConfig value={swrOptions}>
           <AppBoundary>
             <Helmet>
-              <script
-                async
-                src={`https://www.googletagmanager.com/gtag/js?id=${gtagAwTrackingId}`}
-              />
+              {shouldReportToGtag && (
+                <script
+                  async
+                  src={`https://www.googletagmanager.com/gtag/js?id=${gtagAwTrackingId}`}
+                />
+              )}
             </Helmet>
             <Toast />
             <Routes>
diff --git a/packages/console/src/onboarding/constants/index.ts b/packages/console/src/onboarding/constants/index.ts
index d68f2eae6..0f4f5e877 100644
--- a/packages/console/src/onboarding/constants/index.ts
+++ b/packages/console/src/onboarding/constants/index.ts
@@ -14,3 +14,4 @@ export const aboutCloudPreviewLink = 'https://docs.logto.io/about/cloud-preview?
 export const gtagAwTrackingId = 'AW-11124811245';
 /** This ID indicates a user has truly signed up for Logto Cloud. */
 export const gtagSignUpConversionId = `${gtagAwTrackingId}/RVejCKC65qMYEO3L3Lgp`;
+export const logtoProductionHostname = 'logto.io';