0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00

refactor: add google tag conversion report

This commit is contained in:
Gao Sun 2023-05-25 17:04:00 +08:00
parent 4f1e29aefc
commit b94136d571
No known key found for this signature in database
GPG key ID: 13EBE123E4773688
5 changed files with 47 additions and 2 deletions

View file

@ -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,

View file

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

View file

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

View file

@ -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`;

View file

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