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

Include Google Analytics code #451

Merged
merged 2 commits into from
Sep 3, 2021
Merged

Include Google Analytics code #451

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
00f3a57
Include Google Analytics code
kalvinwang Sep 3, 2021
dddae80
Merge branch 'main' into kalvin-analytics
kalvinwang Sep 3, 2021
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
31 changes: 31 additions & 0 deletions pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export interface HomeProps {
errorCode?: number | null
userArrivedFromUioMobile?: boolean
urlPrefixes: UrlPrefixes
enableGoogleAnalytics: string
}

export default function Home({
Expand All @@ -34,9 +35,34 @@ export default function Home({
errorCode = null,
userArrivedFromUioMobile = false,
urlPrefixes,
enableGoogleAnalytics,
}: HomeProps): ReactElement {
const { t } = useTranslation('common')

// Once CSP is enabled, if you change the GA script code, you need to update the hash in csp.js to allow
// this script to run. Chrome dev tools will have an error with the correct hash value to use.
// https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script
const gaScript = `
window.dataLayer = window.dataLayer || []
function gtag(){dataLayer.push(arguments)}
gtag('js', new Date())
// For details see: https://support.google.com/analytics/answer/9310895?hl=en
// https://developers.google.com/analytics/devguides/collection/gtagjs/ip-anonymization
gtag('config', 'UA-3419582-2', { 'anonymize_ip': true }) // www.ca.gov
gtag('config', 'UA-3419582-31', { 'anonymize_ip': true }) // edd.ca.gov`

const googleAnalytics = (
<>
{/* Global site tag (gtag.js) - Google Analytics */}
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-3419582-2" />
Comment on lines +51 to +57
Copy link
Contributor

Choose a reason for hiding this comment

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

I feel like there's a teeny bit of a bad code smell here with the hardcoded IDs.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hmm. Is there a constants file I could move this to? It doesn't make sense for it to be an env var.

<script
dangerouslySetInnerHTML={{
__html: gaScript,
}}
/>
</>
)

// If any errorCode is provided, render the error page.
let mainComponent: JSX.Element
if (errorCode) {
Expand Down Expand Up @@ -75,6 +101,7 @@ export default function Home({
href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet"
/>
{enableGoogleAnalytics === 'enabled' && googleAnalytics}
Copy link
Contributor

Choose a reason for hiding this comment

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

I think I might be being dense here. Doesn't this expression evaluate to true/false?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's a JSX feature, react conditional rendering: https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator

Copy link
Contributor

Choose a reason for hiding this comment

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

😖

Copy link
Contributor

Choose a reason for hiding this comment

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

oh wow Javascript doesn't do this natively? TIL

</Head>
<Header userArrivedFromUioMobile={userArrivedFromUioMobile} />
{mainComponent}
Expand All @@ -98,6 +125,9 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res, locale,
urlPrefixBpo: process.env.URL_PREFIX_BPO ?? '',
}

// Set to 'enabled' to include Google Analytics code
const ENABLE_GOOGLE_ANALYTICS = process.env.ENABLE_GOOGLE_ANALYTICS ?? ''
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we need to be alerted on whether this env var is missing? If so, there is code in queryApiGateway.ts that could be re-used or generalized.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh interesting! I guess ideally we could be alerted if it's missing in production, and only in production. I don't think we currently have a way of detecting whether we're in production (although it's easy enough to add an env var for that), so I'll create a ticket to alert if it's missing in prod, how's that sound?

Copy link
Contributor

@rocketnova rocketnova Sep 3, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

I don't think we currently have a way of detecting whether we're in production

We do! We're doing that for the missing unique number.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

(talked to Rocket, we don't have a way in our codebase of detecting whether we're in prod)

created: #460


// Other vars.
let errorCode: number | null = null
let scenarioContent: ScenarioContent | null = null
Expand Down Expand Up @@ -168,6 +198,7 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res, locale,
errorCode: errorCode,
userArrivedFromUioMobile: userArrivedFromUioMobile,
urlPrefixes: URL_PREFIXES,
enableGoogleAnalytics: ENABLE_GOOGLE_ANALYTICS,
...(await serverSideTranslations(locale || 'en', ['common', 'claim-details', 'claim-status'])),
},
}
Expand Down