Merge pull request #3905 from logto-io/gao-add-google-tag

refactor: add google tag conversion report

packages/cloud/src/middleware/with-security-headers.ts

@@ -37,6 +37,12 @@ export default function withSecurityHeaders<InputContext extends RequestContext>
   const coreOrigins = urlSet.origins;
   const developmentOrigins = conditionalArray(!isProduction && 'ws:');
   const appInsightsOrigins = ['https://*.applicationinsights.azure.com'];
+  // Gtag will load by `<script />`
+  const gtagOrigins = [
+    'https://*.googletagmanager.com',
+    'https://*.doubleclick.net',
+    'https://*.googleadservices.com',
+  ];
 
   return async (
     context: InputContext,
@@ -63,6 +69,7 @@ export default function withSecurityHeaders<InputContext extends RequestContext>
 
     const basicSecurityHeaderSettings: HelmetOptions = {
       contentSecurityPolicy: false, // Exclusively set for console app only
+      crossOriginEmbedderPolicy: { policy: 'credentialless' },
       expectCt: false, // Not recommended, will be deprecated by modern browsers
       dnsPrefetchControl: false,
       referrerPolicy: {
@@ -89,7 +96,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,
@@ -97,6 +104,7 @@ export default function withSecurityHeaders<InputContext extends RequestContext>
               ...coreOrigins,
               ...developmentOrigins,
               ...appInsightsOrigins,
+              ...gtagOrigins,
             ],
             frameSrc: ["'self'", ...coreOrigins, ...adminOrigins],
           },

packages/console/src/include.d/gtag.d.ts

@@ -0,0 +1,3 @@
+declare interface Window {
+  dataLayer?: unknown[];
+}

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, logtoProductionHostname } from './constants';
 import AppContent from './containers/AppContent';
 import useUserOnboardingData from './hooks/use-user-onboarding-data';
 import About from './pages/About';
@@ -21,9 +23,14 @@ 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);
+/**
+ * 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();
@@ -37,6 +44,27 @@ 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 (shouldReportToGtag) {
+      gtag('js', new Date());
+      gtag('config', gtagAwTrackingId);
+      gtag('event', 'conversion', {
+        send_to: gtagSignUpConversionId,
+      });
+      console.debug('Google Tag event fires');
+    }
+  }, []);
+
   const {
     data: { questionnaire },
     isLoaded,
@@ -52,6 +80,15 @@ function App() {
       <div className={styles.app}>
         <SWRConfig value={swrOptions}>
           <AppBoundary>
+            {shouldReportToGtag && (
+              <Helmet>
+                <script
+                  async
+                  crossOrigin="anonymous"
+                  src={`https://www.googletagmanager.com/gtag/js?id=${gtagAwTrackingId}`}
+                />
+              </Helmet>
+            )}
             <Toast />
             <Routes>
               <Route index element={<Navigate replace to={welcomePathname} />} />

packages/console/src/onboarding/constants/index.ts

@@ -11,3 +11,8 @@ export const emailUsLink = buildUrl(contactEmailLink, {
 
 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`;
+export const logtoProductionHostname = 'logto.io';

packages/console/src/onboarding/utils.ts

@@ -5,3 +5,15 @@ import { OnboardingRoute } from './types';
 
 export const getOnboardingPage = (page: OnboardingPage) =>
   joinPath(OnboardingRoute.Onboarding, page);
+
+/** 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);
+}