(core) Record new user sign-ups

Summary:
Adds Google Tag Manager snippet to all login pages, and a new user
preference, recordSignUpEvent, that's set to true on first sign-in. The
client now checks for this preference, and if true, dynamically loads
Google Tag Manager to record a sign-up event. Afterwards, it removes
the preference.

Test Plan: Tested manually.

Reviewers: dsagal

Reviewed By: dsagal

Subscribers: dsagal

Differential Revision: https://phab.getgrist.com/D3319
This commit is contained in:
George Gevoian
2022-03-11 12:35:29 -08:00
parent eff78ae2e1
commit ad1b4f3cff
7 changed files with 84 additions and 31 deletions

View File

@@ -17,6 +17,9 @@ export interface UserPrefs extends Prefs {
// Whether to ask the user to fill out a form about their use-case, on opening the DocMenu page.
// Set to true on first login, then reset when the form is closed, so that it only shows once.
showNewUserQuestions?: boolean;
// Whether to record a new sign-up event via Google Tag Manager. Set to true on first login, then
// reset on first page load (after the event is sent), so that it's only recorded once.
recordSignUpEvent?: boolean;
}
export interface UserOrgPrefs extends Prefs {

View File

@@ -496,6 +496,9 @@ export interface GristLoadConfig {
// Whether there is somewhere for survey data to go.
survey?: boolean;
// Google Tag Manager id. Currently only used to load tag manager for reporting new sign-ups.
tagManagerId?: string;
}
// Acceptable org subdomains are alphanumeric (hyphen also allowed) and of

29
app/common/tagManager.ts Normal file
View File

@@ -0,0 +1,29 @@
/**
* Returns the Google Tag Manager snippet to insert into <head> of the page, if
* `tagId` is set to a non-empty value. Otherwise returns an empty string.
*/
export function getTagManagerSnippet(tagId?: string) {
// Note also that we only insert the snippet for the <head>. The second recommended part (for
// <body>) is for <noscript> scenario, which doesn't apply to the Grist app (such visits, if
// any, wouldn't work and shouldn't be counted for any metrics we care about).
if (!tagId) { return ""; }
return `
<!-- Google Tag Manager -->
<script>${getTagManagerScript(tagId)}</script>
<!-- End Google Tag Manager -->
`;
}
/**
* Returns the body of the Google Tag Manager script. This is suitable for use by the client,
* since it must dynamically load it by calling `document.createElement('script')` and setting
* its `innerHTML`.
*/
export function getTagManagerScript(tagId: string) {
return `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','${tagId}');`;
}