diff --git a/.gitpod.yml b/.gitpod.yml new file mode 100644 index 00000000..ef1e66e9 --- /dev/null +++ b/.gitpod.yml @@ -0,0 +1,11 @@ +# This configuration file was automatically generated by Gitpod. +# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml) +# and commit this file to your remote git repository to share the goodness with others. + +# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart + +tasks: + - init: npm install && npm run build + command: npm run watch + + diff --git a/src/components/GoogleAnalytics.test.tsx b/src/components/GoogleAnalytics.test.tsx index 187d2f75..f5043d00 100644 --- a/src/components/GoogleAnalytics.test.tsx +++ b/src/components/GoogleAnalytics.test.tsx @@ -122,7 +122,39 @@ describe("GoogleAnalytics", () => { }); expect(Router.events.on).toBeCalled(); }); - + it('should not throw an error when no process.env exists', () => { + // These tests run in node however this component will also be rendered on the browser. + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + process.env = undefined + render( + + ); + expect(usePageViewsSpy).toBeCalledWith({ + disabled: true, + gaMeasurementId: undefined, + ignoreHashChange: false, + }); + expect(Router.events.on).not.toBeCalled(); + }) + it('should work with the prop when no process.env exists', () => { + // These tests run in node however this component will also be rendered on the browser. + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + process.env = undefined + render( + + ); + expect(usePageViewsSpy).toBeCalledWith({ + disabled: false, + gaMeasurementId: "5678", + ignoreHashChange: false, + }); + expect(Router.events.on).toBeCalled(); + }) describe("debugMode", () => { it("should not have debug_mode when the debugMode prop is not set", () => { render(); diff --git a/src/components/GoogleAnalytics.tsx b/src/components/GoogleAnalytics.tsx index cff18ce6..50913ceb 100644 --- a/src/components/GoogleAnalytics.tsx +++ b/src/components/GoogleAnalytics.tsx @@ -21,6 +21,21 @@ type WithIgnoreHashChange = GoogleAnalyticsProps & { }; }; +const getGaMeasurementId = (gaMeasurementIdProp?: string) => { + let gaMeasurementId: string | undefined + try { + // process.env could be undefined if no env. file or next.config is not using env + gaMeasurementId = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID + } catch (e) { + // nothing to do + } + // To keep feature parity, allow the env var to override the prop + if (!gaMeasurementId) { + gaMeasurementId = gaMeasurementIdProp + } + return gaMeasurementId +} + export function GoogleAnalytics({ debugMode = false, gaMeasurementId, @@ -30,8 +45,7 @@ export function GoogleAnalytics({ trackPageViews, nonce, }: WithPageView | WithIgnoreHashChange): JSX.Element | null { - const _gaMeasurementId = - process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID ?? gaMeasurementId; + const _gaMeasurementId = getGaMeasurementId(gaMeasurementId) usePageViews({ gaMeasurementId: _gaMeasurementId, @@ -54,13 +68,12 @@ export function GoogleAnalytics({ window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); - ${ - defaultConsent === "denied" ? - `gtag('consent', 'default', { + ${defaultConsent === "denied" ? + `gtag('consent', 'default', { 'ad_storage': 'denied', 'analytics_storage': 'denied' });` : `` - } + } gtag('config', '${_gaMeasurementId}', { page_path: window.location.pathname, ${debugMode ? `debug_mode: ${debugMode},` : ""}