Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ Issue 389 ] Add Google Analytics #453

Merged
merged 7 commits into from
Sep 6, 2023
Merged

[ Issue 389 ] Add Google Analytics #453

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
928d053
public vars and gtag
SammySteiner Aug 29, 2023
a1e097e
ga tag
SammySteiner Sep 1, 2023
0467a02
Merge branch 'main' into sammysteiner/issue-389-google-analytics
SammySteiner Sep 1, 2023
d9e6fc7
gtag needs quotes
SammySteiner Sep 1, 2023
9a29b5b
added environments
SammySteiner Sep 5, 2023
25b2e3e
format
SammySteiner Sep 5, 2023
04ad5eb
Merge branch 'main' into sammysteiner/issue-389-google-analytics
SammySteiner Sep 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions frontend/src/constants/environments.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/**
* Define environment variables that you need exposed in the client-side bundle.
* These should not include sensitive secrets!
*/
const PUBLIC_ENV_VARS_BY_ENV = {
development: {
GOOGLE_ANALYTICS_ID: "GTM-MV57HMHS",
GTM_AUTH: "Xf-LmsD6dhZRJXZz21rZVA",
GTM_PREVIEW: "env-8",
},
test: {
GOOGLE_ANALYTICS_ID: "GTM-MV57HMHS",
GTM_AUTH: "73_zp32T8ExOVz-f_X56dQ",
GTM_PREVIEW: "env-9",
},
production: {
GOOGLE_ANALYTICS_ID: "GTM-MV57HMHS",
GTM_AUTH: "hqnD044nMRMTQ0C3XBpbfQ",
GTM_PREVIEW: "env-1",
},
} as const;

const NEXT_ENVS = ["development", "test", "production"] as const;
export type NextPublicAppEnv = (typeof NEXT_ENVS)[number];

const CURRENT_ENV = process.env.NODE_ENV ?? "development";
Copy link
Contributor

@daphnegold daphnegold Sep 5, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where is NODE_ENV being set? Our application is environment agnostic at the moment, and prefer it that way (have intentionally made decisions to maintain that). Just not sure this will hit anything but "development" at this point.

EDIT: Thanks for explaining offline that it's just how we start the app and what's happening with AWS accounts both being production.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NODE_ENV is set when we run npm run start automagically by node to development and that is a flag that node uses to set certain configs. npm run test sets it to test, and serving it from the server.js file sets it to production. We could have more finely tuned control by using env files, but that would add some overhead that I don't think we need yet.


export const PUBLIC_ENV = PUBLIC_ENV_VARS_BY_ENV[CURRENT_ENV];
20 changes: 20 additions & 0 deletions frontend/src/pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { PUBLIC_ENV } from "src/constants/environments";

import { appWithTranslation } from "next-i18next";
import type { AppProps } from "next/app";
import Head from "next/head";
import Script from "next/script";

import Layout from "../components/Layout";

Expand All @@ -16,7 +19,24 @@ function MyApp({ Component, pageProps }: AppProps) {
sizes="any"
/>
</Head>
<Script id="google-tag-manager">
{`
(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+ '&gtm_auth=${PUBLIC_ENV.GTM_AUTH}&gtm_preview=${PUBLIC_ENV.GTM_PREVIEW}&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','${PUBLIC_ENV.GOOGLE_ANALYTICS_ID}');
`}
</Script>

<Layout>
<noscript
id="gtm-iframe"
dangerouslySetInnerHTML={{
__html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${PUBLIC_ENV.GOOGLE_ANALYTICS_ID}&gtm_auth=${PUBLIC_ENV.GTM_AUTH}&gtm_preview=${PUBLIC_ENV.GTM_PREVIEW}&gtm_cookies_win=x"
height="0" width="0" style="display:none;visibility:hidden" />`,
}}
/>
<Component {...pageProps} />
</Layout>
</>
Expand Down