From 83bc37ca60608886d99220f8c8a9c0a11aaa8b7f Mon Sep 17 00:00:00 2001 From: Jon Prusik Date: Fri, 31 Mar 2023 11:57:56 -0400 Subject: [PATCH] analytics and misc cleanup --- .github/workflows/build-and-deploy.yml | 5 ++++ public/index.html | 12 +-------- src/components/App.tsx | 5 +++- src/components/AppDetailsNav.tsx | 2 +- src/contexts/routes.tsx | 6 ----- src/utils/analytics.ts | 34 ++++++++++++++++++++++++++ src/utils/index.ts | 3 +++ 7 files changed, 48 insertions(+), 19 deletions(-) create mode 100644 src/utils/analytics.ts diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml index 6ee2f48..cf4b649 100644 --- a/.github/workflows/build-and-deploy.yml +++ b/.github/workflows/build-and-deploy.yml @@ -34,6 +34,11 @@ jobs: steps: - name: Checkout uses: actions/checkout@v3 + - name: create env file + run: | + touch .env + echo REACT_APP_DATA_REFETCH_INTERVAL=${{ vars.REACT_APP_DATA_REFETCH_INTERVAL }} >> .env + echo REACT_APP_GA_ID=${{ vars.REACT_APP_GA_ID }} >> .env - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v3 with: diff --git a/public/index.html b/public/index.html index 1eef3b0..bcdb405 100644 --- a/public/index.html +++ b/public/index.html @@ -4,7 +4,7 @@ - + TransitFind: MBTA Stop Information - - - - diff --git a/src/components/App.tsx b/src/components/App.tsx index f6ff77e..bf14871 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1,9 +1,12 @@ -import {Fragment} from 'react'; +import {Fragment, useEffect} from 'react'; +import {addAnalyticsTag} from 'utils'; import {AppDetailsNav} from 'components/AppDetailsNav'; import {Body} from 'components/Body'; import {Footer} from 'components/Footer'; export function App() { + useEffect(() => addAnalyticsTag(), []); + return ( diff --git a/src/components/AppDetailsNav.tsx b/src/components/AppDetailsNav.tsx index e10a117..8d02feb 100644 --- a/src/components/AppDetailsNav.tsx +++ b/src/components/AppDetailsNav.tsx @@ -110,7 +110,7 @@ const Container = styled.div<{ color: #A0CBF5; .favoriteIcon { - color: #ED143D; + color: #DB61A2; } } diff --git a/src/contexts/routes.tsx b/src/contexts/routes.tsx index 681c20e..892f5ea 100644 --- a/src/contexts/routes.tsx +++ b/src/contexts/routes.tsx @@ -12,12 +12,6 @@ export const RoutesContext = export function RoutesProvider ( {children}: PropsWithChildren ): JSX.Element { - /* - We need to fetch schedule data separately since it is unavailable - as an include on predictions if no predictions are returned. Also, - for now we won't refetch the schedule data since it's not likely - to change frequently. - */ const routes = useRoutes(); return ( diff --git a/src/utils/analytics.ts b/src/utils/analytics.ts new file mode 100644 index 0000000..e0ee6d5 --- /dev/null +++ b/src/utils/analytics.ts @@ -0,0 +1,34 @@ + +const GA_TAG_INIT_CODE = ` + window.dataLayer = window.dataLayer || []; + function gtag(){dataLayer.push(arguments);} + gtag('js', new Date()); + + gtag('config', '${process.env.REACT_APP_GA_ID}', { + anonymize_ip: true, + cookie_flags: 'SameSite=None;Secure', + }); + + gtag('consent', 'default', { + ad_storage: 'denied' + }); +`; + +export function addAnalyticsTag(): void { + const isDev = process.env.NODE_ENV === 'development'; + + if (process.env.REACT_APP_GA_ID && !isDev) { + let gtmScript = document.createElement('script'); + gtmScript.type = 'text/javascript'; + gtmScript.src = `https://www.googletagmanager.com/gtag/js?id=${process.env.REACT_APP_GA_ID}`; + gtmScript.async = true; + + document?.head?.appendChild(gtmScript)?.parentNode?.removeChild(gtmScript); + + let scriptTag = document.createElement('script'); + scriptTag.type = 'text/javascript'; + scriptTag.text = GA_TAG_INIT_CODE; + + document?.head?.appendChild(scriptTag)?.parentNode?.removeChild(scriptTag); + } +} diff --git a/src/utils/index.ts b/src/utils/index.ts index 93cfe0c..690c94e 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -14,6 +14,9 @@ import { } from 'types'; import {RouteIcon} from 'components/RouteIcon'; +export * from 'utils/analytics'; +export * from 'utils/data'; + type RelevantArrivals = { [key: string]: Prediction | Schedule; }