From b94136d5713ec7339dc93c9b4163d2f2d34e61f7 Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Thu, 25 May 2023 17:04:00 +0800
Subject: [PATCH] refactor: add google tag conversion report

---
 .../src/middleware/with-security-headers.ts   |  4 ++-
 packages/console/src/include.d/gtag.d.ts      |  3 ++
 packages/console/src/onboarding/App.tsx       | 33 ++++++++++++++++++-
 .../console/src/onboarding/constants/index.ts |  4 +++
 packages/console/src/onboarding/utils.ts      |  5 +++
 5 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 packages/console/src/include.d/gtag.d.ts

diff --git a/packages/cloud/src/middleware/with-security-headers.ts b/packages/cloud/src/middleware/with-security-headers.ts
index 901fb4dd2..94e4c131d 100644
--- a/packages/cloud/src/middleware/with-security-headers.ts
+++ b/packages/cloud/src/middleware/with-security-headers.ts
@@ -37,6 +37,8 @@ export default function withSecurityHeaders<InputContext extends RequestContext>
   const urlSetOrigins = urlSet.origins;
   const developmentOrigins = conditionalArray(!isProduction && 'ws:');
   const appInsightsOrigins = ['https://*.applicationinsights.azure.com'];
+  // Gtag will load by `<script />`
+  const gtagOrigins = ['https://*.googletagmanager.com'];
 
   return async (
     context: InputContext,
@@ -91,7 +93,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/include.d/gtag.d.ts b/packages/console/src/include.d/gtag.d.ts
new file mode 100644
index 000000000..977669c09
--- /dev/null
+++ b/packages/console/src/include.d/gtag.d.ts
@@ -0,0 +1,3 @@
+declare interface Window {
+  dataLayer?: unknown[];
+}
diff --git a/packages/console/src/onboarding/App.tsx b/packages/console/src/onboarding/App.tsx
index c8a90d9d3..efedae5c1 100644
--- a/packages/console/src/onboarding/App.tsx
+++ b/packages/console/src/onboarding/App.tsx
@@ -2,6 +2,7 @@ import { Component, ConsoleEvent } from '@logto/app-insights/custom-event';
 import { TrackOnce } from '@logto/app-insights/react';
 import { Theme } from '@logto/schemas';
 import { useContext, useEffect } from 'react';
+import { Helmet } from 'react-helmet';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { SWRConfig } from 'swr';
 
@@ -14,6 +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 AppContent from './containers/AppContent';
 import useUserOnboardingData from './hooks/use-user-onboarding-data';
 import About from './pages/About';
@@ -21,9 +23,10 @@ import Congrats from './pages/Congrats';
 import SignInExperience from './pages/SignInExperience';
 import Welcome from './pages/Welcome';
 import { OnboardingPage, OnboardingRoute } from './types';
-import { getOnboardingPage } from './utils';
+import { getOnboardingPage, gtag } from './utils';
 
 const welcomePathname = getOnboardingPage(OnboardingPage.Welcome);
+const isLocalhost = window.location.hostname === 'localhost';
 
 function App() {
   const swrOptions = useSwrOptions();
@@ -37,6 +40,28 @@ function App() {
     };
   }, [setThemeOverride]);
 
+  /**
+   * This `useEffect()` initiates Google Tag and report a sign-up conversion to it.
+   * It may run multiple times (e.g. a user visit multiple times to finish the onboarding process,
+   * which rarely happens), but it'll be okay since we've set conversion's "Count" to "One"
+   * which means only the first interaction is valuable.
+   *
+   * Track this conversion in the backend has been considered, but Google does not provide
+   * a clear guideline for it and marks the [Node library](https://developers.google.com/tag-platform/tag-manager/api/v2/libraries)
+   * as "alpha" which looks unreliable.
+   */
+  useEffect(() => {
+    if (isLocalhost) {
+      console.debug('Fire Google Tag event');
+    } else {
+      gtag('js', new Date());
+      gtag('config', gtagAwTrackingId);
+      gtag('event', 'conversion', {
+        send_to: gtagSignUpConversionId,
+      });
+    }
+  }, []);
+
   const {
     data: { questionnaire },
     isLoaded,
@@ -52,6 +77,12 @@ function App() {
       <div className={styles.app}>
         <SWRConfig value={swrOptions}>
           <AppBoundary>
+            <Helmet>
+              <script
+                async
+                src={`https://www.googletagmanager.com/gtag/js?id=${gtagAwTrackingId}`}
+              />
+            </Helmet>
             <Toast />
             <Routes>
               <Route index element={<Navigate replace to={welcomePathname} />} />
diff --git a/packages/console/src/onboarding/constants/index.ts b/packages/console/src/onboarding/constants/index.ts
index e9d296404..d68f2eae6 100644
--- a/packages/console/src/onboarding/constants/index.ts
+++ b/packages/console/src/onboarding/constants/index.ts
@@ -10,3 +10,7 @@ export const emailUsLink = buildUrl('mailto:contact@logto.io', {
 
 export const logtoBlogLink = 'https://docs.logto.io/blog?utm_source=console';
 export const aboutCloudPreviewLink = 'https://docs.logto.io/about/cloud-preview?utm_source=console';
+
+export const gtagAwTrackingId = 'AW-11124811245';
+/** This ID indicates a user has truly signed up for Logto Cloud. */
+export const gtagSignUpConversionId = `${gtagAwTrackingId}/RVejCKC65qMYEO3L3Lgp`;
diff --git a/packages/console/src/onboarding/utils.ts b/packages/console/src/onboarding/utils.ts
index d219a9d4f..86edecd12 100644
--- a/packages/console/src/onboarding/utils.ts
+++ b/packages/console/src/onboarding/utils.ts
@@ -5,3 +5,8 @@ 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);
+};